Extraction d'images critiques pour LCP et SEO

Dernière mise à jour : June 28, 2026

L'extraction d'image critique signifie trouver l'image qui contrôle la première impression visuelle d'une page. Sur de nombreuses pages produits, landing pages et articles de blog, cette image est le héros (hero), la photo principale du produit ou une grande illustration au-dessus du pli (above-the-fold). Si vous l'identifiez tôt, vous pouvez précharger ou prioriser le bon fichier au lieu d'accélérer toutes les images également.

Réponse rapide : comment extraire l'image critique ?

Utilisez l'extraction d'image critique pour nommer l'image la plus susceptible de devenir l'élément Largest Contentful Paint, puis donnez à ce fichier un traitement de chargement spécial. Cela signifie généralement que la plus grande image visible dans le viewport initial reçoit fetchpriority="high", sans lazy loading, des dimensions stables et parfois un <link rel="preload">.

Ne préchargez pas tous les gros fichiers. Préchargez l'image héros ou produit uniquement lorsque le navigateur ne la découvrirait autrement que tardivement, par exemple à l'intérieur du CSS, d'un carrousel, d'un composant rendu côté client (client-rendered component) ou d'une pile <picture> responsive avec une sélection de source complexe.

Après le changement, vérifiez le résultat. La documentation Largest Contentful Paint de Google définit LCP autour du plus grand élément de contenu visible, et PageSpeed Insights indiquera quel élément a été mesuré. Les DevTools Chrome devraient également montrer la requête d'image critique tôt dans la cascade (waterfall).

Utilisez cet ordre :

1. Charger la page avec un viewport mobile réaliste.
2. Trouver la plus grande image ou affiche au-dessus du pli.
3. Vérifier si PageSpeed ou Lighthouse le signale comme LCP.
4. Retirer loading="lazy" de cette image.
5. Ajouter des dimensions ou un ratio d'aspect.
6. Ajouter fetchpriority="high" lorsqu'il s'agit d'un <img>.
7. Précharger uniquement lorsque la découverte est tardive.
8. Garder les images en dessous du pli en mode lazy.
9. Re-tester après des modifications de mise en page, CMS ou texte héros (hero copy).

Qu'est-ce qui compte comme une image critique ?

Une image critique est l'image que le visiteur attend avant que la page ne semble utile. C'est souvent, mais pas toujours, l'élément LCP. Un petit logo en haut de la page peut se charger en premier, mais il contrôle rarement la préparation perçue. Une image héros qui occupe la moitié de l'écran du téléphone le fait généralement.

Utilisez ensemble la taille rendue (rendered size), la position dans le viewport et le but. Une vignette dans un menu de navigation est visible, mais ce n'est pas le contenu principal. Une image d'arrière-plan derrière le titre peut être critique si c'est l'élément visible le plus grand. Une image de carte sociale dans les métadonnées est importante pour le partage, mais elle n'est pas récupérée pour la page rendue à moins que le template ne l'affiche également.

Les directives LCP de Google listent les éléments <img>, les éléments d'image à l'intérieur de SVG, les images de poster vidéo et les images d'arrière-plan CSS comme candidats possibles. Cela signifie que l'extraction ne peut pas s'arrêter au simple fait de rechercher la première balise <img>. Vous devez inspecter la page rendue.

Pour un travail connexe, gardez la liste de contrôle plus large image optimization for SEO à portée de main. L'extraction d'image critique décide de la priorité ; la compression, les noms de fichiers, le texte alt et le contenu structuré décident toujours si l'image est utile après son chargement.

Quelle image devrait recevoir un préchargement ou une haute priorité ?

Donnez une haute priorité à une seule image : l'image LCP probable de la page actuelle. Si deux candidats sont proches, choisissez celui qui est le plus grand sur mobile en premier, car les Core Web Vitals mobiles sont généralement plus difficiles à passer.

Utilisez fetchpriority="high" lorsque l'image critique est un <img> normal ou le <img> de secours dans un élément <picture>. Les directives fetch priority de Google expliquent que ce hint modifie la priorité des ressources du navigateur sans changer le chemin de découverte du markup.

Utilisez preload lorsque la découverte est le problème. La référence rel="preload" de MDN décrit preload comme un moyen de demander les ressources plus tôt lors du chargement de la page. Cela aide lorsque l'URL de l'image apparaît dans le CSS, arrive après l'hydratation, ou se trouve derrière un markup que le navigateur ne peut pas découvrir assez rapidement.

