Optimiser les images pour les Core Web Vitals

Comment les images affectent les Core Web Vitals

Les images sont responsables du Largest Contentful Paint sur 85 % des pages de bureau et 76 % des pages mobiles, selon le Web Almanac 2025. Cela fait de l'optimisation des images la chose la plus impactante que vous puissiez faire pour vos Core Web Vitals. Mais les images n'affectent pas seulement la vitesse de chargement. Elles peuvent provoquer des layout shifts et, sur les pages riches en images, même ralentir l'interactivité. Ce guide couvre tous les angles : des attributs HTML et du préchargement aux images responsives, aux formats modernes et aux stratégies que vous devriez appliquer à chaque image de votre page.

Dernière révision par Arjen Karel en février 2026

Quels Core Web Vitals les images peuvent-elles affecter ?

Vous serez peut-être surpris d'apprendre que les images peuvent affecter tous les Core Web Vitals. Les images, si elles sont mises en file d'attente pour le téléchargement tardivement lors du rendu ou si elles sont simplement trop grandes, entraîneront généralement un score LCP élevé. Si les dimensions de l'image ne sont pas définies ou changent pendant la phase de chargement, les images peuvent également affecter le score CLS. Et enfin, si le décodage de l'image prend trop de travail sur le main thread, elles peuvent même affecter l'INP. Regardons de plus près :

Largest Contentful Paint

Le Largest Contentful Paint (LCP) mesure le temps nécessaire pour que le plus grand élément de la page (comme une image ou une vidéo) devienne visible pour l'utilisateur. Selon le Web Almanac 2025, les images sont l'élément LCP sur 85 % des pages de bureau et 76 % des pages mobiles. Si une image est mise en file d'attente trop tard ou met trop de temps à charger, cela peut ralentir considérablement le score LCP de la page.

Cumulative Layout Shift

Le Cumulative Layout Shift (CLS) mesure à quel point le contenu d'une page se déplace pendant son chargement. Les images peuvent provoquer des layout shifts si elles ne sont pas correctement dimensionnées ou si elles sont insérées dans la page après qu'elle a déjà été chargée, provoquant le déplacement d'autres éléments. Le Web Almanac 2025 rapporte que 65 % des pages de bureau ont encore au moins une image sans dimensions explicites.

Interaction to Next Paint (INP)

Les images peuvent également impacter l'Interaction to Next Paint (INP), qui mesure le temps nécessaire à une page pour répondre visuellement après qu'un utilisateur a interagi avec elle. S'il y a trop de grandes images qui doivent être décodées, la page peut prendre plus de temps pour répondre aux interactions de l'utilisateur, conduisant à un mauvais score INP. C'est plus fréquent sur les pages de liste de produits où des centaines d'images sont en compétition pour les ressources.

Étape 1 : Optimiser l'élément image HTML pour la vitesse

Attribut Src

Spécifie l'URL de l'image. Cette propriété est essentielle, car elle indique au navigateur où trouver l'image.

Attributs Width et Height

Spécifient la largeur et la hauteur de l'image en pixels. Ces propriétés sont importantes pour rendre l'image correctement sur la page, car elles définissent la taille du conteneur de l'image et la façon dont l'image s'y insère. Définissez toujours la largeur et la hauteur pour prévenir les layout shifts.

Attribut Alt

Spécifie un texte alternatif pour l'image si elle ne peut pas être affichée. C'est important pour l'accessibilité, car cela aide les utilisateurs malvoyants à comprendre de quoi traite l'image. C'est également important pour l'optimisation pour les moteurs de recherche (SEO), car les moteurs de recherche utilisent le texte alt pour comprendre le contenu de l'image.

Attribut Loading (lazy loading)

Spécifie comment le navigateur doit charger l'image (lazy, eager ou auto). Cette propriété est importante pour améliorer les performances de la page, car elle permet aux images d'être chargées de manière asynchrone et uniquement lorsqu'elles sont nécessaires. Ne définissez jamais loading="lazy" sur l'image LCP. Selon le Web Almanac 2025, 16 % des pages utilisent encore le lazy-load sur leur image LCP, ce qui est l'une des erreurs de performance les plus courantes sur le web.

Attribut Srcset

Attribut Sizes

Attribut Decoding

Attribut Fetchpriority

L'attribut fetchpriority spécifie la priorité du fetch d'une ressource par rapport aux autres ressources de la page. L'attribut peut avoir l'une des trois valeurs : "high", "low" ou "auto". Une ressource avec une priorité élevée est chargée avant les ressources avec des priorités plus faibles. En 2026, fetchpriority est pris en charge par tous les navigateurs modernes (Chrome 102+, Safari 17.2+, Firefox 132+, Edge 102+) et peut être utilisé en toute sécurité en production. Seulement 17 % des pages l'utilisent sur leur image LCP, ce qui signifie que la grande majorité des sites manquent une victoire facile.

