Depuis peu, la vitesse de chargement d’une page web fait partie des principaux critères pris en compte par Google pour le positionnement de sites dans son moteur de recherche. À cet effet, il est conseillé de mettre en place sur son site des solutions de mise en cache, d’optimiser ses fichiers CSS, mais aussi les images. Et en parlant d’optimisation d’images, Google a introduit, depuis 2010, le format WebP qui permet d’avoir des fichiers moins, mais de bonne qualité.
De quoi s’agit-il et comment utiliser ce format d’image pour améliorer les performances de son site web ?
Qu’est-ce que le format WebP ?
Développé par l’équipe Google Developers et publié pour la première fois en 2010, le WebP est un format d’image qui a la particularité de compresser avec perte des images 24 bits sur le web. Il a été pensé comme nouveau standard libre pour les images en couleurs compressées et dans l’optique de remplacer les autres formats standards (JPG, JPEG, PNG…). Avec WebP, il est possible de réduire le poids d’une image de 25 à 30 % sans que celle-ci ne perde vraiment de sa qualité.
Ensuite, il faut souligner que c’est un format qui permet la compression avec ou sans perte. Autrement dit, vous pourrez obtenir une image très légère, mais qui n’aura plus la même qualité que l’originale (avec perte de pixels notamment). La compression sans perte, quant à elle, permet de réduire le poids de l’image, mais conserve les mêmes propriétés que l’originale en matière de qualité.
Le WebP prend aussi en charge le traitement d’autres formats d’images comme les images animées (GIF par exemple) et la transparence (PNG par exemple). De cette manière, vous pouvez l’utiliser pour réduire la taille de vos différentes images.
Mais si le WebP est aussi utile pour améliorer les performances d’un site web, pourquoi est-il encore peu utilisé ? En effet, même si ce format existe depuis une dizaine d’années maintenant, il peine encore à se démocratiser. Cela est notamment dû au fait que, durant un bon moment, d’autres navigateurs comme Firefox, Edge, Safari… ne prenaient pas en charge le WebP. Ce n’est qu’à partir de 2019 que Firefox et Edge ont ajouté le support de ce format d’image au niveau de leurs navigateurs.
En dehors de cela, ajoutons que sur les solutions de création de sites web (WordPress par exemple), vous devez d’abord passer par un plugin pour l’utiliser.
Ouvrir et convertir des fichiers WebP
Même si les navigateurs comme Google, Opera, Firefox et Edge prennent en charge les fichiers au format WebP, une fois téléchargés sur votre ordinateur, c’est toute une autre histoire. En effet, les programmes de visualisation d’images disponibles sur Windows, Apple (macOS) et Linux ne permettent pas pour le moment d’ouvrir une image WebP.
Pour ouvrir ce type de fichier, vous pouvez par exemple le glisser vers une nouvelle fenêtre de votre navigateur Google ou Opera. Les deux sont beaucoup plus recommandés, puisqu’ils prennent en charge le WebP de façon native. Même s’il s’agit d’une solution peu confortable, cela vous permettra quand même de visionner des images ou animations. L’autre solution consiste à utiliser la visionneuse gratuite d’images fixes IrfanView sur Windows. Pour cela, vous devez installer des plugins qui permettent la prise en charge du WebP.
Pour ce qui est de la conversion, vous trouverez dans l’espace développeur WebP plusieurs outils développés par Google. Il s’agit notamment de :
- dwebp, pour la conversion des fichiers WebP que vous avez téléchargés par exemple vers d’autres formats comme PNG, BMP, TIFF ou PGM
- cwebp, pour la compression d’une image PNG, JPEG et TIFF à l’aide du WebP. Comme indiqué un peu plus haut dans l’article, vous aurez la possibilité de choisir entre la compression avec perte et la compression sans perte
- gif2webp, pour la compression (avec ou sans perte) de fichiers GIF en fichiers WebP
- webpmux, pour la création d’animations au format WebP.
En dehors de ces outils développés par Google, il y a également un autre outil indispensable. La solution ezgif qui permet de créer ou de convertir des images ou animations au format WebP. Le principal avantage ici réside dans le fait que vous n’avez pas besoin de télécharger et d’installer un programme sur votre ordinateur. Tout le processus se fera en ligne dans votre navigateur.
Y a-t-il un avantage à utiliser des images WebP sur un site internet ?
WebP est un nouveau format d’image conçu pour créer des images visuellement identiques aux JPG (ou PNG), mais avec des tailles de fichier beaucoup plus petites. Le chargement et la navigation des sites internet sont donc plus rapides et cela est fortement apprécié de Google mais aussi des utilisateurs et internautes.
WebP est un nouveau format d’image proposé par Google. Il est conçu pour utiliser un algorithme de compression plus agressif et mieux optimisé que le JPG et le PNG, dans le but de réduire la taille des fichiers avec une perte de qualité minimale. Cela signifie que les sites Web sont plus rapides et consomment moins de bande passante. Cela fait le bonheur des visiteurs de votre site et celui de Google, qui favorise désormais explicitement les sites rapides par rapport aux sites lents dans son classement.
Mais les photographes tiennent aussi beaucoup à ce que leurs images soient les plus belles possibles. Une forte compression peut être très désagréable à regarder. Il faut donc toujours trouver un compromis entre la taille du fichier et la qualité de photo. Et c’est précisément à l’intersection de ces deux éléments que le format WebP est visé.
Google n’a pas cherché à réinventer le JPG. Il a racheté une société de codage vidéo et a découvert qu’une partie de cette technologie fonctionnait très bien sur les images fixes. Depuis, elle a mis les codecs en libre accès.
L’utilisation du format WebP présente deux grands avantages. Le premier est la réduction de la taille des fichiers sans perte de qualité perceptible. La taille des fichiers WebP par rapport à leurs équivalents JPG varie en fonction de plusieurs facteurs, mais Google avance les chiffres de 25 à 35 % de réduction. Google affirme que le passage des vignettes de Youtube au format WebP a entraîné une augmentation de 10 % de la vitesse des pages.
L’autre grand attrait de ce format est qu’il combine des caractéristiques qui n’ont jamais été réunies dans un seul format auparavant : il réunit les avantages distinctifs des formats JPG, PNG et GIF.
Il y a de fortes chances que vous ayez déjà vu des images WebP sans vous en rendre compte. Facebook l’utilise depuis un certain temps dans ses applications Android. Les vignettes de Youtube sont disponibles en WebP si vous les visualisez dans Chrome, Opera ou sur un appareil Android. Et si le pourcentage de sites web qui l’utilisent est relativement faible pour l’instant, il n’en reste pas moins qu’ils existent.
Lire les chiffres, c’est bien, mais nous étions curieux de voir si ces affirmations étaient réelles et, surtout, si cela valait la peine de convertir nos images en WebP et de les mettre à disposition sur notre site internet. Pouvait-on vraiment obtenir une réduction de 10 % de la taille de nos images tout en préservant leur qualité, notamment sur des photos de portrait ou de paysage ? Les résultats nous ont surpris !