Comment optimiser les images pour les Core Web Vitals

Ton site charge lentement. Tu lances un test Lighthouse. Le rapport dit que tes images sont le problème.

Ce score rouge "Largest Contentful Paint" ? C'est presque toujours causé par des images non optimisées. Et Google utilise ce score pour classer ton site.

Les Core Web Vitals sont les métriques qui comptent le plus pour Google. Les images affectent la plus importante. Optimise tes images et tes scores grimpent. Voici exactement comment faire.

Que sont les Core Web Vitals et pourquoi les images comptent-elles ?

Les Core Web Vitals sont trois métriques de performance que Google mesure sur chaque page :

• Largest Contentful Paint (LCP) : La vitesse à laquelle le plus grand élément visible se charge. Doit être sous 2,5 secondes.
• Interaction to Next Paint (INP) : La vitesse de réponse de la page quand tu cliques ou tapes. Doit être sous 200 millisecondes.
• Cumulative Layout Shift (CLS) : À quel point la mise en page bouge pendant le chargement. Doit être sous 0,1.

Les images affectent directement deux de ces trois métriques. Une image hero lourde tue ton score LCP. Une image sans dimensions fixes provoque des décalages de mise en page qui dégradent le CLS.

Pourquoi c'est important pour ton business ? Google a confirmé que les Core Web Vitals sont un facteur de classement. Les pages avec de bons scores reçoivent plus de trafic organique. Les pages avec de mauvais scores descendent dans les résultats.

Les données le confirment. Les sites qui ont amélioré leur LCP de plus de 2 secondes ont vu des gains de classement mesurables. Pour les mots-clés concurrentiels, cette différence de vitesse peut faire la différence entre la page un et la page trois.

Les images sont généralement les éléments les plus lourds d'une page. La page web moyenne charge plus d'1 Mo d'images. C'est plus que les scripts, polices et HTML réunis. Optimise les images et tu résous l'essentiel du problème de performance.

Comment améliorer le Largest Contentful Paint avec l'optimisation d'images ?

Le LCP mesure quand le plus grand élément visible finit de s'afficher. Sur la plupart des pages, c'est une image hero, une photo produit ou une bannière.

Si cette image met 4 secondes à charger, ton LCP est de 4 secondes. Google le veut sous 2,5. Voici comment combler l'écart.

Compresse tes images. Une image hero de 2 Mo, c'est trop. Compresse-la à 150-200 Ko et le temps de chargement baisse radicalement. Utilise un réglage de qualité entre 75-85 % pour les photos. La différence visuelle est quasi invisible, mais la taille du fichier baisse de 80-90 %.

Utilise des formats modernes. Les fichiers WebP font 25-35 % de moins que les JPEG à qualité égale. AVIF économise encore plus. Tous les navigateurs modernes supportent WebP. Changer de format est l'une des améliorations LCP les plus faciles.

Redimensionne à la taille d'affichage. Ne sers pas une image de 4000px quand la page l'affiche à 800px. Redimensionne d'abord, compresse ensuite. Rien que ça peut réduire la taille de 70-80 %.

Précharge ton image LCP. Ajoute un indice de préchargement dans ton HTML pour que le navigateur récupère l'image hero immédiatement. Sans ça, le navigateur ne découvre l'image qu'après avoir analysé le CSS. Ce délai ajoute des centaines de millisecondes.

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

Mets fetchpriority="high" sur l'image LCP. Ça dit au navigateur de prioriser cette image par rapport aux autres ressources. Un petit changement qui fait gagner du temps réel sur le LCP.

Ne fais pas de lazy load sur ton image LCP. C'est une erreur courante. Le lazy loading retarde l'image jusqu'à ce qu'elle entre dans la zone visible. Ton image hero est déjà visible au chargement de la page. Lui mettre du lazy loading ajoute un retard inutile et plombe ton score LCP.

Le lazy loading aide-t-il ou nuit-il aux Core Web Vitals ?

Le lazy loading est super pour les images sous la ligne de flottaison. C'est terrible pour celles au-dessus.

Quand tu ajoutes loading="lazy" à une image, le navigateur attend que l'utilisateur scrolle à proximité avant de la télécharger. Ça économise de la bande passante pour les images que l'utilisateur ne verra peut-être jamais. Ça réduit le poids initial de la page et accélère le premier chargement.

Mais si tu fais du lazy load sur l'image hero ou toute image visible au premier écran, tu dis au navigateur d'attendre avant de charger l'élément visuel le plus important de la page. Ça augmente directement le LCP.

La règle est simple. Lazy load pour chaque image sous la ligne de flottaison. Jamais de lazy load pour les images au-dessus. Ton image hero, le logo du header et tout contenu visible sans scroller doivent charger tout de suite.

Pour la plupart des pages, ça veut dire 1-3 images chargées immédiatement. Tout le reste en lazy loading. Cet équilibre te donne le meilleur score LCP tout en économisant la bande passante.

Attention aussi aux décalages de mise en page causés par les images en lazy load. Quand une image se charge et pousse le contenu vers le bas, c'est un problème de CLS. Mets toujours des attributs width et height explicites sur tes images. Le navigateur réserve l'espace avant que l'image ne charge, empêchant les sauts de mise en page.

Quels formats d'image donnent les meilleurs scores Core Web Vitals ?

Le format que tu choisis affecte directement la taille du fichier. Des fichiers plus petits chargent plus vite. Un chargement plus rapide signifie un meilleur LCP.

WebP est le meilleur choix par défaut pour les images web actuellement. Il compresse 25-35 % mieux que JPEG sans perte de qualité visible. Le support navigateur dépasse les 97 %. Sauf si tu dois supporter de très vieux navigateurs, WebP devrait être ton format principal.

