Images, lazy loading, WebP, AVIF : que faut-il vraiment faire pour accélérer un site ?

Les images pèsent près de la moitié du poids d’une page moyenne. Face à ça, le réflexe est de convertir tout le catalogue en AVIF. C’est souvent la dernière chose à faire, pas la première. L’ordre de rentabilité des optimisations d’images est presque l’inverse de l’ordre dans lequel on les mène. Voici la hiérarchie qui compte, avec un test de contrôle simple pour savoir où vous en êtes.

Le test de contrôle en trente secondes

Ouvrez votre page sur mobile, outils de développement, onglet Réseau, filtre sur les images. Pour chaque image, comparez la taille du fichier téléchargé à la taille à laquelle elle s’affiche. Si vous voyez des images de 1600 ou 2000 pixels de large rendues dans un bloc de 380 pixels, vous avez trouvé votre problème principal, et ce n’est pas le format. Tant que ce test n’est pas propre, parler d’AVIF est prématuré. Ce diagnostic s’intègre dans une démarche plus large d’audit des Core Web Vitals.

L’ordre de rentabilité réel

Sur un site classique, voici ce qui rapporte, du plus fort au plus faible.

1. Redimensionner à la taille d’affichageUne image servie deux à cinq fois plus grande que son conteneur, c’est 75 à 90 % du poids jeté. Aucun changement de format ne rattrape ça. Coût : faible, c’est une histoire de pipeline ou de plugin.
2. Poser des dimensions sur chaque imagewidth et height, ou un aspect-ratio en CSS, sur toutes les images. Cela supprime les décalages de mise en page pendant le chargement. Coût : quasi nul.
3. Sortir l’image LCP du lotSur la seule image la plus grande visible au chargement, retirer loading= »lazy » et ajouter fetchpriority= »high ». Gain direct sur le LCP. Coût : une ligne de code.
4. Convertir au bon formatAVIF avec repli WebP puis JPEG via la balise picture. Gain réel mais de second ordre une fois les trois points précédents traités. Coût : moyen, à automatiser.
5. Activer le lazy loadingloading= »lazy » sur toutes les images situées sous la ligne de flottaison. Gain sur le chargement initial, à condition de ne jamais toucher aux images du haut de page. Coût : faible.

1. Servir la bonne taille

Le principe est simple : une image ne doit jamais être plus grande que le plus grand affichage qu’elle aura. En pratique, cela veut dire générer plusieurs versions d’une même image et laisser le navigateur choisir avec srcset et sizes :

• une version mobile (par exemple 400 et 800 pixels de large pour les écrans à forte densité) ;
• une version tablette et desktop (1200, 1600 pixels selon la maquette) ;
• jamais l’original de l’appareil photo à 4000 pixels servi tel quel.

Sur un site e-commerce de 60 fiches, ce seul travail fait souvent passer une page produit de 8 Mo à moins de 2 Mo, avant même de parler de format. C’est le plus gros levier LCP disponible, et il est traité en profondeur dans notre article sur les causes fréquentes du LCP.

2. Réserver la place pour tuer le CLS

Une image sans dimensions déclarées se charge après le texte et pousse le contenu vers le bas au moment où elle apparaît. C’est le décalage de mise en page cumulé, le CLS. La correction : toujours renseigner width et height dans le HTML, ou fixer un aspect-ratio en CSS. Le navigateur réserve alors l’espace exact avant même de télécharger l’image.

Ce réglage ne coûte rien et il est souvent oublié sur les images injectées par un CMS, un carrousel ou une bibliothèque tierce. La méthode complète pour corriger le CLS sans casser le design est détaillée dans notre article réduire le CLS sans casser le design.

3. Traiter l’image LCP à part

L’image LCP est le plus grand élément visible dans la première vue de la page : souvent une bannière, une photo produit principale, une illustration d’article. Deux erreurs classiques la ralentissent :

• Le lazy loading appliqué dessus. loading="lazy" demande au navigateur d’attendre avant de charger l’image. Sur l’image LCP, c’est un contresens : on retarde volontairement la métrique qu’on cherche à améliorer. Cette image doit être en loading="eager", le comportement par défaut.
• L’absence de priorité. Ajoutez fetchpriority="high" sur cette image pour que le navigateur la télécharge avant les autres ressources non critiques.

4. Le format, AVIF puis WebP

Une fois la taille et les priorités réglées, le format apporte un gain supplémentaire réel mais plus modeste.

AVIF est 20 à 30 % plus léger que WebP et son support navigateur dépasse 95 % en 2026. La mise en oeuvre passe par la balise picture, qui laisse le navigateur prendre le format qu’il sait lire :

<picture>
  <source srcset="produit.avif" type="image/avif">
  <source srcset="produit.webp" type="image/webp">
  <img src="produit.jpg" alt="..." width="1200" height="800" loading="lazy">
</picture>

La conversion doit être automatisée, côté serveur, via un outil comme Sharp ou Squoosh dans le pipeline de build, ou via un CDN d’images. La convertir à la main fiche par fiche n’est pas tenable.

5. Le lazy loading, sous la ligne de flottaison

Le lazy loading natif, loading="lazy", dit au navigateur de ne charger une image que lorsqu’elle approche de la zone visible. C’est un gain net sur le chargement initial d’une page longue avec beaucoup d’images, à une condition : ne l’appliquer qu’aux images situées sous la première vue. Sur les images du haut de page, logo compris, il ralentit l’affichage au lieu de l’accélérer.

Concrètement : lazy sur les images de bas de page, de pied de page, de sections lointaines ; eager sur tout ce qui est visible sans défiler. La plupart des CMS et plugins le gèrent, mais leur réglage par défaut est parfois « lazy partout », ce qui inclut à tort le haut de page.

En pratique

L’ordre qui rapporte : redimensionner à la taille d’affichage, poser des dimensions partout, sortir l’image LCP du lazy loading et lui donner la priorité, puis seulement convertir en AVIF avec repli, et enfin activer le lazy loading sous la ligne de flottaison. Le test de contrôle, images téléchargées plus grandes que leur taille rendue, vous dit à quelle étape vous êtes vraiment. Mettre en place ce pipeline sur un site existant, sans casser l’affichage ni la mise en page, est un travail d’accompagnement : je peux vous y aider, le détail est juste en dessous.