HTML <picture> Élément
L'élément HTML <picture> permet d'afficher différentes images selon les appareils ou les tailles d'écran.
L'élément HTML <picture>
L'élément HTML <picture> offre aux développeurs web une plus grande flexibilité pour spécifier les ressources d'image.
L'élément <picture> contient un ou plusieurs éléments <source> , chacun faisant référence à des images différentes via l'attribut srcset . Ainsi, le navigateur peut choisir l'image qui convient le mieux à la vue actuelle et/ou à l'appareil.
Chaque élément <source> possède un attribut media 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 élément <img> comme dernier enfant de l'élément <picture> . L'élément <img> est utilisé par les navigateurs qui ne prennent pas en charge l'élément <picture> , ou si aucun des éléments <source> ne correspond.
Quand utiliser l'élément Picture
Il y a deux principales raisons d'utiliser l'élément <picture> :
1. Bande passante
Si vous avez un petit écran ou appareil, il n'est pas nécessaire de charger un gros fichier image. Le navigateur utilisera le premier élément <source> avec des valeurs d'attribut correspondantes et ignorera les éléments suivants.
2. Support de format
Certains navigateurs ou appareils peuvent ne pas prendre en charge tous les formats d'image. En utilisant l'élément <picture> , vous pouvez ajouter des images de tous formats, et le navigateur utilisera le premier format qu'il reconnaît, en ignorant 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 élément <source> avec des valeurs d'attribut correspondantes et ignorera les éléments <source> suivants.
Balises d'image HTML
| Balise | Description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une carte d'image |
| <area> | Définit une zone cliquable à l'intérieur d'une carte d'image |
| <picture> | Définit un conteneur pour plusieurs ressources d'image |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML .