Le point sur l'adoption d'AVIF dans l'écosystème.
AVIF est un nouveau format d'image qui gagne rapidement en popularité sur le Web en raison de ses taux de compression élevés, de ses performances efficaces et de son adoption généralisée. AVIF est un format d'image ouvert et libre de droits basé sur le codec vidéo AV1 normalisé par l'Alliance for Open Media. Cet article de blog présente l'adoption d'AVIF dans l'écosystème, ainsi que les avantages en termes de performances et de qualité que les développeurs peuvent attendre d'AVIF pour les images fixes et les animations.
Quoi de neuf dans l'écosystème AVIF ?
Depuis l'introduction d'AVIF dans Chrome, Firefox et Safari, l'utilisation d'AVIF sur le Web n'a cessé de croître. Presque tous les navigateurs sont désormais compatibles avec AVIF.
Rien que dans Chrome, l'utilisation d'AVIF est passée à environ 1 % un peu plus d'un an après l'ajout de la compatibilité avec AVIF dans la version stable de Chrome.
Plusieurs CDN d'images, tels qu'Akamai, Cloudflare, Cloudinary et Imgix, diffusent aujourd'hui des images AVIF. Dans un article de blog annonçant la compatibilité avec AVIF, Imgix a indiqué que la taille des fichiers était réduite de 60 % par rapport au format JPEG et de 35 % par rapport au format WebP. Cette réduction de la taille des fichiers permet de réaliser d'importantes économies de stockage, mais aussi de charger les pages plus rapidement, ce qui se traduit par des temps de Largest Contentful Paint (LCP) plus courts. Le LCP est l'un des Core Web Vitals. Il représente la vitesse à laquelle le plus grand bloc de contenu de la page s'est chargé. L'utilisation de codecs modernes pour compresser les images est l'une des techniques clés pour réduire le LCP. Lighthouse est un excellent outil pour les développeurs Chrome qui permet de tester votre site Web et de voir les économies que l'AVIF pourrait apporter.
WordPress est la plate-forme de site Web la plus populaire au monde. Plusieurs plug-ins sont disponibles pour permettre aux développeurs de convertir leurs images au format AVIF, par exemple :
Pour les développeurs plus expérimentés, des outils comme ImageMagick et FFmpeg sont un bon point de départ.
Vitesse d'encodage AVIF
Une vitesse d'encodage rapide et une qualité visuelle élevée sont essentielles pour déployer la compression d'images à grande échelle. La vitesse d'encodage logiciel AVIF s'est considérablement améliorée au cours des deux dernières années. Par rapport aux autres formats d'images fixes modernes, AVIF produit des fichiers plus petits avec une qualité visuelle similaire (voir le graphique suivant, plus la valeur est faible, mieux c'est), mais il est également plus rapide à encoder.
Le graphique ci-dessous (plus la valeur est élevée, mieux c'est) illustre la vitesse d'encodage AVIF par rapport à d'autres formats d'image. Les codecs de génération précédente, comme WebP, bénéficient d'algorithmes de compression moins complexes (mais aussi moins efficaces). Avec un schéma d'encodage multithread, AVIF offre des performances similaires pour les cas d'utilisation courants, tout en offrant des gains de compression significatifs.
Pour les développeurs intéressés par des comparaisons plus détaillées de la vitesse d'encodage et de la qualité visuelle, le site Image Coding Comparisons contient des résultats de benchmark reproductibles.
Bien que les implémentations logicielles des codecs d'image modernes tels qu'AVIF et WebP soient optimisées pour les architectures de processeurs x86 et ARM, la compression d'un grand nombre d'images à grande échelle peut s'avérer coûteuse en ressources de calcul. Pour réduire les coûts de compression, vous pouvez envisager l'accélération matérielle. Bluedot a développé un encodeur Pulsar-AVIF à accélération matérielle qui s'exécute sur des FPGA programmables, tels que l'Alveo U250 d'AMD. Par rapport à l'outil logiciel avifenc, Pulsar-AVIF offre une vitesse 7 à 23 fois plus rapide avec une efficacité de compression similaire.
- Ensemble de test : Kodak (24 images de 768 x 512)
- Encodage de 24 images simultanément (24 processus)
- Chaque processus d'encodage logiciel est exécuté avec quatre threads. (-j 4)
Les développeurs peuvent déployer l'encodeur Pulsar-AVIF avec des machines virtuelles cloud, telles que la série NP d'Azure.
Fonctionnalités AVIF pour les pages Web responsives
AVIF présente quelques fonctionnalités intéressantes qui permettent de proposer des pages Web plus responsives. Cette fois, nous allons nous intéresser aux fichiers AVIF animés, qui sont de loin le moyen le plus efficace de diffuser des animations sympas sur le Web.
AVIF animé
Le format GIF animé reste un format populaire pour les images animées, même s'il a 35 ans. Les principaux inconvénients des GIF animés sont qu'ils ne prennent en charge que 256 couleurs et qu'ils sont mal compressés, ce qui entraîne des fichiers très volumineux tout en limitant la résolution ou la fréquence d'images pour les cas d'utilisation pratiques. En revanche, le codage AVIF animé est en fait le même que le schéma de codage vidéo AV1, qui permet de réduire considérablement la taille des fichiers par rapport au GIF animé.
Nous avons effectué un benchmark simple en encodant un ensemble de GIF animés aux formats AVIF et JPEG XL. Sur l'ensemble de test, le pourcentage d'économie médiane de taille de fichier était d'environ 86 % par rapport aux fichiers GIF d'origine et d'environ 73 % par rapport aux fichiers JPEG XL animés*.
Chrome, Firefox et Safari sont tous compatibles avec la lecture des fichiers AVIF animés.
FFmpeg est un outil permettant de créer des fichiers AVIF animés. Voici un exemple simple de conversion d'un GIF en AVIF à l'aide de FFmpeg :
ffmpeg -i "$INPUT_GIF" -crf $CRF -b:v 0 "$OUTPUT.avif"
$CRF est la qualité de sortie souhaitée sur une échelle de 0 à 63. Plus la valeur est faible, plus la qualité est élevée et plus la taille du fichier est importante. 0 utilise la compression sans perte. Commencez par une valeur de 23 pour les petits fichiers AVIF animés.
FFmpeg utilise libaom par défaut pour encoder les images AVIF, mais il peut également utiliser rav1e ou SVT-AV1 lorsqu'ils sont disponibles. Pour en savoir plus sur les choix d'encodeurs et l'ajustement des paramètres d'encodage pour trouver un compromis entre vitesse et qualité, consultez le guide d'encodage AV1 de FFmpeg.
Un autre cas d'utilisation consiste à reconditionner une vidéo AV1 en AVIF sans réencoder le fichier d'origine. Cette opération est nettement moins coûteuse que le décodage/l'encodage du fichier AV1 d'origine et permet d'utiliser la vidéo AV1 avec l'élément <img>. Pour ce faire, transmettez -c:v copy à FFmpeg.
ffmpeg -i "$INPUT_AV1_VIDEO" -c:v copy -an "$OUTPUT.avif"
Conclusions
L'utilisation d'AVIF sur le Web n'a cessé d'augmenter depuis son lancement. Il est largement compatible avec les navigateurs, les CDN d'images, les plug-ins WordPress et les outils d'encodage. En résumé, AVIF est un excellent choix pour diffuser des images sur le Web. Il est rapide à encoder et à décoder, tout en offrant la meilleure qualité ou la plus petite taille de fichier, selon vos préférences pour votre site Web. AVIF est le moyen le plus efficace de diffuser des animations sur le Web. Si vous avez des questions, des commentaires ou des demandes de fonctionnalités, veuillez nous contacter via la liste de diffusion av1-discuss, la communauté GitHub AOM et le wiki AVIF.