Les images responsives permettent au navigateur de choisir la meilleure image pour l'appareil — économisant la bande passante sur les téléphones et servant des images nettes sur les écrans haute résolution.
srcset liste les images candidates avec leurs largeurs intrinsèques (400w = 400px de large).sizes indique au navigateur la largeur d'affichage de l'image à différents points d'arrêt (ici : largeur complète du viewport sous 600px, sinon moitié).sizes + la densité de pixels de l'appareil pour choisir la plus petite image qui paraît nette — avant de télécharger quoi que ce soit.Un téléphone pourrait choisir small.jpg ; un ordinateur portable Retina l'affichant à 50% de largeur pourrait choisir large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Le navigateur utilise la première <source> qu'il supporte/correspond. Utilisez <picture> quand vous avez besoin de formats différents (servir AVIF/WebP avec un fallback JPEG) ou d'un recadrage différent par taille d'écran (direction artistique) — choses que srcset seul ne peut pas faire.
srcset + sizes.<picture>.Servir des images de la bonne taille et aux formats modernes est l'une des plus grandes victoires de performance pour le web — cela réduit drastiquement l'utilisation des données mobiles et améliore Largest Contentful Paint.
Ces outils natifs permettent au navigateur de faire le choix optimal automatiquement, avec des fallbacks gracieux pour les anciens navigateurs.
Une bibliothèque de questions d'entretien IT avec des réponses détaillées — du Junior au Senior.
Faire un don