Utiliser le format AVIF pour compresser les images de votre site

Jai Krishnan
Jai Krishnan
Wan-Teh Chang
Wan-Teh Chang

Nous écrivons fréquemment sur l'encombrement des sites Web par les images, et des outils tels que Lighthouse indiquent quand le chargement d'images a un impact négatif sur l'expérience utilisateur, par exemple en augmentant le temps de chargement ou en réduisant la bande passante disponible pour des ressources plus importantes. Pour résoudre ce problème, vous pouvez utiliser une compression moderne pour réduire la taille des fichiers image. Le format d'image AVIF est une nouvelle option pour les développeurs Web. Cet article de blog présente les mises à jour récentes des outils Open Source pour AVIF, présente les bibliothèques d'encodage libaom et libavif, et inclut un tutoriel sur l'utilisation de ces bibliothèques pour encoder efficacement des images AVIF.

AVIF est un format d'image basé sur le codec vidéo AV1 et standardisé par l'Alliance for Open Media. AVIF offre des gains de compression importants par rapport aux autres formats d'image tels que JPEG et WebP. Bien que l'économie exacte dépende du contenu, des paramètres d'encodage et de la cible de qualité, nous et d'autres avons constaté des économies de plus de 50% par rapport au format JPEG.

Image au format AVIF
1 120 x 840 AVIF à 18 769 octets (cliquez pour agrandir)
Image au format JPEG
1 120 x 840 JPEG à 20 036 octets (cliquez pour agrandir)

De plus, AVIF ajoute la prise en charge des codecs et des conteneurs pour de nouvelles fonctionnalités d'image telles que la plage dynamique élevée et la gamme de couleurs étendue, la synthèse du grain de film et le décodage progressif.

Nouveautés

Depuis la prise en charge d'AVIF dans Chrome M85, la prise en charge d'AVIF dans l'écosystème open source s'est améliorée à plusieurs niveaux.

Libaom

