Vous téléchargez une image sur le web et vous vous retrouvez avec un fichier WebP ou AVIF que votre logiciel de retouche refuse d’ouvrir ? Vous vouliez juste une image en JPG ou PNG normale quoi, mais ce foutu site vous force à récupérer un format trop récent pour votre logiciel graphique préféré, genre Photoshop. C’est la lose !
Heureusement, voici
WebP / Avif image converter
, une extension Firefox développée par Nullbrains qui règle ce souci en un clic droit. L’idée est simple, vous faites un
Vous téléchargez une image sur le web et vous vous retrouvez avec un fichier WebP ou AVIF que votre logiciel de retouche refuse d’ouvrir ? Vous vouliez juste une image en JPG ou PNG normale quoi, mais ce foutu site vous force à récupérer un format trop récent pour votre logiciel graphique préféré, genre Photoshop. C’est la lose !
Heureusement, voici
WebP / Avif image converter
, une extension Firefox développée par Nullbrains qui règle ce souci en un clic droit. L’idée est simple, vous faites un clic droit sur n’importe quelle image WebP ou AVIF, vous choisissez “Convert and save image” dans le menu contextuel, et l’extension convertit automatiquement l’image en JPG ou PNG avant de l’enregistrer sur votre disque.
L’extension propose des réglages avancés pour la qualité de l’image et la conversion. Vous pouvez configurer l’emplacement de téléchargement et le nom du fichier. Elle supporte également d’autres types d’images au-delà de WebP et AVIF et les permissions demandées sont assez standards : stockage, téléchargements, menus contextuels, et accès à toutes les URLs pour pouvoir convertir les images de n’importe quel site.
Malgré ses avantages, WebP a une compatibilité limitée. Bien que les navigateurs modernes comme Chrome, Firefox et Edge le supportent, certains logiciels et anciens navigateurs ne le prennent pas en charge. Et pour AVIF, c’est encore pire puisque le format est encore plus récent.
D’ailleurs, ce format mérite qu’on s’y attarde deux secondes. C’est celui que j’utilise ici sur mon site car AVIF combine une qualité d’image exceptionnelle avec des fichiers ultra-légers. Publié en 2019 par l’Alliance for Open Media, il compresse 30% mieux que WebP et jusqu’à 50% mieux que JPEG. Et tous les navigateurs modernes le supportent ! Même WordPress a même ajouté le support AVIF nativement.
Mais bon, même si tous ces nouveaux formats sont très cools, si vous en avez marre de jongler avec des convertisseurs en ligne qui vous limitent à 5 images par jour, cette extension Firefox fera le boulot discrètement. Un clic droit, une conversion, et vous avez votre JPG ou PNG à l’ancienne, prêt à l’emploi
XL-Converter est un utilitaire graphique pour convertir vos images en formats utilisables sur Internet. Outre les classiques JPEG et PNG il y a donc AVIF, WEBP et JPEG-XL. L’outil se veut ergonomique avec un minimum d’options pratiques. Par exemple on peut indiquer une dimension ou un poids maximum pour les images. À mes yeux, l’intérêt d’XL-Converter c’est surtout le format Jpeg. Pourquoi ? parce que ce format est loin d’être mort : tout en travaillant sur Jpeg-XL, les chercheurs suisses de Goo
XL-Converter est un utilitaire graphique pour convertir vos images en formats utilisables sur Internet. Outre les classiques JPEG et PNG il y a donc AVIF, WEBP et JPEG-XL. L’outil se veut ergonomique avec un minimum d’options pratiques. Par exemple on peut indiquer une dimension ou un poids maximum pour les images. À mes yeux, l’intérêt d’XL-Converter c’est surtout le format Jpeg. Pourquoi ? parce que ce format est loin d’être mort : tout en travaillant sur Jpeg-XL, les chercheurs suisses de Google ont développé un nouvel algorithme d’encodage du Jpeg classique, et cet algo est très performant.
Jpegli, le nouvel algo, tire son nom du jargon suisse, tout comme guetzli, butteraugli, etc. par la même équipe. Il est inclus dans la version 0.10 de la libjxl, la bibliothèque de référence pour Jpeg-XL (c’est normal il en réutilise du code). Et par là, il se retrouve l’encodeur Jpeg de XL-Converter.
Nos accès Internet deviennent sans cesse plus rapides, la puissance et la Ram sur nos ordis augmentent de même, les nuisances énergétiques itou. Ça m’importe. Et même si les nuisances vous indiffèrent, vous vous êtes peut-être déjà retrouvé pris au piège d’une zone blanche, ou bien sur une île surpeuplée de touristes en été, ou bien dans un pays lointain aux prises avec un vieil ordi malmené par les débits inconstants et la lourdeur de votre site web préféré, bref dans ma peau. La situation est tout de même assez commune pour qu'un des critères majeurs de bon référencement des pages web sur Google soit le temps de chargement et d’affichage1.
Normalement vous savez qu’il y a plusieurs facteurs là-dedans, matériels, logiciel et humain. Humain, voilà ce qui nous intéresse. C’est l’humain qui fait l’effort de soigner son code, d’utiliser un format qui décompresse vite, de redimensionner ses images et de compresser suffisamment, en acceptant des pertes que l’autre internaute ne verra jamais sur un écran non calibré, salis par les doigts, sous un éclairage douteux et le plus souvent coloré (dans les villes).
Il y a quelques mois, je pensais vous décrire les merveilles de Mozjpeg : les premières versions de Webp n’avaient pas convaincu Mozilla qui avait proposé un nouvel algo et un nouvel outil, plutôt efficace. En remplaçant purement et simplement la libjpeg, les gains en compression était du même niveau que Webp (à l’époque), mais pour ceux qui aimaient jongler avec les paramètres2, les gains étaient et sont toujours bien meilleurs. Tout le monde n’étant pas imageo-technophile, les feignants pouvaient se contenter d’utiliser ImageOptim pour un résultat équivalent.
Aujourd’hui, même les feignants n’ont pas d’excuses : Jpegli est super simple à utiliser3, plus rapide et meilleur que Webp ou Avif, produit beaucoup moins d’artefacts classiques du Jpeg et se décode à la vitesse de l’éclair puisque c’est du Jpeg normal. Et au sein d’XL-Converter c’est de la balle.
Je n’ai rien de plus à dire. En attendant Jpeg-XL dans tous nos navigateurs, Jpeg à la sauce Jpegli c’est trop bon, mangez-en.
En apéritif, goûtez donc cette petite note du divin Jon Sneyers :
More recently, the JPEG-XL team at Google has built yet another JPEG encoder, jpegli, which is both faster and better than even mozjpeg. It is based on lessons learned from guetzli and libjxl, and offers a very attractive trade-off: it is very fast, compresses better than WebP and even high-speed AVIF, while still producing good old JPEG files that are supported everywhere.
voir ce paragraphe dans la doc sur les Core Web Vitals de Google. ↩
On est tous là avec nos formats d’images d’avant la guerre, à savoir le JPEG, le PNG et le WebP alors qu’il existe des trucs beaucoup plus efficaces aujourd’hui en 2024. L’objectif de cet article est donc de vous les présenter.
Le premier s’appelle AVIF (AV1 Image File Format) qui est basé sur le codec vidéo AV1, très connu pour son efficacité en termes de compression. L’AVIF est très adapté pour tout ce qui est images pour les sites web, mais également pour tout ce qui est images animées.
On est tous là avec nos formats d’images d’avant la guerre, à savoir le JPEG, le PNG et le WebP alors qu’il existe des trucs beaucoup plus efficaces aujourd’hui en 2024. L’objectif de cet article est donc de vous les présenter.
Le premier s’appelle AVIF (AV1 Image File Format) qui est basé sur le codec vidéo AV1, très connu pour son efficacité en termes de compression. L’AVIF est très adapté pour tout ce qui est images pour les sites web, mais également pour tout ce qui est images animées. Ça en fait donc une bonne alternative aux GIF animés et surtout, de très nombreux navigateurs modernes le supportent déjà.
L’autre format c’est le JXL qui n’est ni plus ni moins que la contraction de JPEG et de XL. Celui-ci est conçu pour compresser efficacement les photos avec ou sans perte selon ce que vous choisissez, tout en préservant une très haute résolution (au-delà du milliard de pixels si ça vous chante) avec plein dé détails. L’algo qui permet d’encoder les images en JXL est d’ailleurs jusqu’à 10 fois plus rapide que celui d’AVIF.
Ces deux formats qui supportent tous les deux la transparence, sont sortis vers 2019 et sont open source et non commerciaux. Alors c’est bien beau tout ça, mais comment on fait pour convertir nos images dans ces formats ? Et bien logiquement, n’importe quel outil de traitement d’image un peu récent peu le faire, mais autrement, y’a des outils.
Pour l’AVIF, vous pouvez utiliser les outils cavif-rs ou encore FFMPEG. Cavif-rs ce sera plus pour les images statiques et FFMPEG pour les gifs animés.
Prenons cette image PNG pour un beau fond d’écran de 1,9 Mo et d’une résolution de 1456 × 816 pixels :
En la convertissant en AVIF à l’aide de la commande suivante :
On obtient la même image, avec la même résolution sauf qu’elle pèse maintenant 77 ko. Je vous l’intégre dans mon WordPress pour que vous voyiez que c’est bien supporté par votre navigateur, mais comme WordPress ne supporte pas encore nativement ce format, le rendu est un peu cra-cra :
Je ne vous avais pas menti, c’est sacrément efficace. Dommage pour moi, ce format n’est pas supporté par mon WordPress, donc je ne peux pas encore l’intégrer à mon article.
Passons maintenant à une image animée avec FFMPEG. Je prends ce GIF de 1,1 Mo :
Avec FFMPEG, je dois d’abord convertir le format des pixels en yuv420p qui est un format de couleur très utilisé pour la vidéo et compatible AVIF :
Ensuite, il faut installer la lib avif comme ceci sous Linux :
sudo apt install libavif-bin
Comme ça sous mac :
brew install libavif
Ensuite armé de ce fichier y4m, je peux alors appeler l’outil d’encodage avifenc qui va alors le convertir en AVIF animé :
avifenc happy.y4m happy.avif
Et voilà, je me retrouve avec la même image animée sauf qu’elle pèse 45 ko. C’est magique.
Pour le format JXL c’est encore plus simple, puisqu’il y a un outil officiel à télécharger ici. Si vous êtes sous mac, vous pouvez même l’installer comme ceci :
brew install jpeg-xl
Ensuite, y’a plus qu’à appeler la commande comme ceci avec le paramètre lossless afin de n’avoir aucune perte :
Je passe donc d’un fond d’écran de 1,9 Mo en PNG au même fond d’écran de 202 Ko. Voici l’incrustation de ce JXL :
Après si vous avez la flemme de jouer avec tous ces outils sachez que ezgif dont je vous ai déjà parlé ici, propose des convertisseurs pour l’AVIF et le JXL.
D’ailleurs, si vous vous demandez comment je l’ai intégré, et bien, il existe une astuce qui permet d’avoir un rendu de JXL ou d’AVIF avec une image PNG en secours pour les anciens navigateurs qui ne supporteraient ni le AVIF ni le JXL.
Bref, tout ça pour dire que les résultats en matière de qualité et de compression avec JXL et AVIF sont assez phénoménaux que ce soit avec perte ou non de qualité. Je vous encourage fortement à adopter ces futurs standards même si pour le moment, c’est encore un peu roots, mais c’est déjà bien supporté sur les navigateurs récents du marché, donc pourquoi s’en priver. J’espère que WordPress le supportera également nativement rapidement, comme ils l’ont fait pour le webp.
Connexion
