Tag HTML <picture>
Le tag <picture> est utilisé pour stocker un ou plusieurs éléments <source> et un élément <img>. Chaque élément <source> contient le nom du fichier des versions alternatives de l'image, ainsi que les conditions dans lesquelles le navigateur doit les télécharger.
Le navigateur considère à tour de rôle le contenu des enfants <source> et si aucune des conditions spécifiées pour le chargement des images ne peut être satisfaite, le navigateur charge l'image spécifiée dans la balise <img>.
L’utilisation de l’élément <picture> permet de charger plusieurs options d'image, optimisées pour différentes tailles et autres options d'écran.
Syntaxe
Le tag HTML <picture> est apparié; le contenu est écrit entre les tags ouvrant (<picture>) et fermant (</picture>).
L’élément <picture> peut contenir un ou plusieurs éléments <source> et un élément <img>, qui est le dernier enfant élément du bloc.
<picture>
<source media="...">
<source media="...">
<img src="...">
</picture>Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
<source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
<img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
</picture>
<p>Quelques informations sur les images</p>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| media | media_query | Indique, que le fichier est adapté à certains types d'appareils. |
| sizes | Indique les tailles relatives de source, qui sont autorisés. Ajouté dans HTML5. | |
| src | URL | Indique l’adresse URL le fichier média. |
| srcset | URL | Indique les images, qui sont utilisées dans les différentes situations (pour les écrans de tablettes, pour les écrans de rétine, etc.). Ajouté dans HTML5. |
| type |
video/ogg video/mp4 video/webm audio/ogg audio/mpeg |
Indique le type MIME de la source média. |
Le tag <picture> supporte également les Attributs globaux.
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 38+ | 38+ | 9.1+ | 25+ |
Pratiquez vos connaissances