Étape 2 : S'assurer que l'image est mise en file d'attente pour le téléchargement le plus tôt possible

La deuxième chose à faire, après avoir optimisé le HTML, est de regarder la planification des images. Dans de nombreux cas, le plus gros goulot d'étranglement en ce qui concerne les images affectant la métrique LCP est la planification tardive. Si un navigateur a la possibilité de télécharger l'élément LCP tôt durant le processus de rendu, l'image sera disponible pour le navigateur le plus tôt possible et le navigateur pourra commencer à peindre cet élément tôt dans le processus de rendu.

Cela semble simple, non ? Eh bien, comment nous assurer que l'image est mise en file d'attente pour le téléchargement le plus tôt possible.

Précharger l'élément LCP

Le moyen le plus efficace d'assurer un téléchargement précoce est de précharger l'image. Le préchargement de l'image se fait avec une simple balise au début de l'élément <head>. Par exemple :

<link rel="preload" as="image" href="image.jpg">

Cette simple balise dira au navigateur que nous aurons besoin de "image.jpg" assez rapidement et le navigateur commencera à télécharger ce fichier immédiatement.

Sur les sites surveillés par CoreDash, 83 % des chargements de page avec une image LCP préchargée obtiennent un score 'bon' sur le LCP, contre 65 % sans préchargement.

Charger l'élément LCP en mode eager

Utiliser une fetchpriority élevée

Si, pour une raison quelconque, vous ne pouvez pas précharger l'élément LCP, assurez-vous au moins que l'élément a l'attribut fetchpriority défini sur high. Cela indiquera au navigateur qu'une image est importante pour la page et le navigateur la téléchargera avec une priorité élevée. Veuillez noter que l'utilisation de fetchpriority="high" n'est généralement pas aussi efficace que le préchargement d'une image !

Étape 3 : S'assurer que l'image est téléchargée aussi vite que possible

La troisième chose à faire est de vous assurer que vous ne gaspillez pas de précieuses ressources réseau sur des images qui sont plus grandes qu'elles ne devraient l'être. Vous pouvez faire cela en utilisant des images responsives, en utilisant la compression, et en utilisant de nouveaux formats d'image plus rapides.

Images responsives

Voici une image responsive utilisant srcset et sizes :

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texte alt descriptif">

Le navigateur choisit l'image la plus appropriée en fonction de la largeur du viewport. Pour les images en lazy-load sous la ligne de flottaison, vous pouvez également utiliser sizes="auto" (pris en charge dans Chrome 126+ et Edge 126+), ce qui laisse le navigateur calculer la taille correcte automatiquement en fonction de la mise en page CSS de l'image.

Compression d'image

Nouveaux formats d'image plus rapides

Les images sont souvent l'une des plus grandes ressources sur une page web, et elles peuvent ralentir considérablement la vitesse de chargement d'une page si elles ne sont pas optimisées. Les formats d'image modernes comme WebP et AVIF offrent une compression nettement meilleure que le JPEG tout en maintenant la même qualité visuelle.

WebP est pris en charge par pratiquement tous les navigateurs (~99 % de support mondial) et réduit généralement la taille du fichier de 25-35 % par rapport au JPEG. AVIF va encore plus loin avec plus de 50 % d'économies par rapport au JPEG et a maintenant 94,7 % de support navigateur (Chrome 85+, Firefox 93+, Safari 16.4+). Malgré cela, le Web Almanac 2025 montre que l'AVIF est utilisé pour seulement 0,7 % des images LCP, tandis que le JPEG domine toujours à 57 %. C'est une opportunité massive.

Utilisez l'élément <picture> pour servir le meilleur format que chaque navigateur prend en charge :

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="800" height="450" alt="Texte alt descriptif">
</picture>

Le navigateur essaiera AVIF d'abord, se repliera sur WebP, et utilisera JPEG en dernier recours. Si vous êtes curieux de l'avenir, lisez à propos de JPEG XL et son statut actuel de support navigateur.

Étape 4 : Éliminer le layout shift !

Les images qui changent de taille pendant leur chargement provoqueront un layout shift. C'est aussi simple que cela. Il y a 3 raisons principales pour lesquelles les images provoquent un layout shift (il y en a plus, mais ces 3 sont les plus courantes) :

1. Dimensions d'image manquantes

2. Problèmes de style

Habituellement, les images sont empêchées de devenir plus grandes que le viewport par une simple astuce CSS :

img{
   max-width:100%;
   height:auto;
}

C'est une excellente astuce et vous devriez l'utiliser. Malheureusement, je vois régulièrement des variantes de cette astuce qui causent un layout shift. Par exemple en ajoutant width:auto :

img{
   max-width:100%;
   height:auto;
   width:auto;
}

Cela fera rendre n'importe quelle image avec une largeur et une hauteur auto. Cela signifie généralement que le navigateur rendra l'image à 0x0px avant que l'image ne soit téléchargée.

