Utiliser AVIF ou WebP pour optimiser la web performance
Tous les experts en 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 de la réduction des images à leur taille affichée, l'ajout d'images réactives pour diffuser des médias optimisés sur mobiles, il est primordial d'utiliser des formats d'images modernes comme WebP ou AVIF.
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 50% en comparaison avec 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é
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é.
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 page comme WP Rocket se révèlera essentiel.
En tant que consultant web performance, je peux m'occuper d'installer, et de configurer ces extensions Wordpress web performance sur votre site web.
Comment exporter des images en WebP avec Photoshop ?
Si vous produisez l'outil Adobe Photoshop, il est possible d'exporter directement les images au format WebP depuis le logiciel.
Pour ce faire, utilisez le menu Fichier > Enregistrer une Copie, 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.
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.