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+


Trouvez-vous cela utile?

Articles Associées