Depuis que Google a généralisé le Mobile-First Indexing, les images non optimisées pour mobile sont l'un des facteurs de pénalité les plus importants. Les images responsives — avec srcset, sizes et l'élément picture — n'améliorent pas seulement l'UX ; elles impactent directement les Core Web Vitals et le classement.
Selon les données HTTP Archive 2026, 78 % du trafic web provient des appareils mobiles. Les images représentent en moyenne 58 % du poids total des pages. Des images responsives correctement implémentées peuvent réduire la charge mobile de 40 à 65 %.
L'attribut srcset — Plusieurs Versions d'Image
- ▸Descripteur width : `srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"`
- ▸Descripteur densité : `srcset="image.jpg 1x, image@2x.jpg 2x"` — idéal pour logos/icônes
- ▸Sélection intelligente : le navigateur choisit l'image optimale selon sizes et DPR réel
- ▸Sans srcset : le navigateur télécharge toujours le plus grand fichier — gaspillage mobile
L'attribut sizes — Indiquer la Largeur d'Affichage
sizes indique au navigateur la largeur d'affichage de l'image avant que le CSS soit chargé. C'est l'information décisive pour choisir la bonne image.
- ▸Syntaxe : `sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"`
- ▸Lu de gauche à droite : utilise la première condition correspondant au viewport actuel
- ▸sizes absent : le navigateur suppose 100vw et télécharge toujours la plus grande image
- ▸sizes incorrect : sélection inadaptée — gaspillage ou rendu flou
L'élément <picture> — Formats selon le Navigateur
- ▸`<source type="image/avif">` — AVIF : 20–30 % plus léger que WebP, Chrome/Firefox récents
- ▸`<source type="image/webp">` — WebP : support 95 %+ des navigateurs en 2026
- ▸`<img src="img.jpg" alt="...">` — fallback JPEG/PNG pour anciens navigateurs
- ▸Combinez avec srcset dans chaque source : responsive + format moderne simultanément
Dans Next.js et Nuxt, le composant Image intégré génère automatiquement srcset, convertit en WebP, ajoute le lazy loading et des placeholders. Aucun srcset manuel requis.