Picture/Source

Definition

L'élément <picture> avec <source> permet de servir différentes images selon le format supporté, la taille d'écran ou la densité de pixels. Le navigateur choisit la meilleure option automatiquement.

Analogie

Comme un restaurant qui adapte la taille des portions selon l'appétit du client.

Exemple de code

<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="lg.jpg">
  <img src="fallback.jpg" alt="Description">
</picture>

Cas d'usage

Servir des images modernes (AVIF, WebP) avec fallback et adapter la résolution au viewport.

Anti-pattern

Termes lies