Images responsives

Un seul fichier image ne peut pas être optimal pour tous les appareils. Une photo haute résolution parfaite pour un écran d'ordinateur gaspille de la bande passante sur un téléphone, tandis qu'une petite image paraît floue sur un écran retina.

Les images responsives résolvent ce problème en permettant au navigateur de choisir la meilleure source d'image en fonction de la largeur de la fenêtre, de la densité de pixels et des formats supportés par l'appareil.

L'attribut srcset sur <img> fournit un ensemble de sources d'images avec leurs largeurs intrinsèques :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
  alt="A landscape photo"
>

• srcset liste les images disponibles avec leurs descripteurs de largeur (400w, 800w, etc.).
• sizes indique au navigateur quelle sera la largeur d'affichage de l'image à chaque point de rupture.
• src est le fallback pour les navigateurs qui ne supportent pas srcset.

Le navigateur combine sizes avec le ratio de pixels de l'appareil pour choisir le meilleur fichier. Tu ne sais jamais exactement quelle image sera chargée — et c'est justement le but. Le navigateur optimise en fonction du contexte de l'utilisateur.

Pour la direction artistique (recadrage ou changement complet de l'image à différents points de rupture) ou le changement de format, utilise l'élément <picture> :

<picture>
  <source media="(max-width: 600px)" srcset="photo-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="photo-tablet.jpg">
  <img src="photo-desktop.jpg" alt="A landscape photo">
</picture>

Changement de format

Sers des formats modernes aux navigateurs qui les supportent :

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="A landscape photo">
</picture>

Le navigateur choisit la première <source> qu'il supporte. Le <img> est requis comme fallback et c'est là que se trouve le texte alt.

Le HTML moderne fournit des attributs pour améliorer les performances de chargement des images :

• loading="lazy" — Diffère le chargement jusqu'à ce que l'image soit proche de la fenêtre visible. N'utilise pas ceci sur les images visibles au chargement initial (above the fold).
• decoding="async" — Suggère au navigateur de décoder l'image hors du thread principal.
• width et height — Inclus toujours ces attributs pour éviter le Cumulative Layout Shift (CLS). Le navigateur réserve l'espace correct avant que l'image ne charge.
• fetchpriority="high" — Indique que cette image est critique (par exemple, images hero). À utiliser avec parcimonie.