Photo de Paul Delcloy, consultant en web performance
Photo de Paul Delcloy, consultant en web performance
Publié le 27/09/2023 à 17:00, dernière mise à jour le 10/05/2024.

Utiliser AVIF ou WebP pour optimiser la web performance en 2024

Tous les experts web performance dénoncent les images comme la raison principale d’une mauvaise expérience utilisateur sur un site web. En réalité, il s'agit surtout du problème le plus simple à régler en web performance puisque les images représentent en moyenne 50% du poids total de la page web.

En plus du dimensionnement des images à leur taille affichée aux utilisateurs et de l’ajout d’images réactives permettant de diffuser des médias optimisés sur mobiles, il est primordial d’utiliser des formats d’images modernes comme WebP ou AVIF.

Illustration de l’article : images WEBP ou AVIF, que choisir ?

Le format WebP : un changement important

Google a lancé en 2010 le format WebP pour le web afin d’accélérer les temps de chargement des site web. Le format WebP permet d’afficher des images de qualité avec des tailles de fichiers inférieures aux format les plus connus : le JPG ou le PNG.

Les images WebP sans perte sont jusqu’à 34% plus légères que les PNG.

Le format AVIF : la révolution des images en ligne

AVIF est un nouveau format d’images basé sur le codec video AV1. Le format AVIF propose une compression encore plus importante que le WebP (je vous laisse imaginer par rapport au PNG ou au JPG).

Même s'il est difficile d’estimer avec précision le gain de poids puisqu'il dépend du contenu du media, des paramètres d’exportation et de la qualité visée, le gain constaté est de l’ordre de 26% en comparaison avec le PNG, 25 à 34% plus légères que le JPG.

Le support du format s'est largement élargi en 2023 avec le support de Safari. , environ 83.35% des utilisateurs mondiaux supportent le format AVIF, c’est un bon score mais il ne faudrait pas que les utilisateurs utilisant des navigateurs incompatibles ne puissent voir les images sur les pages de votre site web.

L’importance de la diversité des formats d’images

Il n'y a pas besoin de faire le choix sur les formats à proposer à vos utilisateurs, l’utilisation de la balise <picture> permet de proposer tous les formats que vous souhaitez à vos utilisateurs.

En proposant les formats AVIF, WebP et JPG (ou PNG si la transparence est nécessaires pour le visuel concerné), vous vous assurez que l’utilisateur puisse voir votre image et que le format le plus léger compatible avec son navigateur soit utilisé.

En Mars 2024, Google laisse entendre que GoogleBot (utilisé pour crawler les pages de votre site web) ne supporte pas le format AVIF, cette annonce réaffirme l'importance de continuer à diffuser le plus de formats possibles.

L’optimisation des images améliorera significativement la web performance de votre site. Si vous en proposez, pensez également à la possibilité d’optimiser vos vidéos, en proposant des formats WebM et AV1 en plus du MP4.

Comment proposer des images en WebP sur Wordpress ?

Sur Wordpress, il est possible d’utiliser des extensions comme permettent d’optimiser vos images en masse, mais aussi de les tranformer en WebP.

Afin de proposer le format sans modification dans le code source de votre site, Imagify va modifier le DOM de la page dynamiquement, un plugin de cache comme WP Rocket se révèlera essentiel afin de ne pas ralentir le temps de réponse serveur de votre site.

En tant que consultant web performance, je peux m'occuper d’installer, et de configurer ces extensions Wordpress dédiées à l'amélioration de la web performance Wordpress.

Comment transformer des images en WebP ou AVIF en ligne ?

De nombreux outils en ligne permettent de transformer une image PNG ou JPG dans des formats AVIF ou WebP. Personnellement, j’utilise le site gratuit , mais de nombreuses alternatives gratuites existent.

Pour les plus gros acteurs, il est également possible de travailler avec des entreprises spécialisées en traitement d'image qui s’occupent d'optimiser à la volée vos médias placés dans des buckets à l'aide de paramètres (poids, taille, format, crop, ...) dans les URLs des médias de votre site.

Comment exporter des images en WebP avec Photoshop ?

Si vous produisez des visuels ou des images depuis l’outil Adobe Photoshop, il est possible d’exporter directement les images au format WebP depuis le logiciel.

Tutoriel : enregistrer une une image en WebP dans Photoshop

Pour ce faire, utilisez le menu Fichier, enregistrer une copie (ou utilisez le raccourci Alt + Ctrl + S), sélectionnez l’emplacement souhaité, et le format WebP dans le menu déroulant. Testez les différentes qualités afin de déterminer celle qui vous contente, les exigences de chacun peuvent être différentes.

Je suis prêt à relever tous les défis, et vous ?