Pour une image responsive normale, le markup peut ressembler à ceci :

<img
  src="/images/product-hero-960.webp"
  srcset="/images/product-hero-480.webp 480w, /images/product-hero-960.webp 960w, /images/product-hero-1440.webp 1440w"
  sizes="(max-width: 640px) 100vw, 960px"
  width="960"
  height="640"
  fetchpriority="high"
  alt="Black leather backpack shown open with laptop sleeve visible"
>

Si l'image est une arrière-plan CSS et que vous ne pouvez pas la déplacer dans le HTML pour le moment, préchargez le même asset que celui qui sera utilisé par le viewport initial :

<link
  rel="preload"
  as="image"
  href="/images/home-hero-960.webp"
  imagesrcset="/images/home-hero-480.webp 480w, /images/home-hero-960.webp 960w"
  imagesizes="100vw"
>

Le image preloading guide couvre la syntaxe plus en détail. La règle importante ici est plus restrictive : précharger après l'extraction, pas avant.

Comment éviter de lazy-loader la mauvaise image ?

Le lazy loading appartient à ce qui se trouve sous le premier viewport. C'est une erreur pour l'image critique extraite car cela indique au navigateur d'attendre que les vérifications de mise en page et de distance aient lieu. Les directives de lazy loading au niveau du navigateur de Google mettent en garde contre le lazy-loading des images immédiatement visibles.

Vérifiez attentivement les composants d'image globaux. De nombreux frameworks rendent le lazy loading par défaut car la plupart des images sont sous le pli. Ce défaut casse les pages où l'image héros est enveloppée dans le même composant que les vignettes de galerie.

Vérifiez ces emplacements :

1. Les renderers d'images rich-text du CMS.
2. Les composants de galerie de produits.
3. Les composants d'image de couverture de blog.
4. Les utilitaires d'arrière-plan héros de la page d'accueil.
5. Les sliders qui cachent toutes les diapositives jusqu'à ce que JavaScript s'exécute.
6. Les composants placeholders qui remplacent data-src par src.
7. Les blocs de personnalisation tiers (third-party personalization blocks).
8. Les wrappers d'A/B testing qui retardent le markup héros.

La correction est généralement mineure. Ajoutez une option priority, aboveFold, ou isLcp au composant et demandez au propriétaire du template de la choisir explicitement. Les images du corps en dessous du pli doivent toujours utiliser le lazy loading natif, surtout les longs guides avec des captures d'écran et des diagrammes.

Pour les pages axées sur mobile, associez cela au guide d'optimisation d'images mobiles. Un héros correctement priorisé fonctionne toujours mal si le téléphone télécharge un recadrage desktop de 2400 px pour un emplacement de 390 px.

Comment devriez-vous extraire des images d'une page réelle ?

Commencez dans le navigateur, pas dans la bibliothèque d'assets. La bibliothèque d'assets vous dit ce qui existe ; le navigateur vous dit ce que reçoivent les utilisateurs.

Utilisez ce flux de travail manuel :

1. Ouvrez la page à 390 px de large et rechargez avec le cache désactivé.
2. Notez la plus grande image visible avant de faire défiler.
3. Inspectez cet élément et enregistrez son URL finale.
4. Vérifiez s'il s'agit d'un <img>, <picture>, poster vidéo ou arrière-plan CSS.
5. Confirmez la largeur et la hauteur rendues.
6. Comparez la largeur du fichier téléchargé avec l'emplacement rendu.
7. Recherchez loading="lazy" ou une affectation de src retardée par JavaScript.
8. Vérifiez DevTools Network pour le temps de début et la priorité de la requête.
9. Exécutez PageSpeed Insights et enregistrez l'élément LCP.
10. Répétez sur desktop si le héros change selon les points de rupture (breakpoint).

Pour les audits de template, créez un petit tableau d'extraction avant de modifier le code :

J'ai généré les diagrammes de cet article au format WebP et j'en ai gardé chacun en dessous de 40 KB. Ce n'est pas un objectif universel pour les photos, mais c'est un bon rappel : l'image extraite doit être redimensionnée avant de recevoir la priorité. Si le fichier est toujours énorme, utilisez image compression deep dive et batch resize guide avant de publier.

Comment vérifier l'image critique dans les outils ?

