Nous écrivons fréquemment les informations sur les sites Web volumineuses concernant les images surchargées. Des outils tels que Lighthouse mettent en évidence les moments où le chargement des images a un impact négatif sur l'expérience utilisateur, par exemple lorsque le temps de chargement augmente ou que des ressources plus importantes sont exploitées. Pour résoudre ce problème, vous pouvez utiliser une compression moderne pour réduire la taille des fichiers d'images. Les développeurs Web peuvent aussi utiliser le format d'image AVIF. Cet article de blog présente les mises à jour récentes des outils Open Source pour AVIF. Il présente les bibliothèques d'encodage libaom et libavif, et inclut un tutoriel sur l'utilisation de ces bibliothèques pour encoder efficacement les images AVIF.
AVIF est un format d'image basé sur le codec vidéo AV1 et standardisé par Alliance for Open Media. AVIF offre des gains de compression importants par rapport aux autres formats d'image tels que JPEG et WebP. Le montant exact des économies dépendra du contenu, des paramètres d'encodage et de l'objectif de qualité, mais nous et d'autres avons constaté des économies de plus de 50% par rapport au format JPEG.
De plus, AVIF est compatible avec le codec et les conteneurs de nouvelles fonctionnalités d'image telles que High Dynamic Range et Wide Color Gamut, la synthèse de grain de cinéma et le décodage progressif.
Nouveautés
Depuis l'arrivée de la compatibilité AVIF dans Chrome M85, la compatibilité d'AVIF dans l'écosystème Open Source s'est améliorée sur plusieurs fronts.
Libaom
Libaom est un encodeur et décodeur AV1 Open Source géré par les sociétés de l'Alliance for Open Media. Il est utilisé dans de nombreux services de production de Google et d'autres sociétés membres. Entre la version libaom 2.0.0 (à peu près au moment où Chrome a ajouté la compatibilité avec AVIF) et la dernière version 3.1.0, d'importantes optimisations de l'encodage d'images fixes ont été ajoutées au codebase. par exemple :
- Optimisations pour le multithreading et l'encodage en mosaïque.
- Utilisation de la mémoire multipliée par cinq.
- Réduction de l'utilisation du processeur par 6,5, comme illustré dans le tableau ci-dessous.
Ces modifications réduisent considérablement le coût d'encodage des images AVIF, en particulier celles des images les plus fréquemment chargées ou ayant la priorité la plus élevée sur votre site. À mesure que l'encodage avec accélération matérielle d'AV1 devient de plus en plus disponible sur les serveurs et les services cloud, le coût de création d'images AVIF continue de baisser.
Libavif
Libavif, l'implémentation de référence d'AVIF, est un multiplexeur et analyseur AVIF Open Source utilisé dans Chrome pour décoder les images AVIF. Vous pouvez également l'utiliser avec libaom pour créer des images AVIF à partir de vos images non compressées existantes ou pour le transcodage à partir d'images Web existantes (JPEG, PNG, etc.).
Libavif a récemment ajouté la prise en charge d'une gamme plus large de paramètres d'encodeur, y compris l'intégration avec des paramètres d'encodeur libaom plus avancés. Les optimisations dans le pipeline de traitement, comme la conversion rapide YUV en RVB à l'aide de libyuv et la prise en charge alpha pré-multipliée, accélèrent encore le processus de décodage. Enfin, la prise en charge du mode d'encodage "all-intra" récemment ajouté dans libaom 3.1.0 apporte toutes les améliorations libaom mentionnées ci-dessus.
Encodage des images AVIF avec avifenc
Squoosh.app est un moyen rapide de tester AVIF. Squoosh exécute une version WebAssembly de libavif et présente un grand nombre de fonctionnalités identiques à celles des outils de ligne de commande. Ce format permet de comparer facilement les fichiers 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 l'encodeur de ligne de commande avifenc.
Pour comprendre comment encoder des images AVIF, nous allons utiliser la même image source utilisée dans l'exemple ci-dessus. Pour commencer, il vous faut:
Vous devez é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
Création de l'encodeur de ligne de commande avifenc
1. Obtenir le code
Découvrez un tag de release de libavif.
git clone -b v0.9.1 https://github.com/AOMediaCodec/libavif.git
2. Remplacer 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 créer avifenc de sorte qu'il soit statiquement lié à la bibliothèque d'encodeurs et de décodeurs AV1, libaom.
3. Obtenir et créer libaom
Accédez au répertoire des dépendances externes libavif.
cd ext
La commande suivante extrait le code source de libaom et crée libaom en mode statique.
./aom.cmd
Remplacez le répertoire par libavif.
cd ..
4. Créer l'outil d'encodage de ligne de commande avifenc
Nous vous conseillons 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 venez de créer avifenc !
Comprendre les paramètres de la ligne de commande avifenc
avifenc utilise la structure de ligne de commande suivante:
./avifenc [options] input.file output.avif
Les paramètres de base d'avifenc utilisés dans ce tutoriel sont les suivants:
| Avifenc | |
|---|---|
| --min 0 | Définir le quantificateur minimal pour la couleur sur 0 |
| --max 63 | Définir le quantificateur maximal pour la couleur sur 63 |
| --minalpha 0 | Définir le quantificateur minimal pour alpha sur 0 |
| --maxalpha 63 | Définir le quantificateur maximal pour l'alpha sur 63 |
| -a end-usage=q | Définissez le mode de contrôle du débit sur "Qualité constante (Q)". |
| -a cq-level=Q | Définir le niveau de quantification de la couleur et de l'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 alpha sur Q |
| -a Tune=ssim | Réglage pour SSIM (paramètre par défaut pour PSNR) |
| --jobs J | Utiliser des threads de calcul en J (par défaut: 1) |
| --speed S | Définissez la vitesse de l'encodeur sur une échelle de 0 à 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 version alpha.
Créer une image AVIF avec les paramètres par défaut
Les paramètres les plus élémentaires d'exécution d'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 (au niveau de quantification 18, par exemple) :
./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, il vous suffit d'exécuter ./avifenc.
Vous disposez désormais de votre propre image AVIF.
Accélérer l'encodeur
Il peut être utile de modifier le paramètre --jobs en fonction du nombre de cœurs présents sur 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 sur 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 5 fois.
Effets sur le LCP (Largest Contentful Paint)
Les images se prêtent souvent à l'utilisation de la métrique LCP (Largest Contentful Paint). 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 lors du traitement des candidats LCP qui sont des images.
Nous vous recommandons vivement d'utiliser un CDN pour les images pour optimiser vos images, car cela nécessite beaucoup moins d'efforts que la configuration de pipelines d'optimisation d'images dans le processus de création de votre site Web ou l'utilisation manuelle de binaires d'encodeur pour optimiser les images manuellement. Toutefois, les CDN pour les images peuvent s'avérer coûteux pour certains projets. Si tel est votre cas, tenez compte des points suivants lors de l'optimisation avec l'encodeur avifenc:
- Familiarisez-vous avec les options proposées par l'encodeur. En testant certaines des fonctionnalités d'encodage AVIF disponibles, vous pouvez réaliser des économies supplémentaires tout en conservant une qualité d'image suffisante.
- AVIF propose un encodage avec et sans perte. En fonction du 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 donneront de meilleurs résultats avec l'encodage avec pertes, tandis que l'encodage sans perte est probablement plus adapté aux images contenant des détails simples ou des dessins au trait généralement au format PNG.
- Si vous utilisez un bundler compatible avec imagemin par 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 pouvez constater une amélioration de la durée 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 sur l'optimisation du LCP.
Conclusion
Avec libaom, libavif et d'autres outils Open Source, vous pouvez obtenir une qualité d'image et des performances optimales pour votre site Web grâce à AVIF. Ce format est encore relativement nouveau. Des optimisations et des intégrations d'outils sont en cours de développement. Si vous avez des questions, des commentaires ou des demandes de fonctionnalités, contactez la liste de diffusion av1-discuss, la communauté GitHub AOM et le wiki AVIF.