<picture>

Description

L’élément <picture> est un conteneur permettant de proposer plusieurs sources d’image alternatives. Le navigateur choisit la source la plus adaptée selon les conditions définies dans les éléments <source>. L’élément <img> à la fin sert de repli et est toujours affiché — son alt s’applique à toutes les sources.

Syntaxe

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l'image">
</picture>

Exemples

Formats modernes avec repli JPEG :

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Vue panoramique de la montagne" width="1200" height="630" loading="eager">
</picture>

Images différentes selon la taille d’écran (art direction) :

<picture>
  <!-- Image carrée sur mobile -->
  <source media="(max-width: 600px)" srcset="portrait-400.jpg">
  <!-- Image paysage sur desktop -->
  <source media="(min-width: 601px)" srcset="paysage-1200.jpg">
  <img src="paysage-1200.jpg" alt="Équipe en réunion" width="1200" height="600">
</picture>

Notes

<img> est obligatoire : <picture> doit toujours contenir un <img> en dernier enfant. C’est cet <img> qui est rendu — les <source> modifient uniquement l’URL source utilisée.

Deux cas d’usage distincts :

1. Format différent : proposer AVIF/WebP avec repli JPEG — utiliser type sur <source>.
2. Art direction : servir des images visuellement différentes selon le viewport — utiliser media sur <source>.