Balise HTML <picture>

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

L'élément <source> contient des versions d'une image adaptées à différents scénarios d'affichage. L'élément <img> décrit la taille de l'image et ses autres attributs. Le navigateur évalue chacun des éléments <source> enfants 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 viewport, évitant ainsi la nécessité de redimensionner une seule image. Il peut être utilisé dans les cas suivants :

pour recadrer et modifier des 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 propriétés object-position et object-fit s'appliquent à l'élément de repli <img> pour contrôler son dimensionnement et son alignement dans le conteneur.

La balise <picture> est nouvelle dans HTML5.

Syntaxe

La balise <picture> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<picture>) et fermante (</picture>).

Balise HTML <picture>

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

Exemple de la balise HTML `<picture>` :

Balise HTML <picture>

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

Essayez vous-même »

Le navigateur évalue les éléments <source> dans l'ordre et charge le premier dont la requête media correspond au viewport actuel. Si aucun <source> ne correspond, il se rabat sur l'élément <img>. L'élément <picture> est largement pris en charge par tous les navigateurs modernes.

L'attribut alt sur l'élément de repli <img> est obligatoire : quelle que soit l'image finalement affichée par le navigateur, c'est ce texte alt unique qui est utilisé. Rédigez toujours une description du contenu réel de l'image, et non un espace réservé comme alt="img".

Les deux rôles de <picture>

<picture> résout deux problèmes distincts, et vous choisissez la technique selon l'attribut que vous placez sur les éléments <source> :

Direction artistique — afficher un recadrage ou une composition différente selon le viewport. Un panorama en paysage sur ordinateur de bureau, un recadrage portrait serré sur mobile. Utilisez l'attribut media (une requête média CSS) pour sélectionner la bonne image.
Négociation de format — servir la même image dans un format plus moderne et plus léger lorsque le navigateur le prend en charge (AVIF ou WebP), avec un repli vers JPEG/PNG partout ailleurs. Utilisez l'attribut type (un type MIME) pour que le navigateur ignore les formats qu'il ne peut pas décoder.

Le navigateur parcourt la liste des <source> de haut en bas et utilise le premier qui correspond (sa requête media, le cas échéant) et est pris en charge (son type, le cas échéant). L'ordre est important : placez votre option préférée en premier.

Changement de format (AVIF, puis WebP, puis JPEG)

C'est l'utilisation la plus courante de <picture> en pratique. Les navigateurs modernes qui comprennent l'AVIF téléchargent le fichier le plus léger ; les plus anciens se rabattent sur WebP, et tout le reste obtient le JPEG universellement pris en charge. Le navigateur charge exactement une seule image.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Les éléments <source> ne portant qu'un attribut type, tous les navigateurs se voient proposer les trois options — ils choisissent simplement le premier format qu'ils peuvent décoder. Aucune requête média n'est impliquée ici ; il s'agit uniquement du format de fichier.

Direction artistique (recadrages différents avec `media`)

L'objectif ici est de changer quelle image est affichée, pas seulement son format. Sur les écrans de 800px et plus, le navigateur reçoit un recadrage en bannière large ; les écrans plus étroits reçoivent un recadrage carré qui garde le sujet lisible sur un téléphone.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Utilisez media lorsque le contenu de l'image doit différer selon les points de rupture.

Changement de résolution avec `srcset` et `sizes`

Si vous avez seulement besoin de la même image à différentes tailles en pixels — sans recadrage ni changement de format — vous n'avez généralement pas besoin de <picture> du tout. Un simple <img> avec srcset et sizes permet au navigateur de choisir la meilleure résolution pour l'écran, le viewport et la densité de pixels de l'appareil :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

Comment lire ceci :

srcset liste les images candidates, chacune étiquetée avec un descripteur de largeur (400w signifie que le fichier fait 400px de large). Le navigateur connaît la largeur réelle de chaque fichier sans le télécharger.
sizes indique au navigateur la largeur d'affichage de l'image. Ici on lit : « en dessous d'un viewport de 600px, l'image occupe toute la largeur (100vw) ; sinon elle occupe la moitié (50vw). » Le navigateur combine cela avec le ratio de pixels de l'appareil pour choisir le candidat le plus économique dans srcset.
src reste le repli pour les navigateurs qui ignorent srcset.

srcset avec des descripteurs de largeur fonctionne également à l'intérieur d'un élément <source>, vous permettant de combiner le changement de résolution avec la direction artistique ou le changement de format.

Quand avez-vous réellement besoin de `<picture>` ?

Objectif	Utiliser
Même image, laisser le navigateur choisir la meilleure résolution pour l'écran	`<img srcset>` + `sizes`
Même image dans un format moderne plus léger (AVIF/WebP) avec un repli	`<picture>` + `type`
Un recadrage/composition différent par point de rupture (direction artistique)	`<picture>` + `media`

Règle empirique : optez pour <picture> uniquement lorsque vous devez contrôler quel fichier le navigateur utilise (format ou recadrage). Pour un simple « servir la bonne taille », <img srcset> est plus simple et suffisant.

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 du viewport.
srcset	URL	Spécifie l'URL de l'image à utiliser dans différentes situations.
sizes	length	Spécifie la largeur de l'image pour différentes tailles de viewport.
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 un attribut srcset, soit un attribut src. L'élément de repli <img> utilise l'attribut src.

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

Pratique

Que fait l'élément HTML picture ?

Il intègre du contenu sonore dans un document.Il définit un conteneur pour plusieurs sources candidates et une image de repli, permettant au navigateur de charger l'image la plus adaptée à l'appareil, à la taille d'écran ou au format pris en charge.Il ne fonctionne que pour les graphiques vectoriels comme SVG.Il crée automatiquement un hyperlien autour d'une image.

Syntaxe

Exemple de la balise HTML <picture> :