La vérification a deux objectifs. Premièrement, prouver que l'image sélectionnée est réellement l'élément LCP ou un candidat LCP sérieux. Deuxièmement, prouver que le navigateur la découvre suffisamment tôt.

Utilisez PageSpeed Insights pour le contexte de champ et de laboratoire (field and lab context). Le panneau de diagnostic nomme généralement l'élément LCP, et la capture d'écran aide à confirmer si l'élément signalé correspond au héros visuel de la page. Utilisez Lighthouse ou DevTools Performance lorsque vous avez besoin d'une trace locale.

Utilisez DevTools Network pour le comportement des requêtes :

1. Filtrer par requêtes d'images.
2. Recharger avec le cache désactivé.
3. Confirmer que l'image critique commence près du sommet de la cascade (waterfall).
4. Vérifier que la priorité est High ou mise à niveau tôt.
5. Confirmer que les images en dessous du pli ne sont pas toutes en compétition au même moment.
6. Vérifier le code d'état, le type de contenu, la taille de transfert et les en-têtes de cache.

Utilisez l'inspection HTML rendu pour les erreurs de markup :

1. L'image critique a un src ou un srcset découvrable dans le markup initial.
2. Elle ne possède pas loading="lazy".
3. Elle possède width et height, ou un ratio d'aspect CSS stable.
4. Son texte alt décrit le sujet visible lorsque l'image est du contenu.
5. L'URL CDN retourne une réponse crawlable 200.

Pour la recherche, les meilleures pratiques SEO pour les images de Google insistent également sur des noms de fichiers descriptifs, le texte alt et un texte explicatif utile environnant. L'extraction d'image critique améliore la priorité de chargement, mais l'image elle-même a toujours besoin d'un contexte de recherche.

Qu'est-ce qui brise l'extraction d'images critiques ?

Le manquement le plus courant est de traiter chaque page comme si elle avait le même héros. Un index de blog, une page produit et une page de tarification peuvent avoir des candidats LCP différents. L'étape d'extraction doit se faire au niveau du template et au niveau du point de rupture (breakpoint).

Méfiez-vous de ces pièges :

1. Précharger l'image Open Graph. L'image de carte sociale peut ne jamais être rendue sur la page.
2. Lazy-loader la première photo produit. Les galeries de produits héritent souvent des valeurs par défaut de vignettes.
3. Prioriser chaque diapositive du carrousel. Seule la première diapositive visible peut être critique au chargement.
4. Ignorer les recadrages mobiles. Le desktop et le mobile peuvent sélectionner des images LCP différentes.
5. Utiliser des arrière-plans CSS pour un contenu significatif. Ils sont plus difficiles à prioriser et moins accessibles.
6. Oublier les dimensions. La priorité ne prévient pas le décalage de mise en page (layout shift).
7. Publier une source trop grande. Une image haute priorité de 3 MB est toujours lente.
8. Tester uniquement sur Wi-Fi local. Un 4G lent expose les retards de découverte.

Si le problème est principalement le poids du fichier, commencez par la liste de contrôle complète d'optimisation des images. Si le problème est le choix de format, comparez AVIF vs WebP avant de changer les règles de livraison.

Résumé : checklist d'extraction d'image critique

L'extraction d'image critique est une décision de vitesse de page, pas un exercice de nommage d'assets. Trouvez l'image qui contrôle le premier viewport, donnez uniquement cette image un traitement de chargement précoce, et empêchez le reste de la page de rivaliser avec elle.

Avant de publier, confirmez :

1. L'image LCP probable est nommée dans le template ou les notes d'audit.
2. Les candidats mobile et desktop sont vérifiés séparément.
3. L'image critique n'est pas lazy-loadée.
4. fetchpriority="high" est utilisé pour un candidat LCP <img> visible.
5. Le préchargement est utilisé uniquement lorsque la découverte est tardive.
6. Le fichier sélectionné est redimensionné et compressé.
7. La largeur et la hauteur, ou un ratio d'aspect, réservent l'espace de mise en page.
8. Les images sous le pli restent en mode lazy.
9. PageSpeed Insights signale l'élément LCP attendu.
10. DevTools montre la requête d'image critique tôt dans la cascade (waterfall).
11. L'URL CDN retourne 200 avec le type d'image attendu.
12. L'image possède un texte alt utile et un contenu explicatif proche.

Image credits

• Le diagramme de candidat LCP, l'arbre de décision de priorité et la trace de vérification pour cet article ont été générés avec ImageMagick et exportés en WebP.