Balise HTML `<picture>`

L'élément <picture> est un conteneur pour un ou plusieurs éléments <source> et un élément <img>, qui est le dernier élément enfant du bloc.

L'élément <source> contient des versions d'une image pour différents scénarios d'affichage. L'élément <img> décrit la taille de l'image et d'autres attributs. Le navigateur examine chaque élément enfant <source> et charge l'image la plus appropriée. Si aucune correspondance n'est trouvée, le navigateur affiche l'image spécifiée par la balise <img>.

L'élément <picture> permet de spécifier plusieurs images pour mieux s'adapter à différentes tailles de fenêtre de visualisation, évitant ainsi de devoir redimensionner une seule image. Il peut être utilisé aux fins suivantes :

pour recadrer et modifier les images selon différentes conditions média,
pour proposer des formats d'image alternatifs lorsque certains formats ne sont pas pris en charge.

Remarque : Les object-position et object-fit s'appliquent à l'élément de repli <img> pour contrôler sa taille et son alignement dans le conteneur.

La balise <picture> est nouvelle dans HTML5.

Syntaxe

La balise <picture> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<picture>) et de fermeture (</picture>).

Balise HTML <picture>

html

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Exemple de la balise HTML `<picture>` :

Balise HTML <picture>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://www.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Try it Yourself »

Le navigateur évalue les éléments <source> dans l'ordre et charge le premier dont la requête media correspond à la fenêtre de visualisation actuelle. Si aucun <source> ne correspond, il revient à l'élément <img>. L'élément <picture> est largement pris en charge par tous les navigateurs modernes.

Attributs

Ces attributs s'appliquent aux éléments <source> à l'intérieur de <picture> :

Attribut	Valeur	Description
media	media_query	Spécifie une requête média pour correspondre à la taille de la fenêtre de visualisation.
srcset	URL	Spécifie l'URL de l'image à utiliser dans différentes situations.
sizes	longueur	Spécifie la largeur de l'image pour différentes tailles de fenêtre de visualisation.
type	MIME_type	Spécifie le type MIME de la ressource liée (par ex. `image/webp`).
src	URL	Spécifie l'URL de l'image. Utilisé comme alternative à `srcset`.

Chaque élément <source> doit inclure soit l'attribut srcset, soit l'attribut src. L'élément de repli <img> utilise l'attribut src.

La balise <picture> prend en charge les Attributs globaux.

Pratique

Quelle est la fonction de la balise HTML <picture> ?

Elle est utilisée pour intégrer du contenu audio dans les documents.Elle définit un conteneur pour plusieurs éléments <source> et un élément <img> afin de proposer l'image la mieux adaptée aux différents appareils ou tailles d'écran.Elle ne fonctionne que pour les graphiques vectoriels.Elle crée automatiquement un lien hypertexte.Elle dispose d'une option de repli intégrée : si aucune balise source ne correspond, la balise <img> à l'intérieur de la balise <picture> sera utilisée.

Balise HTML <picture> ​

Syntaxe ​

Exemple de la balise HTML <picture> : ​

Attributs ​

Pratique ​

Balise HTML `<picture>`

Syntaxe

Exemple de la balise HTML `<picture>` :

Attributs

Pratique