Introduction
Vous avez converti toutes les images de votre site en WebP, fier de votre coup, et pourtant PageSpeed Insights reste médiocre et les pages mobiles traînent. Le WebP seul ne suffit pas : si vos images font 3 Mo chacune ou si elles sont surdimensionnées par rapport à leur taille d'affichage, le format le plus moderne du monde ne sauvera pas la perf. Optimiser les images WebP, c'est aller plus loin que la conversion : c'est redimensionner, compresser, servir les bonnes dimensions selon le terminal, et nettoyer les métadonnées inutiles. Dans ce guide, on détaille comment optimiser les images WebP pour gratter les points PageSpeed qui comptent vraiment, avec un flux applicable à tout un site d'un coup.
Pourquoi ça arrive
Le WebP réduit la taille par rapport au JPG, mais il ne corrige pas les autres problèmes d'image. Les trois pièges classiques : images surdimensionnées, compression trop douce, métadonnées laissées. Une image affichée à 800 pixels mais servie en 4000 pixels gaspille 90 pour cent de ses données pour rien, le navigateur la rétrécit à l'écran. Une compression WebP en qualité 95 produit des fichiers deux à trois fois plus lourds qu'en qualité 80, sans différence visuelle. Les métadonnées EXIF, IPTC et XMP ajoutent parfois plusieurs centaines de kilo-octets par image sans servir à l'affichage. À cela s'ajoutent le lazy loading absent, l'absence de srcset pour servir différentes tailles selon le terminal, et le cache navigateur mal configuré. Résultat : même en WebP, les images plombent le Largest Contentful Paint et font baisser le score Core Web Vitals. Google pénalise les sites lents dans son classement, donc l'optimisation image n'est pas qu'une question de confort, c'est aussi du SEO.
3 solutions
Solution 1 : compresser par lot et redimensionner. Passez toutes vos images WebP dans un outil de compression par lot, redimensionnez à la taille d'affichage réelle, et réglez la qualité sur 75-80. Vous gagnez facilement 50 à 70 pour cent de poids sans dégradation visible.
Solution 2 : servir du responsive avec srcset. Générez plusieurs tailles d'image et servez-les via l'attribut srcset pour que le navigateur charge la bonne selon le terminal. Sur mobile, l'image fait 400 pixels au lieu de 1600, divisez le poids par quatre.
Solution 3 : activer le lazy loading et le cache. Ajoutez loading="lazy" sur les images hors écran, et configurez le cache navigateur pour les fichiers image. Deux réglages qui grattent des points PageSpeed gratuitement.
Guide étape par étape
Pour optimiser un site entier, commencez par la compression par lot. Réunissez toutes vos images WebP dans un dossier. Ouvrez le compresseur par lot dans le navigateur. Glissez l'ensemble sur la page. Réglez la qualité sur 75 pour un bon équilibre, et si l'outil propose le redimensionnement, fixez le plus grand côté à 1600 pixels pour les images pleine largeur, 800 pour les vignettes. Cliquez sur Compresser et téléchargez le zip. Remplacez les images du site par les versions optimisées. Ensuite, ajoutez le responsive : pour chaque image, générez une version 400, 800, 1200 et 1600 pixels, et servez-les via srcset. Enfin, ajoutez loading="lazy" sur toutes les images hors écran, et configurez le cache navigateur pour une durée d'un an sur les fichiers image. Testez avec PageSpeed Insights avant et après pour mesurer le gain. Un site moyen passe souvent de 50 à 85 sur mobile après cette passe.
Avantages et inconvénients
Compresser par lot et redimensionner est le gain le plus gros pour le moins d'effort : on récupère 50 à 70 pour cent de poids d'un coup. La contrepartie, c'est qu'il faut relancer le lot à chaque nouvelle image. Le responsive srcset multiplie les gains sur mobile mais demande de générer plusieurs tailles par image, ce qui ajoute de la complexité au flux. Le lazy loading et le cache sont gratuits et rapides à mettre en place mais ne règlent pas le problème de poids. Pour la plupart des sites, la combo compression + redimensionnement + lazy loading + cache couvre 80 pour cent des gains. Gardez un convertisseur webp en favori pour traiter les nouvelles images dès leur upload. Pour les sites sous WordPress, un plugin comme ShortPixel ou Imagify automatise la compression, le redimensionnement et le srcset à chaque upload, ce qui retire la charge manuelle. Pour les sites custom, intégrez la compression à votre flux de build via un outil comme Sharp ou Squoosh. Le principal, c'est de mesurer avant et après avec PageSpeed Insights pour confirmer le gain et identifier les images qui restent à optimiser. Un suivi régulier garde le score haut dans le temps, car les images ont tendance à s'accumuler et à regrailler le score si on ne fait pas attention.