WebP, AVIF et lazy loading : les formats d'images modernes qui boostent votre SEO

Les images représentent en moyenne 50 à 60 % du poids total d'une page web. Pourtant, la grande majorité des sites continuent de servir des JPEG ou des PNG sans compression optimisée, sans format moderne, et sans stratégie de chargement. C'est l'une des sources d'optimisation les plus rapides et les plus efficaces — et l'une des plus souvent négligées.

Le constat — Le format d'image, ça compte vraiment#

Le poids d'une image affecte directement plusieurs métriques que Google utilise pour son classement. Le Largest Contentful Paint (LCP) — qui mesure le temps d'apparition de l'élément visuel principal — est particulièrement sensible à la taille des images. Une image hero de 1,5 Mo chargée en format PNG peut faire exploser le LCP au-delà des 4 secondes, seuil à partir duquel Google considère l'expérience utilisateur comme mauvaise.

Voici ce qu'on observe régulièrement lors d'audits de sites existants :

• Des images de 2 à 5 Mo servies en JPEG non compressé pour des visuels qui s'affichent à 800px de large
• Des images redimensionnées en CSS (l'image originale en 3000px est servie, mais affichée en 400px)
• Aucun attribut loading="lazy" sur les images hors écran
• Des formats PNG utilisés pour des photos (PNG est optimal pour les graphiques et les images avec transparence, pas pour les photos)

Chacun de ces problèmes seul peut dégrader significativement votre score Core Web Vitals, et donc votre visibilité dans les résultats Google.

La solution — WebP, AVIF et le chargement intelligent#

WebP : le standard qui aurait dû s'imposer plus tôt

Développé par Google et supporté par tous les navigateurs modernes depuis 2020, le format WebP offre une compression supérieure au JPEG et au PNG pour une qualité visuelle équivalente ou meilleure.

Gains réels mesurés en production :

• JPEG → WebP : réduction de 25 à 35 % du poids à qualité visuelle équivalente
• PNG → WebP : réduction de 25 à 80 % selon le contenu (plus efficace sur les images avec aplats et transparence)

AVIF : le nouveau champion de la compression

L'AVIF (AV1 Image File Format) est le successeur naturel du WebP. Supporté par tous les navigateurs majeurs depuis 2023, il pousse la compression encore plus loin.

Gains mesurés :

• JPEG → AVIF : réduction de 40 à 60 % du poids
• WebP → AVIF : réduction de 20 à 35 % supplémentaires

En pratique, une photo de produit qui pèse 800 Ko en JPEG peut descendre à 180 Ko en AVIF sans perte de qualité visible à l'œil nu. Sur une page qui affiche 10 produits, c'est 6 Mo de données économisées à chaque chargement.

Lazy loading : ne charger que ce qui est visible

Le lazy loading est une technique qui diffère le chargement des images situées en dehors de la zone visible de l'écran (above the fold). Le navigateur ne charge que les images visibles au moment du chargement initial, puis charge les suivantes au fur et à mesure que l'utilisateur fait défiler la page.

L'impact sur le LCP est immédiat : les ressources réseau sont concentrées sur ce que l'utilisateur voit en premier.

Images responsives : la bonne taille au bon endroit

Servir une image de 2000px à un mobile qui l'affiche en 400px, c'est charger 25 fois plus de données que nécessaire. Les images responsives utilisent l'attribut srcset pour indiquer au navigateur plusieurs versions de la même image à différentes résolutions, lui permettant de choisir la plus adaptée à l'écran de l'utilisateur.

Combinés, ces techniques peuvent réduire le poids total d'une page de 40 à 70 %, avec un impact direct sur le LCP, le score Lighthouse et le positionnement Google.

Notre approche chez Webomax#

Chez Webomax, tous nos projets Next.js utilisent le composant <Image> natif du framework. Ce composant fait beaucoup de travail en coulisses :

• Conversion automatique en WebP ou AVIF selon le navigateur du visiteur (le navigateur envoie ses capacités dans l'en-tête Accept, Next.js sert le format le plus efficace compatible)
• Redimensionnement à la demande : Next.js génère automatiquement les versions de l'image aux dimensions réellement utilisées dans l'interface, sans surcharger le build
• Lazy loading par défaut sur toutes les images sous le fold — l'attribut loading="lazy" est ajouté automatiquement
• Placeholder flou pendant le chargement (blur-up) pour éviter le layout shift (CLS) et améliorer la perception de vitesse
• Priorité explicite pour l'image hero ou le LCP : on ajoute priority sur l'image principale pour qu'elle soit préchargée immédiatement

Pour les projets avec beaucoup d'images (portfolio, e-commerce, galeries), on configure également un CDN d'images (Cloudflare Images ou Vercel Image Optimization) qui stocke et sert les variantes directement depuis le point de présence le plus proche de l'utilisateur.

Cette configuration nous permet d'atteindre systématiquement un score de 90+ sur le diagnostic "Efficiently encode images" de Lighthouse. Si vous souhaitez comprendre notre processus complet d'optimisation, notre article sur comment atteindre 100/100 Lighthouse détaille chaque étape.

Ce qu'il faut retenir#

Optimiser les images de votre site n'est pas un luxe technique — c'est l'une des actions à meilleur ROI qu'on puisse réaliser pour améliorer la performance et le SEO.

Les points essentiels :

• Utilisez WebP ou AVIF à la place du JPEG et du PNG pour toutes vos images
• Servez la bonne taille : ne jamais afficher une image en 400px en ayant chargé du 2000px
• Activez le lazy loading sur toutes les images hors du viewport initial
• Priorisez l'image principale (hero, bannière, LCP) pour qu'elle se charge en premier
• Mesurez régulièrement avec PageSpeed Insights ou Lighthouse pour détecter les régressions

Si votre site tourne sur WordPress, Webflow ou un CMS standard, ces optimisations nécessitent souvent des plugins ou des configurations supplémentaires et restent partielles. Avec Next.js, elles sont intégrées par défaut. C'est l'une des raisons concrètes pour lesquelles nous recommandons ce framework pour les projets où la performance et le SEO sont des enjeux réels. Vous pouvez en apprendre plus sur notre approche de création de sites web.