Une image de 1920 pixels de large sur une page est aussi téléchargée en entier par les utilisateurs de smartphone, puis réduite à 390 pixels à l'écran : cinq fois plus de bande passante et un chargement plus lent pour rien. Avec srcset, le navigateur choisit la version qui convient à l'écran, à condition que vous ayez produit ces versions.
Pourquoi une seule image ne suffit pas
Le LCP des Core Web Vitals correspond le plus souvent à la grande image visible sans défiler. Servez à un smartphone un fichier de 1920 de large et de 400 Ko, et le LCP passe rarement sous 2,5 secondes ; une version de 480 de large et de 40 Ko, sur la même connexion, est d'un ordre de grandeur plus rapide. Le signal d'expérience de page de Google lit directement ce chiffre.
À l'inverse, une image de 768 de large paraît floue sur un grand écran de bureau. D'où plusieurs tailles, dont le choix revient au navigateur.
Un tableau de points de rupture utilisable
Les points de rupture suivent la largeur d'affichage de l'image dans la page, pas celle de la fenêtre. Pour les deux cas courants, les bannières pleine largeur et les figures d'article :
- Images pleine largeur (hero, bannières) : 480, 768, 1200, 1920. Smartphone, tablette, portable, grand écran.
- Figures d'article (colonne de contenu jusqu'à environ 800) : 400, 800, 1200 ; le 1200 sert les écrans 1,5x à 2x.
- Miniatures et cartes (affichées autour de 300) : 300 et 600.
Plus de paliers ne veut pas dire mieux. Chacun ajoute un export et un fichier à stocker, et les navigateurs tolèrent un écart de taille : des paliers espacés de 1,5 à 2x sont le bon compromis. Quatre paliers couvrent plus de neuf combinaisons d'appareils sur dix.
Faut-il des versions 2x ?
Les écrans Retina et la plupart des smartphones fonctionnent à une densité de 2x à 3x ; une image affichée sur 400 de large demande 800 pixels pour y paraître nette. Les paliers supérieurs du tableau jouent déjà le rôle de version 2x des paliers inférieurs : 768 est le 2x d'un smartphone de 390 de large, 1200 celui d'une colonne de 600.
Inutile donc de prévoir un jeu « @2x » séparé. Gardez un écart d'environ 2x entre les paliers et le navigateur choisira le plus grand selon la densité.
Format : WebP d'abord, JPG en secours
À qualité égale, le WebP pèse 25 à 35 % de moins que le JPG et tous les navigateurs récents le prennent en charge. Exportez du WebP à chaque taille et gardez un JPG de secours via l'élément picture pour les vieux navigateurs ; si les navigateurs d'avant 2020 ne comptent plus pour votre public, le WebP seul suffit.
L'AVIF est encore plus léger, mais son encodage dans le navigateur est bien plus lent, ce qui pénalise les gros lots. AVIF, WebP ou JPEG détaille les compromis.
Exporter tout le jeu par lot
Déposez les images sources dans Traitement d'images par lot et lancez un passage par palier, en changeant à chaque fois la largeur et le suffixe :
- Taille : largeur 480, Autoriser l'agrandissement désactivé, sortie WebP à 80 %, suffixe -480.
- Mêmes réglages à 768 avec le suffixe -768, puis 1200, puis 1920.
- Pour un JPG de secours, passez la sortie en JPG, gardez les suffixes et relancez.
Chaque passage prend quelques secondes et le ZIP contient déjà hero-480.webp, hero-768.webp et ainsi de suite, prêts pour le dossier d'images. Laissez l'agrandissement désactivé pour qu'un original de 1000 pixels ne soit jamais étiré jusqu'à 1920.
Pour voir la différence de poids à chaque palier sur une seule image, essayez Redimensionneur d'images sur un fichier.
Écrire le HTML
Pour une image pleine largeur :
<img src="hero-1200.jpg"
srcset="hero-480.webp 480w, hero-768.webp 768w, hero-1200.webp 1200w, hero-1920.webp 1920w"
sizes="100vw" width="1920" height="1080" alt="...">Pour les figures d'article, réglez sizes sur la largeur réelle, par exemple sizes="(max-width: 840px) 100vw, 800px". Indiquez toujours width et height pour que le navigateur réserve la place et que la page ne saute pas.
Cela fait, ajoutez les conseils de chargement différé et de compression de comment faire charger les images plus vite et la part des images dans votre score de performance est pratiquement au maximum.