Optimiser son site en utilisant le format d'image WebP
Nicolas, Directeur artistique, UX / UI Designer 2 juin 2023
Nicolas, Directeur artistique, UX / UI Designer 2 juin 2023
Depuis la démocratisation d’internet à la fin des années 90, les formats d’images de référence ont été JPG, PNG ou encore GIF. Ces derniers ont traversé deux décennies sans qu’une réelle concurrence ne vienne les bousculer. Pourtant en coulisses, de nombreux acteurs ont développé des formats tous plus intéressants les uns que les autres. Mais ils n’étaient pas compatibles avec la majorité des navigateurs web et ne pouvaient donc pas être considérés comme une alternative réelle. Cela a néanmoins changé et il est grand temps de faire entrer votre site dans l’ère moderne avec le WebP !
Le format WebP est un format d’image développé par Google. Bien qu’il soit apparu dès la fin 2010, il ne s’est imposé comme nouveau standard que depuis 2020. C’est le temps qu’il a fallu pour que l’ensemble des navigateurs (Chrome, Safari, Edge, Firefox, Opera…) le prenne en charge. En mai 2023, 97,6% des utilisateurs utilisent un navigateur web gérant le WebP !
Voici les caractéristiques et atouts du format WebP :
Ci-dessous voici une comparaison entre une image JPG et son équivalent WebP. Vous pouvez cliquer sur les images pour les comparer en haute-définition. Comme vous pouvez le constater les images sont extrêmement proches en termes de rendu, mais la version WebP divise le poids du fichier par 2 !
Image en JPG (cliquez pour agrandir)
Image en WebP (cliquez pour agrandir)
Vous l’aurez sans doute compris, le format WebP peut avoir un impact très positif sur votre site web à plusieurs niveaux :
Grâce à sa meilleure compression, le poids des images affichées sur vos pages sera allégé. Sachant que les images représentent bien souvent une grande partie du temps de chargement d’une page web, votre site chargera désormais beaucoup plus vite. Et cela améliora grandement l’expérience utilisateur, ce qui m’amène au point suivant.
Naturellement en offrant des chargements plus rapides à vos utilisateurs, la navigation devient plus fluide et l’envie de rester sur votre site augmente. C’est alors votre taux de rebond qui baisse comme le montre cette étude de Google. Et dans le cadre d’un site e-commerce, il a été démontré que, plus un site charge vite, plus la conversion a tendance à augmenter. Un site qui se charge en une seconde convertit en moyenne 2,5 fois plus qu’un site se chargeant en 5 secondes, selon cette étude de Portent.
Le poids des pages joue un rôle de plus en plus important dans le référencement naturel d’un site web. En tant que créateur initial du format WebP, Google recommande fortement de l’utiliser. Si vous suivez cette bonne pratique, votre SEO n’en sera que meilleur.
Comme le format WebP bénéficie d’algorithmes de compression plus efficaces que les formats Bitmap historiques (JPG, PNG…), vous pouvez proposer une meilleure qualité d’image à poids égal.
En proposant des pages plus légères, vous baissez automatiquement la consommation de bande passante de votre site web. Et vous contribuez donc à limiter l’empreinte carbone du numérique.
Tous ces bénéfices vous ont certainement donné envie d’intégrer des images au format WebP dans votre site ou application. Ça tombe bien, on vous explique comment le faire ci-dessous.
Comme nous vous l’indiquions en début d’article, les images au format WebP seront visibles par 97,6% des utilisateurs. Il reste potentiellement 2,4% d'entre eux qui ne les verront pas. C'est la raison pour laquelle vous devez continuer de proposer vos images en deux formats. La solution la plus simple étant d'utiliser dans le code de votre site une balise picture qui contiendra à la fois la source de base (JPG, PNG ou GIF) et la source WebP.
Voici un exemple simple :
<picture>
<source srcset="image.webp" type="image/webp" />
<source srcset="image.jpg" type="image/jpeg" />
<img src="image.jpg" alt="Description de l'image" />
</picture>
Notez qu’il faut bien spécifier le “type” de l’image au navigateur. Il est également important de placer la ligne associée au WebP avant celle de son équivalent JPG. En effet, le navigateur parcourt le code de votre page de haut en bas. Avec le code ci-dessus, il va faire le raisonnement suivant :
Si vous souhaitez en savoir plus sur la balise picture et son usage pour créer des sites responsives parfaitement optimisés, consultez cet article sur notre blog.
Ajouter un nouveau format d’images à votre site nécessite des ajustements tant en développement back (génération d’images supplémentaires) qu’en développement front, et cela aura donc un coût. Dans le cadre d’une refonte, pensez directement à inclure le format WebP à votre cahier des charges.
Une fois les bons développements effectués, chaque image que vous ajouterez sera stockée sur votre serveur dans sa version WebP et sa version de base (JPG, PNG ou GIF). Vous n’aurez donc pas d’action particulière à faire vous même au préalable.
Différents groupes ou alliances d’experts développent en permanence de nouveaux formats d’images. Il est ainsi certain que le WebP sera à son tour remplacé d’ici quelques années.
Voici quelques uns des principaux “concurrents” :
L’univers de la compression d’images (et de vidéos) est en perpétuelle évolution et des solutions toujours plus efficaces apparaissent sur le marché. Une fois compatibles avec les navigateurs web, vous n’avez plus aucune excuse pour ne pas les utiliser tant celles-ci regorgent d’atouts qui favorisent la rapidité, la popularité et au final la conversion de votre site ou application.
