Lors du dernier SEO Camp de Lyon, j’ai entendu parler d’un format que je ne connaissais pas bien le .webp. Oncrawl disait que Google le mettait en avant, mais avant de me précipiter dessus comme beaucoup avec guetzli, j’ai voulu le tester par moi-même.

Autant le SEO, je suis vraiment dedans depuis 2009/2010, autant l’image j’y suis depuis le tout premier photoshop, autant dire que je suis né avec :). Et une des choses qui m’horripile c’est de voir des sites avec des images non optimisées, surtout si le site en question est connu ! J’étais par ailleurs surpris de voir que ce n’est pas quelque chose qui semble faire paniquer les maniaques des webperfs préférant passer un temps pas possible sur les .js, mise en cache et tout le toutim, alors que le poids d’une image ça joue AUSSI sur l’expérience utilisateur.

Bien entendu, on ne peut pas tout savoir et je comprends qu’on puisse passer par des plugins, sites de compression et tools faisant le même bricolage pour gagner de la performance. Mais comme je l’avais expliqué ici, on ne traite pas de la même manière des styles d’images différentes comme des logos, photos ou illustrations. C’est pourquoi j’utilise de mon côté différents scripts PScript (Photoshop) pour traiter des lots d’images de même type, sinon je préfère le faire à la mano si le volume est acceptable.

J’ai donc voulu me pencher sur le cas .webp en le soumettant à mon crash test maison, sera t’il plus fort que le PS script ? 😀

Avant tout, c’est quoi le format .wepb ?

WebP est un format d’image employant à la fois une compression à perte et une compression sans perte . Il est actuellement développé par Google , basé sur la technologie acquise avec l’achat de On2 Technologies .

Le format a été annoncé pour la première fois le 30 septembre 2010 en tant que nouveau standard ouvert pour les graphiques True-Color compressés sur le Web, générant des fichiers plus petits de qualité d’image comparable au schéma JPEG ancien.  Le 3 octobre 2011, Google a annoncé un support WebP pour l’animation, le profil ICC , les métadonnées XMP et le carrelage (composition d’images très volumineuses au maximum de 16384 × 16384).

Le 18 novembre 2011, Google a commencé à expérimenter une compression sans perte et un support pour la transparence ( canal alpha ) dans les modes sans perte et en perte de poids ; Le support a été activé par défaut dans libwebp 0.2.0 (16 août 2012).   Selon les mesures de Google, une conversion de PNG vers WebP entraîne une réduction de 45% de la taille du fichier en commençant par les PNG trouvés sur le Web et une réduction de 28% par rapport aux PNG recomprimés avec pngcrush et PNGOUT

Comment enregistrer au format .wepb ?

Pour exporter vos images en format .webp vous avez plusieurs solutions :

-Utiliser un plug-in dans un navigateur : https://addons.mozilla.org/fr/firefox/addon/online-convert/?src=search

-Utiliser un compresseur en ligne : http://image.online-convert.com/fr/convertir-en-webp

-Utiliser l’extension officielle de Photoshop : http://telegraphics.com.au/sw/product/webpformat

Pour ma part, je préfère évidemment la solution via Photoshop mais pour des besoins plus faméliques, la solution plug-in dans le navigateur est pas mal.

Passons au test de ce .Wepb et voici les résultats

Nous voilà donc armés pour tester le joujou, je suis parti sur 4 tests :

*Un test sur une page déjà optimisée

Autant allez directement dans le vif du sujet, webp gardant la qualité de l’image initiale intacte a priori, je l’ai soumis à une page d’un de mes sites e-commerce qui est déjà bien optimisée. J’ai flouté les images, vous m’en excuserez 😉

J’ai donc traité toutes les images de la page : .jpeg, .gif et autres .png et je constate un gain considérable de près de 46% avec une qualité identique ! Je suis scotché ! Mais je poursuis les tests pour m’en rendre compte.

*Un test sur une page non optimisée

Une classique page catégorie ecommerce avec beaucoup, beaucoup, de produits… les images n’ont pas de compression particulière car les équipes ne la considère pas comme stratégique. Du coup, elle était idéale pour la démonstration de ce test webp 😀

Là la différence est colossale avec un poids réduit de 79% ! Je crois que celà reflète la plupart des sites existants.

*Un test sur un site connu

Allez, je vais volontairement prendre un site très connu qui a déjà de bonnes perfs : Amazon :). Je suis parti sur la home des livres, quelque chose que le géant vend en propre et voici les résultats :

Hallucinant, n’est-ce pas ? 🙂 On peut être un « GAFA » et avoir une compression merdique.

*Un test sur une image en particulier

Ce test vous aide surtout à voir la compression en « grand », il s’agit de screenshot pour que l’on puisse comparer. J’ai pris la dernière bouille de @romualdparis pour l’exercice 😉

Est-ce que les images .webp rankent ?

On est quelques-uns à s’être étonnés de ne pas avoir vu des images .webp dans Google images notamment. Si la méconnaissance de ce format peut l’expliquer pour le moment, pourquoi ne pas en voir davantage ?

Une des raisons c’est que l’on ne regarde pas forcement la terminaison du fichier dans l’onglet images, certes, mais force est de constater que c’est plutôt le désert de ce côté. @Jessyseonoob m’avait envoyé un exemple que je vous mets ci-dessous mais la présence du webp est pour le moment famélique. Quoiqu’il en soit on peut juste dire que les images .wepb peuvent ranker. N’oubliez pas que le contexte sémantique de votre page et un bon alt ce sont les 2 facteurs ESSENTIELS pour faire positionner une image dans google.

Mais si vous avez des exemples, je suis preneur pour compléter ces tests.

Quels navigateurs sont compatibles ?

Si le webp c’est si génial, pourquoi alors il ne s’est pas imposé de lui-même ? La réponse la voici :

Le site « Caniuse » (bible en la matière), montre que la plupart des plus gros navigateurs ne sont pas encore compatibles. Pas terrible par exemple quand on est un site ecommerce.

Autre point, le plus gros CMS du monde (WordPress) ne mange pas non plus de .webp en natif.

Si on ajoute à celà la non-connaissance de ce format par le grand public, on peut dire que l’usage massif du webp ce n’est pas pour tout de suite.

Pourquoi le standard .wepb risque néanmoins de s’imposer ?

Ce que tout le monde oublie, c’est que derrière ce format, c’est Google. Et quand il s’agit d’améliorer les temps de chargement d’un site et de garder l’utilisateur chez lui, il ne se gêne pas pour pousser des technologies (responsive design, https…) quitte à mettre en avant de manière indécente ses produits (comme l’AMP par exemple).

Généralement quand la firme de moutain view communique sur une solution, de nombreux sites se plient à la sainte parole et migrent vers la techno proposée (parfois aveuglement mais bon…). Tout celà pour dire, vous l’avez compris, que le standard .webp risque bel et bien de devenir incontournable dans quelques temps. Stay Tuned !

Pour en savoir plus, je vous invite à regarder la (vieille) conf’ de Google à ce sujet :