Pourquoi optimiser ses images ?
Les images non optimisées sont la cause n°1 de sites web lents. Une page qui met plus de 3 secondes à charger perd 53% de ses visiteurs. Voici comment résoudre le problème.
1. Choisir le bon format
En 2026, les formats recommandés sont :
- WebP : le meilleur rapport qualité/poids (-30% vs JPEG)
- AVIF : encore plus léger, mais compatibilité moindre
- SVG : pour les logos, icônes et illustrations vectorielles
- JPEG : en fallback pour les vieux navigateurs
2. Dimensionner correctement
Ne servez pas une image de 4000px de large si elle s'affiche en 800px. Utilisez l'attribut srcset pour servir différentes tailles selon l'écran.
3. Lazy loading
Ajoutez loading="lazy" sur toutes les images qui ne sont pas dans le viewport initial. C'est natif HTML, aucune librairie requise.
4. CDN d'images
Utilisez un service comme Cloudinary, imgix ou le composant Image de Next.js pour optimiser automatiquement vos images à la volée.
Résultat attendu
En appliquant ces 4 techniques, vous pouvez réduire le poids de vos images de 60 à 80% et améliorer significativement vos Core Web Vitals.