Comment optimiser vos images pour améliorer votre SEO technique ?

Pourquoi Google insiste-t-il sur l'optimisation des images ?

Les images représentent en moyenne 50 à 70% du poids total d'une page web. Leur impact sur les Core Web Vitals — notamment le LCP (Largest Contentful Paint) — est direct et mesurable.

Martin Splitt rappelle ici les fondamentaux : format de fichier, compression et dimensionnement adaptatif. Rien de révolutionnaire, mais c'est précisément là que la majorité des sites échouent encore.

Qu'est-ce que le lazy loading et comment fonctionne-t-il ?

L'attribut HTML loading='lazy' indique au navigateur de différer le chargement des images situées en dehors du viewport initial. Le navigateur ne télécharge ces images que lorsque l'utilisateur scroll vers elles.

Concrètement ? Une page avec 50 images ne charge immédiatement que les 3 ou 4 visibles à l'écran. Le reste attend. Résultat : temps de chargement initial réduit, moins de données transférées au premier affichage, meilleur score aux Core Web Vitals.

Quels sont les formats de fichiers recommandés par Google ?

Google ne cite pas explicitement WebP ou AVIF dans cette déclaration, mais ces formats modernes offrent des taux de compression supérieurs à JPEG et PNG — jusqu'à 30% de gain sans perte de qualité perceptible.

Le choix du format dépend du type d'image : WebP pour les photos, SVG pour les logos et icônes, PNG uniquement si la transparence est indispensable et que WebP n'est pas supporté (cas de plus en plus rare).

• Format adapté : privilégier WebP/AVIF pour les photos, SVG pour les éléments vectoriels
• Compression intelligente : trouver l'équilibre entre poids et qualité visuelle — un JPEG à 80% de qualité est souvent indiscernable de 100%
• Responsive : servir des tailles d'images différentes selon l'appareil (srcset, sizes)
• Lazy loading : appliquer loading='lazy' à toutes les images hors viewport initial
• Dimension explicite : toujours spécifier width et height pour éviter le CLS (Cumulative Layout Shift)

Cette recommandation est-elle cohérente avec les observations terrain ?

Totalement. Les audits PageSpeed Insights et Lighthouse pointent systématiquement les images comme premier levier d'optimisation. Sur des sites e-commerce avec des centaines de visuels produits, l'impact sur le LCP peut atteindre 40 à 60% d'amélioration.

Le lazy loading natif (loading='lazy') bénéficie maintenant d'un support navigateur quasi-universel (95%+ selon Can I Use). Plus besoin de bibliothèques JavaScript tierces qui ajoutaient elles-mêmes du poids et de la complexité.

Quelles nuances faut-il apporter à cette déclaration ?

Premier point : ne jamais appliquer loading='lazy' aux images du viewport initial — hero image, logo, premier visuel produit. Ça retarde leur affichage et dégrade le LCP. Google ne le précise pas ici, mais c'est une erreur classique observée sur 30% des sites auditÉs.

Deuxième nuance : la compression n'est pas qu'une histoire de chiffres. Un JPEG compressé à 50% peut être parfait pour une photo d'ambiance en arrière-plan, catastrophique pour un visuel produit avec texte intégré. Le contexte dicte le seuil acceptable.

Troisième point — et Google reste étrangement silencieux là-dessus : les CDN avec optimisation automatique (Cloudflare, Imgix, Cloudinary) font ce travail à la volée. Si vous gérez un site avec 10 000+ images, l'optimisation manuelle n'est pas tenable. [A vérifier] : Google préfère-t-il une optimisation côté serveur/CDN ou côté code source ?

Dans quels cas cette règle ne s'applique-t-elle pas ?

Sur des pages ultra-courtes (landing pages one-page), le lazy loading peut être contre-productif. Si toutes vos images sont visibles sans scroll, différer leur chargement n'apporte rien — au contraire, ça ajoute une logique de détection inutile.

Pour les images critiques au-dessus de la ligne de flottaison, oubliez le lazy loading. Chargez-les en priorité, idéalement via un preload : <link rel="preload" as="image" href="hero.webp">.

Que faut-il faire concrètement sur votre site ?

Commencez par un audit des images existantes. Identifiez celles qui pèsent plus de 100 Ko, celles servies au mauvais format (PNG pour des photos), celles sans dimensions explicites. PageSpeed Insights vous donne une liste prête à l'emploi.

Ensuite, automatisez. Si vous êtes sous WordPress, des plugins comme ShortPixel ou Imagify convertissent et compressent à la volée. Si vous développez from scratch, intégrez un service d'optimisation d'images dans votre pipeline de build (imagemin, sharp).

Quelles erreurs éviter absolument ?

Ne compressez pas plusieurs fois la même image — chaque passage dégrade la qualité. Gardez toujours une version source en haute résolution et générez les variantes à partir de celle-ci.

N'utilisez pas d'images démesurées redimensionnées en CSS. Une photo 3000x2000px affichée en 300x200px gaspille de la bande passante. Servez des tailles adaptées via srcset et sizes.

Évitez les solutions JavaScript complexes pour le lazy loading si le natif suffit. Moins de dépendances = moins de points de défaillance.

Comment vérifier que vos optimisations fonctionnent ?

• Lancez PageSpeed Insights sur vos pages principales — la section "Opportunités" doit être vide ou quasi-vide côté images
• Vérifiez que le LCP ne pointe pas sur une image lazy-loadée (utilisez l'onglet Performance de Chrome DevTools)
• Contrôlez que les images above-the-fold n'ont PAS l'attribut loading='lazy'
• Testez sur mobile et desktop : le bon format est-il servi ? La bonne taille ?
• Mesurez le poids total des images transférées au premier chargement (onglet Network filtré sur "Img") — idéalement sous 500 Ko pour une page standard