English

<picture>

Servir la bonne image selon l'écran : responsive, formats, art direction

— 2 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • media
  • performance

<picture> + <source> — Images adaptatives

La balise <picture> est un conteneur qui propose plusieurs versions d'une image via <source>. Le navigateur choisit la meilleure option selon le format supporte, la taille d'écran ou la densite de pixels. Le <img> final sert de fallback.

Quand l'utiliser

Tu veux servir du WebP ou AVIF aux navigateurs compatibles et du JPEG aux autres. Tu veux recadrer une image differemment sur mobile (art direction). Tu veux optimiser le poids des images avec sizes et srcset.

Ce que tu gagnes

Accessibilité : le alt reste sur le <img> de fallback. Le mécanisme est transparent pour les technologies d'assistance. Elles voient une seule image.

SEO : des images plus légères améliorent le Largest Contentful Paint. Les Core Web Vitals sont un signal de classement documenté par Google (documentation).

Exemple de code

<picture>
  <!-- Art direction: cropped version for small screens -->
  <source
    media="(max-width: 40rem)"
    srcset="/photos/hero-crop.avif"
    type="image/avif"
  />
  <!-- Modern format for wide screens -->
  <source srcset="/photos/hero.avif" type="image/avif" />
  <source srcset="/photos/hero.webp" type="image/webp" />
  <!-- Fallback -->
  <img
    src="/photos/hero.jpg"
    alt="Sunset over the rice terraces of Banaue"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

Pour aller plus loin