Compresser une image pour un site web rapide et bien référencé
Sur le web, la vitesse n'est pas un détail : c'est un facteur de référencement officiel de Google et un élément déterminant du taux de rebond. Or les images pèsent en moyenne pour la moitié du poids d'une page. Les optimiser est donc le levier le plus rentable pour accélérer un site. Ce guide détaille la marche à suivre, du choix du format au réglage de la qualité.
Pourquoi le poids des images est décisif
Chaque image téléchargée par le navigateur retarde l'affichage de la page. Sur mobile, où la connexion est souvent plus lente, l'effet est amplifié. Google mesure cette expérience à travers les Core Web Vitals, notamment le LCP (Largest Contentful Paint), qui correspond souvent au chargement de l'image principale.
Une page qui met plus de trois secondes à s'afficher perd une part importante de ses visiteurs avant même d'être vue. Réduire le poids des images, c'est donc à la fois mieux se classer et garder ses visiteurs.
Redimensionner à la taille réellement affichée
L'erreur la plus courante est de publier une image bien plus grande que sa taille d'affichage. Une photo de 4000 pixels de large insérée dans une colonne de 800 pixels gaspille les trois quarts des données téléchargées.
Repérez la largeur maximale à laquelle l'image apparaît sur votre site et redimensionnez-la à cette valeur (en prévoyant éventuellement le double pour les écrans haute densité). C'est souvent le geste qui divise le poids par quatre ou plus.
Choisir le bon format : WebP en priorité
Pour le web moderne, le WebP est le meilleur choix par défaut : à qualité égale, il est environ 30 % plus léger que le JPEG, gère la transparence comme le PNG, et il est supporté par tous les navigateurs récents.
Réservez le PNG aux logos, icônes et captures d'écran avec du texte, et le JPEG comme solution de repli universelle pour les photos si vous avez besoin d'une compatibilité maximale.
Régler la qualité au bon niveau
Pour une image destinée à l'écran, une qualité de 75 à 80 offre le meilleur compromis : le poids chute fortement alors que la différence reste invisible. Inutile de viser 100, qui alourdit énormément le fichier pour un gain imperceptible.
Vérifiez toujours le résultat sur les zones sensibles (ciels, dégradés, contours nets) et remontez légèrement la qualité seulement si des artefacts apparaissent.
Bonnes pratiques complémentaires
Au-delà de la compression, quelques réflexes améliorent encore les performances :
- Renseignez les attributs largeur et hauteur des images pour éviter les sauts de mise en page (bon pour le CLS).
- Activez le chargement différé (lazy loading) des images situées plus bas dans la page.
- Nommez vos fichiers avec des mots-clés descriptifs et remplissez l'attribut alt : c'est utile au référencement et à l'accessibilité.
- Servez des images adaptées à chaque écran grâce à l'attribut srcset lorsque votre outil de publication le permet.