Optimiser son site en utilisant le format d'image WebP

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 !

Les caractéristiques du format 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 :

• A qualité d’image équivalente, il réduit le poids des fichiers d’environ 25% à 35% par rapport aux formats JPG et PNG grâce à des algorithmes de compression plus performants.
• Il gère la transparence (couche alpha) et peut donc parfaitement remplacer un PNG ou GIF
• Il peut être animé et donc remplacer un GIF. Surtout que le poids du fichier sera réduit tout en conservant une meilleure qualité d’image.
• Il peut contenir de nombreuses métadonnées liées à l’image : son auteur, son titre, sa description, ses informations sur le droit d’auteur, ou encore des tags associés.

Comparaison entre une image JPG et 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)

Pourquoi utiliser WebP sur votre site web ?

Vous l’aurez sans doute compris, le format WebP peut avoir un impact très positif sur votre site web à plusieurs niveaux :

Booster les performances de votre site

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.

Améliorer votre conversion et taux de rebond

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.

Améliorer votre référencement naturel

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.

Proposer une meilleure qualité d’image à vos utilisateurs

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.

Baisser l’empreinte carbone de votre site web

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.

Intégrer des images WebP en HTML avec la balise picture

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 :

• Une image WebP existe. Si je gère le WebP, j’affiche cette image, sinon je continue.
• Une image JPG existe. Si je ne gère pas le WebP, j’affiche celle-ci.

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.

Comment obtenir des images en WebP ?

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.

Quels formats d’images demain ?

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” :

• AVIF (AV1 Image File Format) : développé par le réputé consortium Alliance for Open Media, AVIF optimise encore davantage la compression et vous permet donc d’obtenir des images de qualité tout en réduisant le poids par rapport à WebP. Son adoption est rapide : plus de 81% des utilisateurs disposent d’un navigateur web compatible.
• HEIF (High Efficiency Image Format) : développé par le groupe de travail Moving Picture Experts Group, ce format performant n’est malheureusement pas encore compatible avec les navigateurs. Mais Apple l’utilise sur ses propres appareils depuis 2017, lui donnant donc une certaine popularité.
• JPEG XL : développé par le Joint Photographic Experts Group, JPEG XL semble être le format le mieux armé pour s’imposer à long-terme mais il n’est pas pris en charge par les principaux navigateurs web du marché à l’heure actuelle. Sa compression est plus qualitative que le AVIF et ses caractéristiques plus complètes. Voici un article comparant JPEG et AVIF.

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.