Optimiser le poids des images (et son impact business)

Les images constituent le plus gros poste de poids du web : elles concentrent la plus grande part de la taille de transfert et le plus grand nombre de requêtes par page. Sur une page médiane d’environ 2 Mo, elles représentent près de la moitié des octets. Autrement dit, optimiser les requêtes d’images est sans doute l’optimisation de performance la plus efficace que vous puissiez mener.

L’enjeu n’est pas que technique, il est business. Une amélioration de la performance des images agit sur les Core Web Vitals, donc sur l’expérience perçue, le SEO et les conversions : c’est pourquoi optimiser ses images est si rentable. Une étude de cas Vodafone a montré qu’une amélioration de 31 % du LCP s’accompagnait d’une hausse de 8 % des ventes, de 15 % du taux de visiteurs devenus prospects et de 11 % du taux d’accès au panier.

La requête la plus rapide reste celle qui n’est jamais faite. L’attribut loading= »lazy » garantit qu’une image n’est demandée qu’à l’approche de la fenêtre d’affichage : elle quitte ainsi le chemin critique du rendu, au moment où le navigateur est le plus sollicité. Une image jamais vue n’est jamais téléchargée, et aucune bande passante n’est gaspillée.

Il y a toutefois une contrepartie. Différer une image visible dès le chargement la fait paraître plus lente. Il ne faut donc pas appliquer loading= »lazy » aux images du haut de page, susceptibles d’être présentes dans la fenêtre d’affichage initiale.

Le navigateur attribue des priorités différentes selon le type et l’emplacement des ressources. L’attribut loading et l’attribut fetchpriority donnent aux développeurs plus de contrôle sur ces décisions. fetchpriority= »high » signale une image à charger en priorité (typiquement l’image LCP, à optimiser en priorité), tandis que fetchpriority= »low » convient à une image révélée seulement après une interaction.

La différence est importante : loading= »lazy » peut empêcher complètement une requête, alors que fetchpriority ne fait qu’ajuster l’ordre de priorité sans bloquer le chargement. Les deux attributs se complètent pour servir d’abord ce qui compte le plus pour l’internaute.

Par leur poids et l’espace qu’elles occupent, les images sont une cause fréquente de Cumulative Layout Shift (CLS), cette instabilité visuelle où le contenu saute pendant le chargement. Depuis 2019, les navigateurs déduisent le format de l’image à partir des attributs width et height pour réserver l’espace nécessaire avant le rendu, un réflexe à combiner avec le bon choix de taille d’image via srcset.

La règle est donc simple : conservez toujours width et height sur vos balises img, avec des valeurs correspondant à la taille intrinsèque de la source. Côté CSS, ajoutez height: auto à côté de max-width: 100% pour garder un comportement responsive. Cette approche n’a aucun inconvénient et s’appuie sur un comportement de navigateur établi de longue date.