Comment optimiser les images pour les sites web
Les images représentent généralement la majeure partie du poids d'une page. Cinq décisions règlent la plupart des problèmes.
Mis à jour le 1 septembre 2026
Les images sont le principal contributeur au poids des pages sur la plupart des sites, et l'élément Largest Contentful Paint est une image sur la majorité des pages. Les optimiser est le travail de performance le plus efficace disponible, et la plupart d'entre eux sont des décisions plutôt que des outils.
Voici l'ordre qui compte, du plus grand effet au plus petit.
Étapes
- 1
1. Servir les bonnes dimensions
Mesurez la plus grande largeur CSS que l'image occupe et exportez à environ deux fois cette taille pour les écrans haute densité. Une image héroïque de 1200 pixels CSS nécessite une source de 2400px, pas un original de 6000px de l'appareil photo. Cette seule étape surpasse généralement tout le reste combiné.
- 2
2. Utilisez WebP, avec AVIF là où vous le pouvez
WebP est 25 à 35 % plus petit que JPEG à qualité égale et est pris en charge partout. AVIF va encore plus loin mais encode plus lentement. Gardez un fallback JPEG si vous devez prendre en charge de très anciens clients.
- 3
3. Définissez la qualité par contenu, pas par habitude
75–85 pour les photographies. Plus élevé pour les graphiques avec des bords nets, où les artefacts de compression sont plus visibles. Vérifiez le résultat à la taille d'affichage réelle.
- 4
4. Toujours définir la largeur et la hauteur
Les dimensions explicites permettent au navigateur de réserver de l'espace avant le chargement de l'image, ce qui évite le décalage de mise en page. C'est une solution Cumulative Layout Shift qui ne coûte rien.
- 5
5. Chargement paresseux en dessous du pli, jamais au-dessus
Ajoutez loading="lazy" aux images plus bas sur la page. Ne chargez pas en différé votre image LCP, cela retarde précisément ce qui est mesuré.
Supprimer les métadonnées à l'exportation
Les profils de couleur EXIF et intégrés ajoutent du poids sans aucun avantage de rendu sur le web.
Utilisez le format SVG pour les logos et les icônes
Un logo vectoriel fait généralement quelques kilo-octets et reste net à chaque taille et densité.