Optimisation des images

Les images sont la première source de poids des pages. Bien choisies, elles améliorent le LCP sans dégrader le CLS.

Mis à jour le 26 octobre 2026

Choisir le format

AVIF : meilleure compression, bien pris en charge (Can I use).
WebP : très largement pris en charge.
JPEG en repli pour les photos, PNG pour les aplats avec transparence, SVG pour logos et icônes (minifiez avec SVGOMG).

Compresser

Avec perte (Squoosh, cwebp, avifenc) ou sans perte quand la fidélité prime.

Servir la bonne taille

<picture>
  <source type="image/avif" srcset="img-480.avif 480w, img-960.avif 960w" sizes="(min-width: 48rem) 48rem, 100vw">
  <source type="image/webp" srcset="img-480.webp 480w, img-960.webp 960w" sizes="(min-width: 48rem) 48rem, 100vw">
  <img src="img-960.jpg" width="960" height="540" loading="lazy" decoding="async" alt="Description">
</picture>

Documentation : images adaptatives - MDN. Un CDN d'images (Cloudinary, Imgix, Sirv…) redimensionne et convertit à la volée.

Charger au bon moment

Lazy loading pour les images hors écran, priorité haute pour l'image LCP, cache long pour les fichiers versionnés.