3. Espaces réservés (Placeholders)

Certains scripts de lazy loading basés sur JavaScript utilisent des espaces réservés. Si vous utilisez une sorte d'astuce CSS comme le max-width:100% et height:auto mentionné ci-dessus, alors la hauteur auto de l'espace réservé carré ne correspondra pas à l'attribut height de l'image. Fondamentalement, l'image sera d'abord rendue avec l'espace réservé carré à 720x720 et lorsque l'image finale sera téléchargée, elle sera rendue à 720x180 :

<img
  src="1x1placeholder.png"
  data-src="hero.png"
  width="720"
  height="180"
  style="height:auto;max-width:100%"
>

Étape 5 : Protéger le main thread

La prochaine chose à s'assurer est que pas trop d'images ne soient décodées sur le main thread en même temps. Habituellement, cela ne sera pas un problème, mais je l'ai vu se produire de nombreuses fois sur des pages de liste de produits (où parfois jusqu'à 500 images sont en compétition pour les ressources !).

L'astuce est d'ajouter decoding="async" à toutes les images pour s'assurer que ces images peuvent être décodées sur un thread séparé. Essayez également d'éviter d'avoir autant d'images décodées toutes en même temps en ajoutant loading="lazy" à toutes les images en dessous de la ligne de flottaison et masquées.

Étape 6 : Choisir la bonne stratégie pour chaque image !

Stratégies d'image pour l'élément LCP

L'élément LCP est généralement l'élément visuel le plus important. Nous devons donc vraiment prioriser celui-ci.

1. Préchargez l'image tôt dans le head de la page avec ce code : <link rel="preload" as="image" href="path-to-img.png">
2. Dites au navigateur que cette image ne doit pas être chargée en lazy load en définissant loading="eager" ou en omettant l'attribut loading
3. Indiquez au navigateur que cette image doit être téléchargée avec une priorité élevée en utilisant fetchpriority="high" (si vous préchargez l'image, vous pouvez sauter cette partie)
4. Définissez decoding="sync" puisque cet élément est si important que nous voulons le décoder sur le main thread

Voici un exemple complet d'une image LCP optimisée, responsive et avec préchargement :

<!-- Dans <head> -->
<link rel="preload" as="image" href="hero-800.jpg"
  imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  imagesizes="(max-width: 600px) 100vw, 800px">

<!-- Dans <body> -->
<img src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450" alt="Texte alt descriptif"
  fetchpriority="high" decoding="sync">

Stratégie d'image pour les logos et autres images visibles (non-LCP)

Les images visibles devraient être chargées assez tôt durant le chargement de la page mais de préférence après l'élément LCP. Nous pouvons réaliser cela en préchargeant l'élément LCP. Cela donnera à ces images visibles leur ordre de téléchargement naturel et correct.

1. Dites au navigateur que cette image ne doit pas être chargée en lazy load en définissant loading="eager" ou en omettant l'attribut loading
2. Définissez decoding="async" puisque cet élément peut être décodé en toute sécurité hors du main thread !

Stratégie d'image pour les images en dessous de la ligne de flottaison (below-the-fold)

Toutes les images en dessous de la ligne de flottaison devraient être chargées en lazy load. C'est aussi simple que cela ! Il n'y a pas d'exceptions !

1. Dites au navigateur que cette image doit être chargée en lazy load en définissant loading="lazy"
2. Définissez decoding="async" puisque cet élément peut être décodé en toute sécurité hors du main thread !

Éviter les images d'arrière-plan

Si vous utilisez des images d'arrière-plan, vous devez reconsidérer. Les images d'arrière-plan ne peuvent pas être chargées en lazy load et vous ne pouvez pas contrôler la propriété decoding et vous ne pouvez pas définir la fetchpriority. Les images d'arrière-plan ne sont généralement pas responsives, ce qui vous coûtera probablement beaucoup de bande passante. Mais surtout, les images d'arrière-plan sont généralement découvertes après que le navigateur a téléchargé les fichiers CSS. Ce n'est presque jamais le bon moment pour déclencher un téléchargement d'image ! Lisez pourquoi les images d'arrière-plan sont le mal et comment différer les images d'arrière-plan lorsque vous n'avez pas le choix.

Vous pouvez utiliser des balises image normales en combinaison avec le CSS object-fit:cover pour faire en sorte que les images normales se comportent comme des images d'arrière-plan !

Surveiller l'impact avec le Real User Monitoring

Après avoir appliqué ces optimisations, vérifiez qu'elles améliorent réellement les performances pour les utilisateurs réels. Les outils de laboratoire comme Lighthouse peuvent confirmer que vos modifications sont correctes, mais seul le Real User Monitoring vous montre l'impact réel sur vos visiteurs. Suivez vos LCP, CLS et INP au fil du temps pour confirmer que vos optimisations d'image fonctionnent comme prévu.