AVIF compresse encore mieux que WebP. Jusqu'à 50 % plus petit que JPEG. Mais l'encodage est plus lent et le support navigateur rattrape encore son retard. Utilise AVIF si ta pipeline le supporte et que tu peux servir des alternatives.

JPEG fonctionne toujours bien pour les photos. Si tu le comprimes bien (qualité 75-85), c'est un choix solide. Mais WebP te donnera presque toujours un fichier plus petit à qualité visuelle égale.

PNG convient pour les logos, icônes et images avec transparence. Mais les fichiers PNG sont gros. Si la transparence n'est pas nécessaire, convertis en WebP ou JPEG.

L'élément <picture> te permet de servir le meilleur format à chaque navigateur :

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Image hero" width="1200" height="600">
</picture>

Ça sert l'AVIF aux navigateurs qui le supportent, WebP au groupe suivant et JPEG en fallback. Chaque visiteur reçoit le fichier le plus petit que son navigateur peut gérer.

Comment empêcher les images de causer des décalages de mise en page ?

Le décalage de mise en page se produit quand une image se charge et pousse le reste du contenu. Le texte que tu lisais saute vers le bas. Un bouton que tu allais cliquer se déplace. C'est frustrant pour les utilisateurs et mauvais pour ton score CLS.

La solution est simple. Dis toujours au navigateur la taille de l'image avant qu'elle ne charge.

Mets width et height sur chaque image. Le navigateur les utilise pour calculer le ratio et réserver le bon espace. Même si l'image n'a pas encore chargé, la mise en page reste stable.

<img src="/photo.webp" alt="Photo produit" width="800" height="600">

Utilise aspect-ratio en CSS pour les images responsives. Si tes images s'adaptent au viewport, fixe le ratio en CSS. Le navigateur réserve l'espace proportionnel correct à n'importe quelle taille d'écran.

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Évite d'insérer des images dynamiquement au-dessus du contenu existant. Si du JavaScript charge une bannière pub ou un carousel en haut de la page, tout en dessous se décale. Réserve de l'espace pour le contenu dynamique ou charge-le sous la ligne de flottaison.

Attention aux mises en page qui dépendent des polices. Parfois le décalage ne vient pas des images. Les polices web qui chargent en retard peuvent reformater le texte et déplacer les images. Utilise font-display: swap et précharge tes polices principales.

Quelle est une bonne checklist d'optimisation d'images pour les Core Web Vitals ?

Voici une checklist étape par étape pour chaque page :

Avant l'upload :

• Redimensionne les images à leur taille d'affichage (2x pour les écrans retina).
• Compresse les images à la bonne qualité. Utilise 75-85 % pour les photos.
• Convertis en WebP ou AVIF quand c'est possible.
• Supprime les métadonnées (données EXIF, coordonnées GPS, infos caméra).

Dans ton HTML :

• Mets width et height sur chaque balise <img>.
• Ajoute loading="lazy" à toutes les images sous la ligne de flottaison.
• Ajoute fetchpriority="high" à l'image LCP.
• Précharge l'image LCP avec <link rel="preload">.
• Utilise l'élément <picture> pour servir des formats modernes avec des fallbacks.

Après le déploiement :

• Lance Lighthouse ou PageSpeed Insights. Vérifie tes scores LCP et CLS.
• Regarde la section « Opportunités ». Elle signale les images qui pourraient être plus petites.
• Teste sur mobile. Les connexions mobiles sont plus lentes, donc l'optimisation des images y est encore plus importante.

Suivre cette checklist de façon constante gardera tes Core Web Vitals au vert. La plupart des sites voient leur LCP baisser de 1-3 secondes rien qu'avec l'optimisation des images.

Comment tester et surveiller la performance des images ?

Optimiser une fois ne suffit pas. De nouvelles images s'ajoutent. Le contenu change. Tu dois surveiller la performance dans la durée.

Google PageSpeed Insights te donne un aperçu rapide. Colle n'importe quelle URL et obtiens les scores LCP, INP et CLS pour mobile et desktop. Il montre aussi des données terrain d'utilisateurs réels de Chrome quand c'est disponible.

Lighthouse (intégré dans Chrome DevTools) fait un audit complet. Il signale les images surdimensionnées, le lazy loading manquant, les images sans dimensions et les images dans des formats obsolètes. Lance-le dans une fenêtre de navigation privée pour éviter les interférences des extensions.

Google Search Console montre les données Core Web Vitals pour tout ton site. Elle regroupe les URLs par statut : bon, à améliorer ou faible. Vérifie ça chaque mois pour détecter les régressions tôt.

WebPageTest te donne une vue en pellicule du chargement de ta page image par image. Tu peux voir exactement quand chaque image apparaît et comment elle affecte la timeline de rendu.

Le comparatif des outils de compression populaires peut t'aider à choisir le bon outil pour ton workflow. Que tu comprimes une image à la fois ou que tu en traites des centaines par lot, le bon outil rend l'optimisation facile à maintenir.

Prêt à corriger tes Core Web Vitals ?

Les images sont le plus gros poids sur la plupart des pages web. Les optimiser est le changement le plus impactant que tu puisses faire pour les Core Web Vitals.

Compresse tes images. Utilise des formats modernes. Fixe les bonnes dimensions. Précharge ce qui compte. Lazy-loade ce qui ne compte pas.

CompressIMG s'occupe de l'étape compression. Upload tes images, choisis ta qualité et télécharge des fichiers optimisés en quelques secondes. Pas besoin de compte. Commence par tes images hero et descends de là.

Ton score LCP te remerciera.