WebP, AVIF : faut‑il changer le format de ses images ?

Les images représentent en général plus de la moitié du poids d’une page. C’est donc le premier endroit où chercher, et de loin le plus rentable. Encore faut‑il savoir ce qui compte vraiment.

Quel est le vrai problème des images ?

Presque jamais le format. Ce sont les dimensions.

Une photo de téléphone fait 4 000 pixels de large et pèse 3 Mo. Affichée dans un cadre de 800 pixels, elle est téléchargée en entier avant d’être réduite à l’écran. Le visiteur paie les 3 Mo pour voir l’équivalent de 150 Ko.

Redimensionner une image avant de la déposer fait gagner davantage que tous les réglages d’optimisation réunis.

WebP, AVIF : faut‑il changer de format ?

Ce sont deux formats plus efficaces que le JPEG à qualité égale :

• WebP : environ 30 % plus léger, reconnu partout depuis 2021.
• AVIF : environ 50 % plus léger, mais plus lent à fabriquer.

Le WebP est le bon compromis aujourd’hui. La conversion se fait automatiquement, sans modifier votre façon de travailler.

Quelles dimensions viser ?

• Image de bandeau : 1 600 px de large au maximum.
• Photo d’article : 1 200 px suffisent largement.
• Fiche produit : 1 200 px, sauf si vous proposez le zoom.
• Logo et pictogrammes : en SVG, sans limite de taille.

Au‑delà de 200 Ko par image, il y a presque toujours quelque chose à corriger.

Qu’est‑ce que le chargement différé ?

Le lazy loading retarde le téléchargement des images situées plus bas dans la page, jusqu’à ce que le visiteur y arrive. Sur une page longue, c’est considérable.

Une exception, et elle est importante : la première image visible ne doit jamais être différée. La retarder dégrade directement le LCP, donc la note de vitesse.

Que faire des images déjà en ligne ?

Une extension de conversion s’occupe du passé et de l’avenir : elle traite la bibliothèque existante et convertit les nouveaux envois. Le travail se fait une fois.

Prenez soin de conserver les originaux : une image compressée ne se décompresse pas, et vous en aurez besoin le jour d’une refonte.

Sur le même sujet : Faut‑il précharger ses ressources ? · Comment mesurer le poids réel d’une page ?