Les images sont la raison numéro un pour laquelle les sites échouent aux Core Web Vitals. Elles constituent généralement l'élément le plus volumineux de la page, bloquent le rendu et provoquent des décalages de mise en page lorsqu'elles apparaissent sans espace réservé.
La bonne nouvelle pour les développeurs : les problèmes liés aux images sont les plus faciles à corriger dans les Core Web Vitals. Contrairement au travail approfondi en JavaScript que le score INP exige, l'optimisation des images suit des schémas clairs et reproductibles. Appliquez-les correctement et vous ferez progresser deux des trois métriques dans la bonne direction d'un seul coup.
Ceci est une liste de contrôle pratique, et non une leçon théorique. Chaque point peut être mis en production dès aujourd'hui : le choix des formats, les attributs de chargement, les règles de dimensions et la configuration de diffusion qui feront passer vos scores Core Web Vitals du rouge au vert.
À la fin, vous disposerez d'un processus d'optimisation d'images reproductible applicable à n'importe quelle page sur n'importe quelle stack technologique.
Comment les images affectent chaque Core Web Vital
Les Core Web Vitals sont trois métriques que Google utilise comme signal de classement de l'expérience de page, mesurées sur des utilisateurs réels au 75e centile. Selon la documentation officielle des Core Web Vitals de Google sur web.dev, les trois métriques et leurs seuils « bons » sont les suivants.
LCP (Largest Contentful Paint) : moins de 2,5 secondes
Mesure le temps nécessaire à l'affichage de l'élément visible le plus volumineux. Sur la plupart des pages, cet élément est une image, généralement l'image principale (hero). Une image hero lourde et lente à charger est la cause la plus fréquente d'un échec au score LCP. Les images sont au cœur de cette métrique.
CLS (Cumulative Layout Shift) : moins de 0,1
Mesure les mouvements inattendus de la mise en page pendant le chargement de la page. Les images dépourvues de largeur et de hauteur explicites en sont une cause majeure. Lorsqu'une image se charge et pousse le contenu vers le bas parce que le navigateur n'a pas réservé d'espace pour elle, cela crée un décalage visuel qui pénalise votre score CLS.
INP (Interaction to Next Paint) : moins de 200 millisecondes
Mesure la réactivité aux interactions de l'utilisateur. L'INP a remplacé le First Input Delay en mars 2024. Les images affectent l'INP moins directement, mais le décodage d'images lourdes et les fichiers surdimensionnés monopolisent le thread principal et peuvent retarder la disponibilité des interactions. Des images plus légères aident également ici.
Ainsi, les images influencent directement le LCP et le CLS tout en impactant indirectement l'INP. Optimisez vos images et vous améliorerez les deux métriques sur lesquelles la plupart des sites échouent sur les pages riches en images.
Les seuils des Core Web Vitals en 2026
Gardez ces chiffres sous les yeux. Google mesure le 75e centile des utilisateurs réels, ce qui signifie que 75 % des visites doivent être « bonnes » pour réussir.
Liste de contrôle partie 1 : corriger le LCP (votre image hero)
C'est sur le LCP que les images importent le plus. L'élément le plus volumineux est presque toujours une image, ces correctifs la ciblent donc directement.
1. Servez l'image LCP en AVIF ou WebP
Les formats modernes réduisent drástiquement la taille du fichier de l'image LCP. L'AVIF est jusqu'à 50 % plus petit que le JPEG, le WebP environ 25 à 35 % plus petit. Un fichier plus petit signifie un chargement plus rapide et donc un meilleur LCP. Cette comparaison entre JPEG, PNG, WebP et AVIF explique lequel choisir et comment mettre en place des solutions de secours pour une compatibilité totale sur tous les navigateurs.
2. Ajoutez fetchpriority="high" à l'image LCP
Indiquez au navigateur que cette image est prioritaire. Ajouter fetchpriority="high" à votre image hero pousse le navigateur à la récupérer plus tôt, avant d'autres ressources moins importantes. Cet attribut unique peut faire gagner plusieurs centaines de millisecondes sur le LCP.
3. Ne chargez jamais l'image LCP en lazy-load
Le chargement différé (lazy loading) est excellent pour les images sous la ligne de flottaison, mais appliquer loading="lazy" à votre image hero est une erreur classique. Cela retarde l'image la plus importante de la page. L'image LCP doit se charger immédiatement et avec une haute priorité.
4. Préchargez l'image hero
Ajoutez une balise <link rel="preload" as="image"> dans l'en-tête (head) pour votre image hero afin que le navigateur la découvre tôt, avant d'avoir fini d'analyser le reste du code HTML. Associez cela à fetchpriority high pour un effet maximal.
5. Redimensionnez l'image à sa taille d'affichage
Servir une image de 3000 pixels de large dans un conteneur de 800 pixels gaspille du temps de chargement pour des pixels que personne ne voit. Redimensionnez l'image hero à la taille maximale à laquelle elle sera réellement affichée, puis proposez des variantes responsives pour les écrans plus petits. C'est souvent le gain LCP le plus spectaculaire.
6. Gardez un TTFB inférieur à 200 ms
Le Time to First Byte (temps de réponse initial du serveur) fixe la limite basse de votre LCP. Si votre serveur met une seconde à répondre, aucune optimisation d'image ne vous sauvera. Utilisez un CDN, mettez en cache de manière agressive et envisagez la diffusion en périphérie (edge). Un TTFB sous 200 ms est la cible, car l'image LCP ne peut se charger que si le serveur répond rapidement.
Besoin de compresser votre image hero et vos images de contenu aux bonnes dimensions et formats ? Utilisez le compresseur d'images gratuit → pour une compression rapide en AVIF et WebP, ou essayez le compresseur personnalisé → pour contrôler les dimensions exactes, le format et la qualité pour chaque point de rupture (breakpoint). Les deux s'exécutent dans votre navigateur sans transfert vers un serveur.
Liste de contrôle partie 2 : corriger le CLS (réserver l'espace pour les images)
Le CLS causé par les images se résume presque toujours à un problème : le navigateur ne connaît pas les dimensions de l'image, ne réserve aucun espace, puis décale tout le contenu lorsque l'image arrive. Les solutions consistent toutes à réserver cet espace à l'avance.
7. Définissez toujours les attributs width et height
Chaque élément image a besoin d'attributs width et height explicites. Le navigateur s'en sert pour calculer le ratio d'aspect et réserver l'espace adéquat avant le chargement de l'image, ce qui élimine le décalage. C'est la correction CLS la plus importante et la plus souvent oubliée.
8. Utilisez la propriété CSS aspect-ratio pour les images responsives
Pour les images responsives qui s'adaptent à leur conteneur, définissez la propriété CSS aspect-ratio pour que le navigateur réserve un espace proportionnel quelle que soit la largeur de l'écran. Combiné avec les attributs width et height, cela garantit une mise en page stable sur toutes les résolutions.
9. Réservez l'espace pour les images à chargement tardif
Pour les images chargées par JavaScript, dans des carrousels ou sous la ligne de flottaison, assurez-vous que leurs conteneurs possèdent des dimensions réservées dès le départ. Une image qui apparaît après une interaction doit s'insérer dans un espace pré-dimensionné et non repousser la page.
10. Évitez d'insérer des images au-dessus du contenu existant
Si vous injectez une image (une publicité, une bannière, un hero à chargement tardif) au-dessus d'un contenu que l'utilisateur est déjà en train de lire, toute la page sautera vers le bas. Réservez l'espace à l'avance ou insérez l'élément sous la ligne de flottaison pour ne pas gêner la lecture.
Liste de contrôle partie 3 : optimiser la diffusion (toutes les images)
Ces règles s'appliquent à toutes les images de la page, et non pas seulement à l'image principale. Leurs bénéfices se cumulent sur les pages riches en médias.
11. Activez le lazy-load pour les images sous la ligne de flottaison
Ajoutez loading="lazy" à chaque image située sous la ligne de flottaison. Le navigateur ne les chargera que lorsque l'utilisateur fera défiler la page vers elles, libérant ainsi de la bande passante et du temps sur le thread principal pour le contenu critique en haut de page. N'appliquez simplement jamais cela à l'image LCP.
12. Servez des images responsives avec srcset
Utilisez les attributs srcset et sizes pour envoyer les images adaptées à chaque appareil. un smartphone reçoit une petite image, un ordinateur de bureau en reçoit une grande. Cela permet de réduire de moitié le poids des images sur mobile, et comme Google évalue les sites sur la base des données mobiles, c'est ce qui compte le plus.
13. Compressez toutes les images, pas seulement la principale
Une page peut comporter une image hero et vingt images de contenu. Ces vingt images finissent par peser lourd. Compressez-les toutes à une qualité de 80-85 %. Le guide complet pour compresser les images et accélérer votre site web couvre l'ensemble du flux de travail, y compris l'automatisation à grande échelle.
14. Utilisez un CDN ou un service d'optimisation d'images
Les CDN d'images (Cloudinary, ImageKit, Cloudflare Images) servent les fichiers depuis des serveurs proches de l'utilisateur, les convertissent à la volée en AVIF ou WebP et les redimensionnent automatiquement selon l'appareil. Pour un site riche en contenu, ce simple changement peut résoudre la majorité des problèmes Core Web Vitals liés aux images.
15. Gérez les fichiers PNG avec précaution
Les fichiers PNG sont souvent les images les plus lourdes d'une page. Si vous avez des captures d'écran ou des graphiques en PNG, découvrez comment compresser des images PNG jusqu'à 70 %, ou convertissez-les en WebP pour conserver la transparence avec un fichier beaucoup plus léger.
Comment mesurer vos Core Web Vitals liées aux images
On ne peut pas optimiser ce que l'on ne mesure pas. Utilisez ces outils dans l'ordre :
- PageSpeed Insights : collez votre URL pour obtenir les données en laboratoire et sur le terrain (utilisateurs réels), en vérifiant l'élément LCP identifié
- Le panneau Performance de Chrome DevTools : enregistrez un chargement de page pour voir exactement quelle image constitue l'élément LCP et combien de temps elle prend
- Lighthouse : lancez-le lors de chaque déploiement important pour détecter les régressions avant la mise en production
- Le rapport Core Web Vitals de Google Search Console : suivez le taux de réussite des utilisateurs réels sur l'ensemble de votre site sur une fenêtre de 28 jours
- L'extension Chrome Web Vitals : visualisez le LCP, le CLS et l'INP en temps réel pendant votre développement
Commencez par PageSpeed Insights pour identifier votre élément LCP. S'il s'agit d'une image (comme c'est souvent le cas), la liste de contrôle LCP ci-dessus est votre priorité absolue.
Une note sur les images en dehors de votre site
Les Core Web Vitals ne concernent que vos propres pages, mais la même discipline de compression est utile partout où vos images voyagent. Si vous publiez également sur les réseaux sociaux, l'aide-mémoire des tailles d'images pour les réseaux sociaux vous indique les bonnes dimensions pour chaque plateforme afin d'éviter que ces dernières ne recompressent brutalement des fichiers trop lourds.
L'ordre de priorité : par quoi commencer
Si vous n'avez le temps que pour quelques correctifs, effectuez-les dans cet ordre pour maximiser votre impact sur les Core Web Vitals :
- Premier : ajoutez width et height sur chaque image (résout instantanément la plupart des problèmes de CLS)
- Deuxième : convertissez et compressez l'image hero LCP en AVIF ou WebP aux dimensions réelles d'affichage
- Troisième : ajoutez fetchpriority high et un preload sur l'image hero, et supprimez tout lazy-load sur celle-ci
- Quatrième : activez le lazy-load sur toutes les images sous la ligne de flottaison
- Cinquième : ajoutez srcset pour un redimensionnement responsif
- Sixième : déplacez la diffusion des images vers un CDN ou un service dédié
Les trois premiers correctifs suffisent à eux seuls à corriger la majorité des échecs Core Web Vitals liés aux images. Ils prennent l'espace d'une après-midi, pas d'un sprint complet.
5 erreurs d'images qui ruinent discrètement vos Core Web Vitals
1. Activer le lazy-load sur l'image hero
C'est le contre-son-camp le plus fréquent. Charger l'image LCP en différé retarde exactement l'élément que la métrique mesure. Chargez l'image hero immédiatement (eager) et réservez le lazy-load pour ce qui se trouve sous la ligne de flottaison.
2. Oublier les attributs width et height
L'absence de dimensions entraîne une absence d'espace réservé, provoquant un décalage de mise en page. Cet oubli à lui seul est responsable de la plupart des échecs CLS. Ajoutez-les systématiquement à toutes vos images.
3. Servir des images surdimensionnées
Afficher une image de 4000 px dans un emplacement de 800 px prend quatre fois plus de temps à charger que nécessaire. Redimensionnez à la taille d'affichage et proposez des variantes responsives. L'utilisateur ne verra jamais les pixels superflus, mais il subira l'attente.
4. Continuer d'utiliser le JPEG et le PNG partout
Conserver ces anciens formats revient à ignorer 25 à 50 % d'économies sur la taille des fichiers. Passez à l'AVIF ou au WebP avec des solutions de repli et votre LCP s'améliorera sur tout votre site.
5. Optimiser uniquement l'image hero
L'image hero est la plus importante pour le LCP, mais vingt images de contenu lourdes continueront de ralentir la page et de monopoliser la bande passante. Compressez toutes les images de la page, pas seulement celle en haut.
En résumé
Les images sont la raison la plus fréquente pour laquelle les pages échouent aux Core Web Vitals, tout en étant le problème le plus simple à résoudre. Elles pilotent directement le LCP, causent la plupart des problèmes de CLS et alourdissent la page en impactant l'INP. Corrigez-les et deux des trois métriques s'amélioreront simultanément.
Suivez la liste dans l'ordre : ajoutez des dimensions à toutes les images pour le CLS, utilisez un format moderne compressé et prioritaire pour le LCP de l'image hero, puis activez le lazy-loading et le srcset pour le reste. Mesurez avec PageSpeed Insights et la Search Console, et considérez les régressions comme de véritables bugs.
La plupart des échecs Core Web Vitals liés aux images proviennent d'une poignée de mauvaises pratiques. Apprenez-les une bonne fois pour toutes et vous pourrez faire passer une page dans le vert en une seule après-midi.