HTML <picture> Élément
L'élément HTML <picture> vous permet d'afficher différentes images pour différents appareils ou tailles d'écran.
L'élément HTML <picture>
L'élément HTML <picture> offre aux développeurs Web plus de flexibilité dans la spécification des ressources d'image.
L'élément <picture> contient un ou plusieurs éléments <source>, chacun faisant référence à des images différentes via le attribut srcset. De cette façon, le navigateur peut choisir l'image qui correspond le mieux à la vue et/ou à l'appareil actuel.
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>
Try it Yourself »
Remarque : Spécifiez toujours un élément <img> comme dernier élément enfant du <picture> élément. L'élément <img> est utilisé par les navigateurs qui ne prennent pas en charge l'élément <picture>, ou s'il n'y en a pas des balises <source> correspondent.
Quand utiliser l'élément image
L'élément <picture> a deux objectifs principaux :
1. Bande passante
Si vous disposez d'un petit écran ou d'un petit appareil, il n'est pas nécessaire de charger un gros fichier image. Le navigateur utilisera le premier élément <source> 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'élément <picture>, vous pouvez ajouter des images de tous les formats, et le navigateur utilisera le premier format qu'il reconnaît et ignorera l'un des é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>
Try it Yourself »
Remarque : le navigateur utilisera le premier élément <source> avec les valeurs d'attribut correspondantes et ignorera tous les éléments <source> suivants.
HTML Balises d’images
| Étiquette | Description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une image cliquable |
| <area> | Définit une zone cliquable à l'intérieur d'une image cliquable |
| <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 sur notre site Web W3SchoolsFR. Le meilleur.
