Images responsives : srcset, sizes et picture

Servez la bonne image au bon écran avec srcset et sizes, réservez picture à la direction artistique et maîtrisez le lazy loading.

9 min · 3 questions

Les images représentent en général la moitié du poids d'une page : c'est le premier levier de performance. Le mécanisme central est srcset avec des descripteurs w, qui déclare les largeurs réelles des fichiers disponibles, couplé à sizes, qui annonce la largeur d'affichage prévue. Point clé : le navigateur choisit l'image via son preload scanner, avant même de calculer la mise en page CSS. Sans sizes, il suppose 100vw et télécharge souvent bien trop lourd. Le choix final intègre aussi la densité de l'écran : un écran 2x sur une zone de 400 px ira chercher un fichier d'environ 800 px.

<img src="harbor-800.jpg"
     srcset="harbor-400.jpg 400w,
             harbor-800.jpg 800w,
             harbor-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Vieux port au coucher du soleil"
     width="800" height="533">

Avec srcset/sizes, le navigateur reste décisionnaire : il peut servir une variante plus légère selon la densité ou les préférences d'économie de données. <picture> inverse la logique : c'est vous qui imposez la source via <source media> ou <source type>. Réservez-le à deux cas : la direction artistique (un cadrage différent sur mobile, pas juste une taille) et la négociation de format (AVIF ou WebP avec repli JPEG). Pour un simple redimensionnement, picture est une complexité inutile.

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-square.jpg">
  <source type="image/avif"
          srcset="hero-wide.avif">
  <img src="hero-wide.jpg" alt="Façade du musée"
       width="1200" height="600">
</picture>

Pour tout le reste de la page, loading="lazy" diffère le téléchargement jusqu'à l'approche du viewport, nativement et sans JavaScript. Complétez avec decoding="async" pour que le décodage ne bloque pas le rendu, et surtout avec width et height : le navigateur en déduit le ratio et réserve l'espace, ce qui élimine les décalages de mise en page (CLS). Pour l'image critique, faites l'inverse du lazy : fetchpriority="high".

<img src="gallery-01.jpg"
     alt="Salle des expositions"
     loading="lazy" decoding="async"
     width="800" height="600">

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. À quoi sert précisément l'attribut sizes ?
   • À redimensionner l'image côté CSS
   • À annoncer la largeur d'affichage prévue pour que le navigateur choisisse dans srcset
   • À limiter le poids maximal du fichier téléchargé
2. Dans quel cas <picture> s'impose-t-il face à un simple srcset ?
   • Pour servir la même image en plusieurs largeurs
   • Pour un cadrage différent selon l'écran ou un format moderne avec repli
   • Pour activer le lazy loading natif
3. Quel est l'effet de loading="lazy" sur votre image hero visible au chargement ?
   • Aucun, l'attribut est ignoré au-dessus de la ligne de flottaison
   • Il retarde son chargement et dégrade le LCP
   • Il améliore le LCP en priorisant l'image