Élément HTML <image>
L'élément HTML <picture>vous permet d'afficher différentes images pour différents appareils ou tailles d'écran.
L'élément HTML <image>
L'élément HTML <picture>donne aux développeurs Web plus de flexibilité dans la spécification des ressources d'image.
L' <picture>élément contient un ou plusieurs <source>éléments, chacun faisant référence à différentes images via l' srcset
attribut. De cette façon, le navigateur peut choisir l'image qui correspond le mieux à la vue et/ou à l'appareil actuel.
Chaque <source>élément a un
mediaattribut qui définit quand l'image est la plus appropriée.
Exemple
Afficher différentes images pour différentes tailles d'écran :
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Remarque : spécifiez toujours un <img>élément comme dernier élément enfant de l' <picture>élément. L' <img>élément est utilisé par les navigateurs qui ne prennent pas en charge l' <picture>élément, ou si aucune des <source>balises ne correspond.
Quand utiliser l'élément d'image
<picture>L' élément a deux objectifs principaux :
1. Bande passante
Si vous avez un petit écran ou un petit appareil, il n'est pas nécessaire de charger un gros fichier image. Le navigateur utilisera le premier <source>
élément avec les valeurs d'attribut correspondantes et ignorera les éléments suivants.
2. Prise en charge des formats
Certains navigateurs ou appareils peuvent ne pas prendre en charge tous les formats d'image. En utilisant l'
<picture>élément, vous pouvez ajouter des images de tous les formats, et le navigateur utilisera le premier format qu'il reconnaît et ignorera les éléments suivants.
Exemple
Le navigateur utilisera le premier format d'image qu'il reconnaît :
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Remarque : Le navigateur utilisera le premier <source>élément avec les valeurs d'attribut correspondantes et ignorera les <source>éléments suivants.
Balises d'images HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .