Images Responsives : srcset, sizes et Art Direction

Pourquoi les images responsives importent

Différents appareils (mobile, tablette, desktop) ont différentes tailles d'écran et résolutions. Une seule taille d'image n'est pas optimale pour tous les appareils.

Les grandes images gaspillent la bande passante sur mobile. Les petites images paraissent pixellisées sur desktop. Les images responsives servent la bonne taille pour chaque appareil.

Core Web Vitals : Les images responsives améliorent les métriques LCP (Largest Contentful Paint) et CLS (Cumulative Layout Shift).

Attribut srcset

srcset fournit au navigateur des options d'image à différentes résolutions. Le navigateur sélectionne l'image la plus appropriée selon le DPR (Device Pixel Ratio) et la taille du viewport de l'appareil.

Descriptor de largeur : <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. L'unité w spécifie la largeur naturelle de l'image.

Descriptor de densité : <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. L'unité x spécifie la densité de pixels de l'appareil.

Sélection du navigateur : Le navigateur sélectionne l'image la plus appropriée selon la taille du viewport, le DPR et les conditions réseau. Cette sélection est automatique et optimisée.

Attribut sizes

sizes spécifie la taille que l'image occupera dans le viewport. Le navigateur utilise sizes avec srcset pour sélectionner l'image la plus appropriée.

Exemple : <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Conditions media : (max-width: 600px) 100vw → Sur les écrans de moins de 600px, l'image occupe 100% de la largeur du viewport.

Fallback : La dernière valeur (33vw) est la taille par défaut. Cette valeur est utilisée quand aucune condition media ne correspond.

vw (viewport width) : 100vw = largeur du viewport. 50vw = la moitié de la largeur du viewport.

Art Direction

L'art direction sert différentes compositions d'image (crop, zoom) à différentes tailles d'écran. Fait avec l'élément <picture>.

Exemple : <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Cas d'usage : Différents crops pour les images hero. Image verticale sur mobile, horizontale sur desktop. Différentes versions pour les logos et icônes.

Sélection de format : Avec <picture>, différents formats peuvent aussi être servis : <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading et Async Decoding

loading="lazy" : Charge l'image seulement quand elle s'approche du viewport. Augmente la vitesse de chargement de la page et économise la bande passante.

decoding="async" : Sépare le processus de décodage de l'image du thread principal. Ne bloque pas le rendu de la page.

fetchpriority="high" : Haute priorité pour l'image LCP. Le navigateur charge cette image plus tôt.

Placeholder : Montrez un placeholder de basse résolution avec la technique blur-up. Un placeholder flou est affiché pendant le chargement de l'image.

Conseils de Performance

Formats d'image : Utilisez WebP ou AVIF. 25-50% plus petit que JPEG. Servez JPEG/PNG comme fallback.

Compression : Compressez les images. Utilisez TinyPNG, Squoosh ou ImageOptim. Quality 80-85 est généralement suffisant.

Dimensions : Ajoutez les attributs width et height aux images. Empêche le CLS (Cumulative Layout Shift).

CDN : Servez les images depuis un CDN. Les CDN d'images comme Cloudinary, Imgix effectuent le resize et la conversion de format automatiquement.

Test des images responsives : Vérifiez quelle image est chargée dans l'onglet Network de Chrome DevTools. Testez sur différents viewports.