Mantys CoreImages
srcset et sizes, image LCP, heros en fond et SVG : servir la bonne image, à la bonne taille, au bon moment.
Mon hero est une image d'arrière-plan : pourquoi elle ralentit le LCP et comment corriger (Divi, Elementor)
Une image d'arrière-plan CSS reste invisible pour le navigateur tant que la feuille de style n'est pas téléchargée et appliquée, elle n'a pas de srcset, et les builders la chargent souvent en différé avec du JavaScript, donc le hero démarre tard ; le meilleur correctif est une vraie image, et le suivant, un preload par appareil sans chargement différé sur cette section.
L'image LCP n'est pas la même sur mobile et sur desktop : comment précharger la bonne
Quand la plus grande image diffère entre téléphone et desktop, un preload unique fait télécharger à l'un des deux une image qu'il n'affichera pas, ou télécharger le hero deux fois, et le correctif consiste à poser un preload par appareil, avec les mêmes srcset et sizes que l'image, placé juste après la balise viewport.
SVG inline : parfait pour une icône, poison pour une illustration
Un SVG n'est pas un seul type d'image. Une petite icône en inline est idéale, une illustration lourde en inline alourdit votre page, et une photo raster cachée dans un SVG est le pire des trois. Voici comment les distinguer et choisir le bon format à chaque fois.
Pourquoi PageSpeed Insights affiche encore « Dimensionnez correctement les images » alors que j'ai un srcset ?
Srcset propose au navigateur une liste de tailles, mais c'est l'attribut sizes qui lui indique laquelle choisir. Si sizes est absent, erroné ou ignoré, le navigateur télécharge la plus grande image de la liste, et PageSpeed le signale, srcset ou pas.