Google I/O : le format d’images WebP

Au milieu de nombreux sujets abordés pendant la Google I/O, la présentation annuelle du géant du web, se glisse le format WebP (prononcez “weppy”). WebP n’est pas nouveau, il date déjà de 2010, mais il semble que Google souhaite le mettre en avant. C’est donc l’occasion de découvrir ce format qui a continué à être amélioré jusqu’à fin 2011, et qui approche enfin de la maturité.

Dans le monde des formats d’image du Web, pour faire simple, il y a JPEG, PNG, Gif, et le plus jeune SVG. Cette liste n’est pas exhaustive, mais elle reflète assez bien le contenu des sites que l’on visite le plus souvent. Chacun répond à un ou plusieurs critères techniques : la compression avec ou sans perte, la transparence, la mise à l’échelle, et l’animation. Cela ouvre une palette d’outils aux web designer selon leur besoin.

La qualité de l’image

Avant de parler de WebP, et de la manière dont il se situe par rapport à ces critères, il faut s’attarder sur la notion de qualité de l’image. Dans tous les cas le format est relativement indépendant de la qualité d’image perçue. La qualité est plutôt représentée par la quantité d’information véhiculée et affichée. Dans le cas de JPEG, PNG ou Gif la quantité d’information finale est liée à l’algorithme de compression, et en particulier au paramètre (celui que vous pouvez régler de 0 à 100 le plus souvent) qui détermine quelle quantité d’information on est prêt à perdre par rapport à la matrice initiale (la bitmap ). Et dans le cas de SVG la quantité d’information correspond à la quantité d’objets géométriques qui composent l’image. Dans les deux cas cette quantité d’information est reflétée par la taille du fichier. Autrement dit, en première approximation plus le fichier est gros, plus la qualité est élevée. Et réciproquement, pour avoir des images de qualité il y a un prix à payer : la taille des fichiers. C’est cette contrainte qualité vs. taille du fichier qui est à la base du développement du format WebP.

Et les développeurs de Google annoncent tout de suite la couleur : 31% de gain en moyenne sur la taille du fichier à qualité égale par rapport à JPEG, grâce à l’utilisation d’un nouvel algorithme de compression ! Ce gain, rapporté à la quantité d’images véhiculées sur Internet est énorme. Et si on considère plus spécifiquement l’Internet mobile, c’est une vraie bonne nouvelle.

Et ça ne s’arrête pas là. Ce gain ne serait pas acceptable dans une majorité des utilisations s’il constituait un retour en arrière sur les autres axes d’utilisation que sont la transparence (canal alpha) et dans une moindre mesure la possibilité de créer des animations (une séquence d’images affichées en boucle à un certain rythme). Là où ces fonctionnalités demandaient il y a encore peu de faire un choix judicieux de format, et en plus au détriment de la taille de fichier, WebP les réunit toutes. Avec WebP il est possible de faire à la fois de la transparence, de l’animation, et le tout avec les gains de taille mentionnés au paragraphe précédent. C’est une révolution (qui ne vient pas d’Apple).

Vous en voulez encore plus ?

Et bien ça ne s’arrête toujours pas là. Le format tel qu’il est serait déjà un bel aboutissement, et un excellent standard du Web, mais Google a décidé d’ajouter une fonctionnalité supplémentaire issue des bonnes pratiques du développement Web : les sprites . La notion de sprite consiste à fusionner plusieurs images, afin de n’avoir qu’un seul fichier à transférer entre le serveur et le client, en utilisant une technique de découpe (via CSS) pour réaliser l’affichage d’une seule des images. Cette technique qui est ancienne (pensez “Zelda” ou “Tetris”, et de manière générale quasiment tous les vieux jeux vidéos 2D) a de très nombreux avantages :

• elle diminue le nombre d’allers-retours du protocole HTTP entre le client et le serveur ;
• elle diminue aussi le nombre de sessions à créer si jamais ces allers-retours sont réalisés sur une longue période de temps (mise en cache côté client) ;
• elle décharge le serveur en nombre de fichiers et donc de handles de fichiers à gérer ;
• et elle permet une meilleure compression (compresser N fichiers est moins bon en général que de compresser un seul fichier contenant les N images, surtout quand elles ont tendance à se ressembler).

Et encore une fois, ça ne s’arrête pas là. La cerise sur le gâteau, c’est que la notion de sprites dans WebP s’accompagne d’une simplification de la syntaxe. Plus besoin de jongler avec les pixels dans vos CSS pour mettre en oeuvre un sprite avec WebP. Voici à quoi ressemble la syntaxe pour utiliser une stack de sprites  (source : Wikipedia) :

<img src="image-multiple.webp#image1" />
<img src="image-multiple.webp#image2" />

Les informations de positionnement sont donc désormais incluses dans le fichier lui-même. La vie de l’intégrateur Web est simplifiée. Le fichier WebP forme un tout cohérent.

En conclusion

Si on ajoute à tout ce qui précède la prise en compte de métadonnées, on se retrouve avec un format complet, moderne, facile à utiliser. Facebook ne s’y trompe pas qui a commencé à s’en servir depuis le 23 avril 2013. Le support est encore limité, et il faudra probablement attendre un peu pour que le format soit totalement intégré dans nos outils usuels et les navigateurs, mais Photoshop et Gimp (via un plugin) sont déjà sur les rangs.

Vous aviez voté pour Javascript, Ajax et le Web dynamique ? Vous avez été le premier à  adopter JQuery, les media queries et le responsive design en HTML5/CSS3 ? Vous avez tout de suite compris le potentiel du mobile ? Vous avez rendu votre site navigable même dans le métro parisien en heure de pointe grâce aux sprites ? Maintenant, imaginez ce que vous pourrez faire de plus encore pour l’expérience de vos utilisateurs avec WebP !