Catégories
Astuces et Design

Trois choses que vous ne saviez pas sur AVIF

AVIF, le format de fichier basé sur le codec vidéo AV1, est le dernier ajout aux formats d'image de nouvelle génération. Les premiers rapports et comparaisons montrent de bons résultats par rapport à JPEG et WebP. Cependant, même si la prise en charge du navigateur est bonne, AVIF est toujours sur le bord de saignement en ce qui concerne l'encodage et le décodage. L'encodage, le décodage, les réglages et les paramètres ont été bien discutés ailleurs.

Sans aucun doute, les images AVIF génèrent une charge utile plus petite et sont belles. Dans cet article, nous examinerons de plus près les problèmes à prendre en compte ou avant de vous lancer dans AVIF.

1. WebP est meilleur pour les miniatures

Une observation intéressante est que pour les images de petite dimension, WebP produira des images de charge utile plus légères que AVIF.

Il est probablement possible d’expliquer pourquoi et de régler l’encodeur pour résoudre ce cas. Cependant, ce n'est pas une option pour la plupart des gens. La plupart des gens utiliseraient probablement un optimiseur d'image comme squoosh.app ou un CDN d'image comme ImageEngine. La comparaison ci-dessous utilise exactement ces deux alternatives pour la conversion AVIF.

Nous voyons que WebP produira généralement des images avec une taille de fichier supérieure à AVIF. Sur les images de plus grande dimension, ImageEngine fonctionne nettement mieux que squoosh.app.

Passons maintenant à l'observation intéressante. Sur des images d'environ 100px × 100px squoosh.app passe ImageEngine sur l'efficacité, mais WebP rattrape également et pour une image 80px x 80px. WebP est en fait l'image la plus efficace mesurée en taille de fichier.

Le test fonctionne de manière relativement cohérente sur différents types d'images. Pour cette illustration, cette image de Picsum est utilisée.

Pixels JPEG d'origine (octets) WebP optimisé (octets) ImageEngine AVIF (octets) squoosh.app AVIF (octets)
50 1 475 598 888 687
80 2 090 1 076 1 234 1 070
110 3 022 1 716 1 592 1 580
150 4 457 2 808 2 153 2 275
170 5 300 3 224 2 450 2 670
230 7 792 4 886 3 189 3 900
290 10 895 6 774 4 056 5 130

2. AVIF n'est peut-être pas le meilleur pour les images de produits avec une forte entropie

En règle générale, une page de produit se compose d'images du produit, et lorsque la souris d'un utilisateur survole ou clique sur l'image du produit, il effectue un zoom avant pour offrir un examen plus détaillé des détails.

Il convient de noter que l'AVIF réduira dans certains cas le niveau de détail, ou la netteté perçue, de l'image lors d'un zoom avant. Surtout sur une image de produit typique où l'arrière-plan est flou ou a une faible entropie tandis que le premier plan et le produit ont plus détail et éventuellement une entropie plus élevée.

Vous trouverez ci-dessous une partie agrandie d'une image de produit plus grande (JPEG, AVIF) qui illustre clairement la différence entre un JPEG régulièrement optimisé et une image AVIF optimisée par squoosh.app.

L'AVIF est en effet beaucoup plus léger que le JPEG, mais dans ce cas, le compromis entre qualité visuelle et taille de fichier inférieure est allé trop loin. Cet effet ne sera pas aussi perceptible pour tous les types d'images et sera donc difficile à dépanner de manière proactive dans un processus de construction automatisé qui repose sur la syntaxe des images réactives pour la sélection du format.

De plus, contrairement au JPEG, AVIF ne prend pas en charge le rendu progressif. Pour une page de détail de produit typique, le rendu progressif peut fournir une fonctionnalité de tueur pour améliorer les métriques clés telles que Largest Contentful Paint et d'autres métriques Core Web Vitals. Même si un JPEG prend un peu plus de temps à télécharger en raison de sa taille de fichier plus grande par rapport à AVIF, il est probable qu'il commencera à être rendu plus tôt qu'un AVIF grâce à son mécanisme de rendu progressif. Ce cas est bien illustré par cette vidéo de Jake Achibald.

3. JPEG 2000 donne à AVIF une concurrence rude

Le principal argument de vente d'AVIF est sa taille de fichier extrêmement faible par rapport à une qualité d'image visuelle acceptable. Les premiers blogs et rapports se sont concentrés sur cela. Cependant, JPEG2000 (ou JP2) peut dans certains cas être un meilleur outil pour le travail. JPEG2000 est un format de fichier relativement ancien et n'obtient pas le même niveau d'attention que AVIF, même si le côté Apple de l'univers prend déjà en charge JPEG2000.

Pour illustrer, regardons cet adorable chiot. La taille du fichier AVIF optimisée par squoosh.app est de 27,9 Ko avec les paramètres par défaut. En convertissant l'image au format JPEG2000, toujours en utilisant ImageEngine, la taille du fichier est de 26,7 Ko. Pas beaucoup de différence, mais assez pour illustrer le cas.

Qu'en est-il de la qualité visuelle? DSSIM est un moyen populaire de comparer la similitude visuelle d'une image à l'image d'origine. La métrique DSSIM compare l'image d'origine à un fichier converti, une valeur inférieure indiquant une meilleure qualité. En convertissant sans perte les versions AVIF et JPEG2000 en PNG, le score DSSIM est comme ceci:

DSSIM (0 = égal à l'original) Octets
JPEG2000 0,019 26,7 Ko
AVIF 0,012 27,9 Ko

AVIF a un DSSIM légèrement meilleur mais à peine visible à l'œil humain.

Le bon outil pour le travail

Ce qu'il faut retenir de cet article, c'est que l'AVIF n'est guère la «solution miracle» ou le seul format d'image pour les gouverner tous. Tout d'abord, il est encore très tôt dans le développement des encodeurs et des décodeurs. De plus, AVIF est encore un autre format à gérer. Comme Jake Archibald conclut également dans son article, proposer plus de 3 versions de chaque image sur votre page Web est un peu pénible à moins que l'ensemble du flux de travail (redimensionner, compresser, convertir, sélectionner, livrer) soit entièrement automatisé.

De plus, comme nous l'avons vu, le fait qu'un navigateur prend en charge AVIF ne signifie pas qu'il s'agit du meilleur choix pour vos utilisateurs.

Il vaut mieux utiliser des images responsives et ajouter AVIF à la liste des formats d'image à pré-créer que de ne pas considérer du tout AVIF. Un défi potentiel est que le navigateur choisira alors AVIF s'il est pris en charge, que AVIF soit le bon outil ou non.

Cependant, en utilisant une image CDN comme ImageEngine, sera dans une plus grande mesure en mesure de choisir dynamiquement entre les formats pris en charge et de faire une estimation qualifiée si WEBP, JPEG2000 ou AVIF offrira la meilleure expérience utilisateur. L'utilisation d'un CDN d'image pour automatiser le processus d'optimisation d'image prendra en compte la compatibilité du navigateur, la taille de la charge utile de l'image et la qualité visuelle.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *