WebP et AVIF : des images plus légères pour votre site

Le rapport PageSpeed Insights de votre site vous recommande parfois d'utiliser des formats d'image de nouvelle génération. Derrière cette formule se cachent surtout deux sigles, WebP et AVIF, et une idée simple : la même image dans un fichier plus léger. Ce qui suit explique le format WebP, ce que l'AVIF y ajoute et la façon d'adopter ces formats sans rien casser.

WebP et AVIF en deux mots

Le WebP a été créé par Google et existe depuis 2010. Il compresse les photos comme les dessins, gère la transparence, comme le PNG, et peut même afficher des images animées, comme le GIF. À qualité visuelle comparable, ses fichiers sont nettement plus légers que ceux du JPEG ou du PNG.

L'AVIF, plus récent, repose sur la compression vidéo AV1. Il produit souvent des fichiers plus légers encore que le WebP, mais il demande plus de temps pour être créé et il est moins répandu dans les logiciels. L'écart varie d'une image à l'autre : seul un essai sur vos propres photos le mesure.

Ce que lisent les navigateurs et les logiciels

Les navigateurs courants affichent le WebP depuis plusieurs années. L'AVIF est lu par leurs versions récentes, et pas par les plus anciennes. Le site Can I use (caniuse.com) tient à jour la liste des navigateurs compatibles avec chaque format.

Pour ne laisser personne de côté, un site peut proposer plusieurs versions de la même image : le navigateur prend la première qu'il sait lire, et le JPEG sert de repli. Les outils de création de site gèrent ce mécanisme, ou votre prestataire le met en place.

Les navigateurs ne sont pas les seuls à ouvrir vos images. Certains logiciels anciens, services d'impression et messageries n'ouvrent pas ces formats. Pour l'image qui s'affiche quand on partage votre page et pour vos e-mails, restez en JPEG ou en PNG ; pour l'impression, utilisez l'original. Un client qui enregistre l'image d'une carte ou d'un produit obtient parfois un fichier .webp que son logiciel ne sait pas ouvrir : gardez le JPEG sous la main pour ceux qui vous le demandent.

Côté référencement, Google accepte les images WebP et AVIF dans ses résultats, et la légèreté de ces fichiers profite à la vitesse de vos pages.

Quel format pour quelle image

• Une photo : AVIF ou WebP, avec une version JPEG de repli.
• Un logo : le format SVG, un dessin qui reste net à toutes les tailles, quand votre outil l'accepte.
• Un produit détouré sur fond transparent : WebP ou AVIF, plus légers que le PNG.
• Une capture d'écran avec du texte : un WebP sans perte, ou un PNG, pour que les lettres restent nettes.
• Un GIF animé : une courte vidéo muette ou un WebP animé pèse en général beaucoup moins.

Convertir ses images

À la main

Squoosh, l'application web conçue par une équipe de Google, déjà citée dans l'article sur la compression des images, exporte en WebP comme en AVIF et traite l'image dans votre navigateur, sans l'envoyer à un serveur. Les logiciels de retouche courants savent aussi exporter en WebP. Évitez les convertisseurs en ligne pour des photos de personnes : le fichier part chez un tiers.

La marche à suivre est la même partout : ouvrez l'original, choisissez le format de sortie, réglez la qualité en comparant avec l'image d'origine, puis enregistrez la copie sous un nouveau nom.

Automatiquement

WordPress accepte le WebP depuis plusieurs années, et l'AVIF dans ses versions récentes si l'hébergement le permet. Des extensions convertissent toute la médiathèque et proposent la bonne version à chaque navigateur ; leur choix suit les règles de l'article sur les extensions WordPress. Les plateformes hébergées, comme Shopify ou Wix, convertissent en général les images d'elles-mêmes : consultez leur aide pour savoir comment elles procèdent.

Vérifier ce que votre site envoie déjà

Le plus simple est de poser la question à la personne qui l'entretient. Dans votre navigateur, les outils pour développeurs, onglet Réseau, indiquent le type de chaque image chargée. L'adresse d'un fichier peut se terminer par .jpg alors que le format réellement envoyé est un autre : ne vous fiez pas à l'extension seule.

Régler la qualité sans perdre ses originaux

Gardez toujours le fichier d'origine dans un dossier à part, et produisez les versions WebP ou AVIF à partir de lui. Chaque enregistrement avec perte dégrade un peu l'image, et vous aurez peut-être besoin plus tard d'une autre taille, d'un autre format ou d'un tirage papier.

Les curseurs de qualité ne se valent pas d'un format à l'autre : un même chiffre ne donne pas le même rendu en JPEG, en WebP et en AVIF. Comparez à taille réelle, en regardant les ciels, les dégradés et les contours, puis baissez la qualité par paliers et arrêtez-vous au premier défaut visible.

Ces formats ne dispensent pas des gestes de base : redimensionnez d'abord l'image à sa taille d'affichage, gardez un nom de fichier clair et un texte alternatif, et chargez les images du bas de page en différé, comme l'explique l'article sur le lazy loading.

Pour passer au WebP sans risque

1. Passez une page de votre site dans PageSpeed Insights, onglet mobile, et notez les images qu'il signale.
2. Convertissez trois grandes images, original sous la main, puis comparez le poids et l'aspect avant de remplacer les anciennes versions.
3. Affichez la page sur votre téléphone, dans une fenêtre de navigation privée, et vérifiez que tout s'affiche. Si votre site ne sait pas proposer ces formats, mentionnez-les dans le cahier des charges d'un nouveau site, dont le configurateur de devis donne le prix ferme.