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 94% des utilisateurs mondiaux supportent le format AVIF en fin 2024. Autant dire que tous les utilisateurs susceptibles de naviguer sur votre site web verront une image au format AVIF si elle est proposée.
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 diffusion d'image (comme Akamai ou Cloudinary) 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.
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.