Libaom est un encodeur et un décodeur AV1 Open Source géré par les entreprises de l'Alliance for Open Media, et utilisé dans de nombreux services de production de Google et d'autres entreprises membres. Entre la version libaom 2.0.0 (à peu près au moment où Chrome a ajouté la prise en charge d'AVIF) et la version 3.1.0 récente, des optimisations importantes de l'encodage d'images fixes ont été ajoutées au codebase. Exemples :

  • Optimisations pour le multithreading et l'encodage en tuiles.
  • Réduction de l'utilisation de la mémoire de 5 fois.
  • Réduction de 6,5 fois de l'utilisation du processeur, comme illustré dans le graphique ci-dessous.
En utilisant speed=6, cq-level=18, pour des images de 8,1 Mpx

Ces modifications réduisent considérablement le coût de l'encodage AVIF, en particulier pour les images les plus fréquemment chargées ou les plus prioritaires de votre site. À mesure que l'encodage accéléré par matériel d'AV1 devient plus disponible sur les serveurs et les services cloud, le coût de création d'images AVIF continuera de baisser.

Libavif

Libavif, l'implémentation de référence d'AVIF, est un multiplexeur et un analyseur AVIF Open Source utilisé dans Chrome pour décoder les images AVIF. Il peut également être utilisé avec libaom pour créer des images AVIF à partir de vos images non compressées existantes ou pour transcoder à partir d'images Web existantes (JPEG, PNG, etc.).

Libavif a récemment ajouté la prise en charge d'un plus grand nombre de paramètres d'encodeur, y compris l'intégration avec les paramètres d'encodeur libaom plus avancés. Les optimisations du pipeline de traitement, telles que la conversion rapide YUV-RVB à l'aide de libyuv et de l'alpha prémultiplié, accélèrent encore le processus de décodage. Enfin, la prise en charge du mode d'encodage all-intra nouvellement ajoutée dans libaom 3.1.0 apporte toutes les améliorations libaom mentionnées ci-dessus.

Encodage d'images AVIF avec avifenc

Squoosh.app est un moyen rapide d'essayer AVIF. Squish exécute une version WebAssembly de libavif et expose de nombreuses fonctionnalités identiques à celles des outils de ligne de commande. Il s'agit d'un moyen simple de comparer AVIF à d'autres formats, anciens ou nouveaux. Il existe également une version CLI de Squoosh destinée aux applications Node.

Toutefois, WebAssembly n'a pas encore accès à toutes les primitives de performances des processeurs. Par conséquent, si vous souhaitez exécuter libavif à la vitesse maximale, nous vous recommandons l'encodeur de ligne de commande, avifenc.

Pour comprendre comment encoder des images AVIF, nous allons présenter un tutoriel utilisant la même image source que celle utilisée dans notre exemple ci-dessus. Pour commencer, vous avez besoin des éléments suivants:

Vous devrez également installer les packages de développement pour zlib, libpng et libjpeg. Les commandes pour les distributions Linux Debian et Ubuntu sont les suivantes:

sudo apt-get install zlib1g-dev
sudo apt
-get install libpng-dev
sudo apt
-get install libjpeg-dev

Compiler l'encodeur de ligne de commande avifenc

1. Obtenir le code

Vérifier un tag de version de libavif

git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git

2. Remplacez le répertoire par libavif.

cd libavif

Il existe de nombreuses façons de configurer avifenc et libavif pour la compilation. Pour en savoir plus, consultez libavif. Nous allons compiler avifenc afin qu'il soit lié de manière statique à la bibliothèque d'encodeur et de décodeur AV1, libaom.

3. Obtenir et compiler libaom

Accédez au répertoire des dépendances externes de libavif.

cd ext

La commande suivante extrait le code source de libaom et compile libaom de manière statique.

./aom.cmd

Remplacez le répertoire par libavif.

cd ..

4. Créer l'outil d'encodage de ligne de commande, avifenc

Il est judicieux de créer un répertoire de compilation pour avifenc.

mkdir build

Accédez au répertoire de compilation.

cd build

Créez les fichiers de compilation pour avifenc.

cmake -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=0 -DAVIF_CODEC_AOM=1 -DAVIF_LOCAL_AOM=1 -DAVIF_BUILD_APPS=1 ..

Créez avifenc.

make

Vous avez créé avifenc.

Comprendre les paramètres de ligne de commande avifenc

avifenc utilise la structure de ligne de commande:

./avifenc [options] input.file output.avif

Les paramètres de base d'avifenc utilisés dans ce tutoriel sont les suivants:

avifenc
--min 0Définir le quantizeur minimal pour la couleur sur 0
--max 63Définir le quantizeur maximal pour la couleur sur 63
--minalpha 0Définir le quantizeur minimal pour l'alpha sur 0
--maxalpha 63Définir le quantizeur maximal pour l'alpha sur 63
-a end-usage=qDéfinissez le mode de contrôle du débit sur "Qualité constante (Q)".
-a cq-level=QDéfinissez le niveau de quantification pour la couleur et l'alpha sur Q.
-a color:cq-level=QDéfinir le niveau de quantification de la couleur sur Q
-a alpha:cq-level=QDéfinissez le niveau de quantification pour l'alpha sur Q.
-a tune=ssimAjustement pour SSIM (par défaut, l'ajustement est effectué pour PSNR)
--jobs JUtiliser des threads de travail J (valeur par défaut: 1)
--speed SDéfinissez la vitesse de l'encodeur entre 0 et 10 (plus lente à la plus rapide, par défaut: 6).

L'option cq-level définit le niveau de quantification (0 à 63) pour contrôler la qualité de la couleur ou de l'alpha.

Créer une image AVIF avec les paramètres par défaut

Les paramètres les plus basiques pour l'exécution d'avifenc sont les fichiers d'entrée et de sortie.

./avifenc happy_dog.jpg happy_dog.avif

Nous vous recommandons d'utiliser la ligne de commande suivante pour encoder une image, par exemple au niveau de quantification 18:

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim happy_dog.jpg happy_dog.avif

Avifenc propose de nombreuses options qui affectent à la fois la qualité et la vitesse. Si vous souhaitez afficher les options et en savoir plus, exécutez simplement ./avifenc.

Vous avez maintenant votre propre image AVIF !

Accélérer l'encodeur

Le paramètre --jobs peut être utile à modifier en fonction du nombre de cœurs de votre machine. Ce paramètre définit le nombre de threads qu'avifenc utilisera pour créer des images AVIF. Essayez d'exécuter cette commande dans la ligne de commande.

./avifenc --min 0 --max 63 -a end-usage=q -a cq-level=18 -a tune=ssim --jobs 8 happy_dog.jpg happy_dog.avif

Cela indique à avifenc d'utiliser huit threads lors de la création de l'image AVIF, ce qui accélère l'encodage AVIF d'environ cinq fois.

Effets sur le Largest Contentful Paint (LCP)

Les images sont souvent candidates à la métrique Largest Contentful Paint (LCP). Une recommandation courante pour améliorer la vitesse de chargement des images LCP consiste à s'assurer qu'elles sont optimisées. En réduisant la taille de transfert d'une ressource, vous améliorez son temps de chargement, qui est l'une des quatre phases clés à cibler lorsque vous traitez des candidats au LCP qui sont des images.

L'utilisation d'un CDN d'images est fortement recommandée lorsque vous optimisez des images, car elle nécessite beaucoup moins d'efforts que de configurer des pipelines d'optimisation des images dans le processus de compilation de votre site Web ou d'utiliser manuellement des binaires d'encodeur pour optimiser les images manuellement. Toutefois, les CDN d'images peuvent être coûteux pour certains projets. Si tel est le cas, tenez compte des points suivants lorsque vous optimisez avec l'encodeur avifenc:

  • Familiarisez-vous avec les options proposées par l'encodeur. Vous pouvez réaliser des économies supplémentaires tout en conservant une qualité d'image suffisante en essayant certaines des fonctionnalités d'encodage disponibles dans AVIF.
  • AVIF propose un encodage avec et sans perte. Selon le contenu d'une image, un type d'encodage peut être plus performant qu'un autre. Par exemple, les photographies qui sont normalement diffusées au format JPEG sont probablement mieux adaptées à l'encodage avec pertes, tandis que l'encodage sans perte est probablement le plus adapté aux images contenant des détails simples ou des illustrations au trait normalement diffusées au format PNG.
  • Si vous utilisez un outil de regroupement avec une prise en charge de la communauté pour imagemin, envisagez d'utiliser le package imagemin-avif pour permettre à votre outil de regroupement de générer des variantes d'images AVIF.

En testant AVIF, vous pourrez peut-être améliorer les temps de LCP de votre site Web lorsque le candidat au LCP est une image. Pour en savoir plus sur l'optimisation du LCP, consultez le guide sur l'optimisation du LCP.

Conclusion

En utilisant libaom, libavif et d'autres outils Open Source, vous pouvez obtenir la meilleure qualité d'image et les meilleures performances pour votre site Web avec AVIF. Ce format est encore relativement nouveau, et les optimisations et les intégrations d'outils sont en cours de développement. Si vous avez des questions, des commentaires ou des demandes de fonctionnalités, contactez-nous sur la liste de discussion av1-discuss, la communauté GitHub AOM et le wiki AVIF.