Nous écrivons fréquemment à propos de la surcharge des sites Web à partir d'images, et des outils tels que Lighthouse le mettent en évidence lorsque le chargement des images a un impact négatif sur l'expérience utilisateur, par exemple en augmentant le temps de chargement ou en privant de bande passante des ressources plus importantes. Pour résoudre ce problème, vous pouvez utiliser une compression moderne afin de réduire la taille de fichier des images. Une nouvelle option pour les développeurs Web est le format d'image AVIF. Cet article de blog présente les dernières mises à jour apportées aux 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. Les économies réalisées dépendent du contenu, des paramètres d'encodage et de l'objectif de qualité, mais nous et d'autres annonceurs ont réalisé plus de 50% d'économies par rapport au format JPEG.
De plus, AVIF prend en charge le codec et les conteneurs pour de nouvelles fonctionnalités d'image telles que High Dynamic Range et Wide Color Gamut, la synthèse du grain de film et le décodage progressif.
Nouveautés
Depuis la prise en charge des fichiers AVIF dans Chrome M85, la compatibilité avec ce format dans l'écosystème Open Source s'est améliorée sur un certain nombre de fronts.
Libaom
Libaom est un encodeur et un décodeur AV1 Open Source gérés par les entreprises de l'Alliance for Open Media. Il est utilisé dans de nombreux services de production chez Google et dans d'autres entreprises membres. Entre la version 2.0.0 de Libaom (à peu près au moment où Chrome a ajouté la compatibilité avec AVIF) et la dernière version 3.1.0, d'importantes optimisations d'encodage d'images fixes ont été ajoutées au codebase. humainement responsable :
- Optimisations du multithreading et de l'encodage en mosaïque.
- Utilisation de la mémoire multipliée par cinq.
- 6,5 fois moins d'utilisation du processeur, comme illustré dans le graphique ci-dessous.
Ces modifications réduisent considérablement le coût d'encodage des images au format AVIF, en particulier les images les plus chargées ou ayant la priorité la plus élevée sur votre site. À mesure que l'encodage accéléré par le matériel de AV1 deviendra 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 muxer et analyseur AVIF Open Source utilisés dans Chrome pour décoder les images AVIF. Vous pouvez également l'utiliser avec libaom pour créer des images AVIF à partir d'images non compressées existantes ou pour effectuer le transcodage à partir d'images Web existantes (JPEG, PNG, etc.).
Libavif a récemment ajouté une compatibilité avec un plus large éventail de paramètres d'encodeur, y compris l'intégration avec des paramètres d'encodeur Liibaom plus avancés. Les optimisations dans le pipeline de traitement, telles que la conversion rapide de YUV à RVB à l'aide de libyuv et la compatibilité alpha prémultipliée, accélèrent le processus de décodage. Enfin, la prise en charge du mode d'encodage "all-intra" récemment ajouté dans la version 3.1.0 apporte toutes les améliorations de libaom mentionnées ci-dessus.
Codage d'images AVIF avec avifenc
Squoosh.app est un moyen rapide de tester AVIF. Squoosh exécute une version WebAssembly de libavif et propose de nombreuses fonctionnalités identiques à celles des outils de ligne de commande. Vous pouvez ainsi comparer facilement le format AVIF à d'autres formats, anciens et 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 le plus rapidement possible, nous vous recommandons d'utiliser l'encodeur de ligne de commande avifenc.
Pour comprendre comment encoder des images AVIF, nous allons vous 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 devez également installer les packages de développement pour zlib, libpng et libjpeg. Les commandes des 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
Création d'Avifenc pour l'encodeur de ligne de commande
1. Obtenir le code
Consultez un tag de version de libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Passer au répertoire libavif
cd libavif
Vous pouvez configurer avifenc et libavif de différentes manières pour les compiler. Pour en savoir plus, consultez le site libavif. Nous allons créer avifenc pour qu'il soit associé de manière statique à la bibliothèque d'encodeurs et de décodeurs AV1, libaom.
3. Créez et développez une libaom
Accédez au répertoire des dépendances externes libavif.
cd ext
La commande suivante extrait le code source libaom et le compile en mode statique.
./aom.cmd
Passez au répertoire libavif.
cd ..
4. Créer l'outil d'encodage de ligne de commande avifenc
Nous vous recommandons 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 des avifenc.
make
Vous avez créé des avifenc !
Comprendre les paramètres de la ligne de commande avifenc
avifenc utilise la structure de ligne de commande:
./avifenc [options] input.file output.avif
Les paramètres de base pour avifenc utilisés dans ce tutoriel sont les suivants:
| Avifenc | |
|---|---|
| --min 0 | Définir le quantizer minimal pour la couleur sur 0 |
| --max 63 | Définir le quantizer maximal pour la couleur sur 63 |
| --minalpha 0 | Définir le quantizer minimal pour la valeur alpha sur 0 |
| --maxalpha 63 | Définir le quantificateur maximal sur 63 pour la valeur alpha |
| -a end-usage=q | Définir le mode de contrôle du débit sur "Qualité constante (Q)" |
| -a cq-level=Q | Définir le niveau de quantification pour la couleur et la valeur alpha sur Q |
| -a color:cq-level=Q | Définir le niveau de quantification de la couleur sur Q |
| -a alpha:cq-level=Q | Définir le niveau de quantification pour la version alpha sur Q |
| -a accord=ssim | Régler pour SSIM (par défaut, pour PSNR) |
| --jobs J | Utiliser des threads de nœud de calcul J (par défaut: 1) |
| --vitesse S | Définissez la vitesse de l'encodeur sur une valeur comprise entre 0 et 10 (la plus lente et la plus rapide. Valeur 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 la valeur alpha.
Créer une image AVIF avec les paramètres par défaut
Les paramètres les plus élémentaires pour exécuter avifenc sont la définition des 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.
Pour afficher les options et en savoir plus à leur sujet, exécutez ./avifenc.
Vous disposez désormais de votre propre image AVIF !
Accélération de l'encodeur
Il peut être judicieux de modifier le paramètre --jobs 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 de l'exécuter 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 pour la métrique "Largest Contentful Paint" (LCP). Une recommandation courante pour améliorer la vitesse de chargement des images LCP est de s'assurer qu'une image est optimisée. En réduisant la taille de transfert d'une ressource, vous améliorez son temps de chargement de ressource, qui est l'une des quatre phases clés à cibler lorsque vous traitez des candidats LCP qui sont des images.
Nous vous recommandons vivement d'utiliser un CDN pour les images lorsque vous optimisez des images, car cela demande beaucoup moins d'effort que de configurer des pipelines d'optimisation d'images dans le processus de création de votre site Web ou d'utiliser manuellement des binaires d'encodeur pour optimiser les images manuellement. Toutefois, les CDN d'images peuvent s'avérer coûteux pour certains projets. Si tel est votre cas, tenez compte des points suivants lorsque vous effectuez une optimisation avec l'encodeur avifenc:
- Familiarisez-vous avec les options proposées par l'encodeur. Vous pourrez réaliser des économies supplémentaires tout en conservant une qualité d'image suffisante en testant certaines des fonctionnalités d'encodage AVIF disponibles.
- Le format AVIF permet d'effectuer un encodage à la fois avec et sans perte. En fonction du contenu d'une image, un type d'encodage peut être plus performant qu'un autre. Par exemple, l'encodage avec pertes est probablement plus efficace pour les photographies habituellement diffusées sous forme de JPEG, tandis que l'encodage sans perte est probablement mieux adapté aux images contenant des détails simples ou aux dessins au trait généralement au format PNG.
- Si vous utilisez un bundler compatible avec imagemin de la communauté, envisagez d'utiliser le package imagemin-avif pour permettre à votre bundler de générer des variantes d'image AVIF.
En testant AVIF, vous pourrez peut-être améliorer les temps LCP de votre site Web dans les cas où le LCP candidat est une image. Pour en savoir plus sur l'optimisation du LCP, consultez le guide d'optimisation du LCP.
Conclusion
Libaom, libavif et d'autres outils Open Source vous permettent d'obtenir la meilleure qualité d'image et les meilleures performances pour votre site Web en utilisant AVIF. Ce format est encore relativement nouveau, et nous développons activement des optimisations et des intégrations d'outils. Si vous avez des questions, des commentaires ou des demandes de fonctionnalités, contactez-nous via la liste de diffusion av1-discuss, la communauté GitHub AOM et le wiki AVIF.