AVIF ou JPEG XL

J’ai vu passer un billet de Jake Archibald à propos d’AVIF et JPEG XL. Ça tombe bien, j’étais en train de refaire mon site photo.

J’ai donc fait tourner un petit script pour voir ce que ça donnait chez moi. Plutôt que de regarder la qualité à poids équivalent, j’ai fait l’inverse. J’ai pris des scores SSIMULACRA2 assez hauts (70 et 80)¹, et j’ai comparé le poids des images qui correspondaient à ces scores.

Comme c’est un site photo, que je ne dépasse pas les 1500 images et que je peux me permettre de faire mouliner quelques heures, le temps de traitement m’importe peu. Je prends toujours les réglages les plus complets, donc les plus lents.

Codeurs

Là-dessus ça se dégage assez bien. Pour mes critères, il y a peu de doutes sur quoi retenir.

Format	Codeur retenu	Codeurs écartés
AVIF	avifenc aom	svt-av1, rav1e, libheif
JPEG XL	jixel	cjxl, gjxl
JPEG	jpegli	jpegli en xyb, mozjpeg, libjpeg-turbo

Dans mes essais, suivant par où je passais, j’ai pas mal lutté pour garder les profils de couleur.

La surprise, c’est par contre que, pour l’AVIF, les meilleurs résultats sont obtenus en 4:4:4 et en 10 bits. Je m’attendais à devoir faire du 4:2:2 en 8 bits.

Qualité

JPEG XL aurait la main s’il s’agissait uniquement de recompresser des JPEG existants sans autre modification, en particulier lorsqu’ils sont de qualité moyenne. Ça permettrait de ne pas ajouter les défauts d’AVIF à ceux, déjà présents, du JPEG.

Ce n’est pas mon usage. Je pars d’images source haute qualité qui ne devraient avoir aucun artefact visible, et l’objectif est en plus de les redimensionner avant d’en faire des exports web. L’optimisation sans perte de JPEG XL ne me sert pas ici.

Pour le reste, je fais confiance à SSIMULACRA2. Ce n’est pas parfait, mais pour mes cibles de qualité (70 et 80) les artefacts sont franchement limités donc je peux me passer d’une revue manuelle.

Poids

Sur mes tests, en progressif, il n’y a pas de grande différence entre AVIF et JPEG XL. Pour des images de 150 ko en haute qualité, l’AVIF est généralement, mais pas toujours, 10 ko plus lourd. Pour des fichiers plus petits, c’est généralement JPEG XL qui est plus lourd. Parfois la différence en pourcentage est significative, mais ça se traduit par au plus 1 ko.

Au final c’est peu significatif pour mon usage. Par contre, les deux produisent des images qui pèsent le plus souvent au moins deux fois moins lourd qu’un JPEG optimisé.

Compatibilité

AVIF est maintenant supporté partout. JPEG XL manque encore sur Edge et sur le navigateur Android de Samsung.

Le HTML permet cependant désormais de proposer différentes versions d’une même image, donc on peut très bien servir le bon fichier à chaque navigateur.

Progressif

La vraie perte par rapport au JPEG, ce sont les images progressives. C’est une fonctionnalité qui a parfaitement du sens pour un site photo. On peut servir un fichier lourd tout en affichant rapidement une première image, qui s’affine ensuite au fur et à mesure. C’est bien supporté et efficace.

Safari ne supporte le progressif que sur le JPEG historique. Firefox ne le supporte pas encore pour l’AVIF, même si on peut espérer que ça arrive. Chrome le supporte partout mais le décodage est bien plus lent sur les AVIF progressifs.

Le choix

Je vais utiliser du JPEG XL progressif pour les grandes tailles et de l’AVIF non progressif pour les petites tailles où ça a de toutes façons peu d’intérêt. Ça devrait couvrir au mieux la plupart des usages.

En JavaScript, je basculerai vers une version AVIF de grande taille pour Microsoft Edge et Samsung Internet. Au pire ils liront la version AVIF de petite taille donc je ne bloque personne.

C’est un site photo. Pour du courant vous avez plutôt intérêt à baisser bien plus le score de qualité, et les conclusions pourraient être bien différentes. ↩