Optimisation d’images
L’optimisation d’images consiste à réduire le poids des fichiers visuels sans perte de qualité visible pour accélérer le chargement des pages.
En cliquant, vous acceptez les cookies de YouTube.
Définition
L’optimisation d’images regroupe l’ensemble des techniques visant à améliorer les performances web (Core Web Vitals) en utilisant des formats modernes (WebP, AVIF), un redimensionnement adapté aux écrans et une compression efficace. Elle inclut également l’affichage responsive via les attributs srcset et sizes.
Bonnes pratiques
- Implémenter progressivement : Convertir d’abord les images les plus lourdes (Hero header, bannières) vers des formats comme WebP.
- Utiliser le Responsive Images : Configurer les attributs
srcsetpour servir la bonne taille d’image selon l’appareil (mobile vs desktop). - Mesurer avec Lighthouse : Surveiller les indicateurs de "Poids total des ressources" et les recommandations sur les formats d’image de nouvelle génération.
- Automatiser le monitoring : Utiliser des outils ou plugins (comme Imagify ou ShortPixel sur WordPress) pour compresser les médias dès leur téléversement.
À éviter
- Chargements bloquants : Ne pas charger d’images massives en haut de page sans utiliser le Lazy-loading pour les images situées sous la ligne de flottaison.
- Assets non optimisés : Utiliser des fichiers PNG ou JPEG originaux (souvent trop lourds) au lieu de versions compressées.
- Modifications non mesurées : Redimensionner les images via le CSS sans changer la source réelle du fichier (le navigateur télécharge toujours le fichier lourd).
