Informations sur l'adoption d'AVIF dans l'écosystème.
AVIF est un nouveau format d'image qui gagne rapidement en popularité sur le Web grâce à ses taux de compression élevés, ses performances efficaces et son adoption généralisée. AVIF est un format d'image ouvert, libre de droits, basé sur le codec vidéo AV1 standardisé 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.
Quelles sont les nouveautés de l'écosystème AVIF ?
Depuis l'introduction d'AVIF dans Chrome, Firefox et Safari, son utilisation sur le Web a augmenté de manière constante. Presque tous les navigateurs sont compatibles avec AVIF aujourd'hui.
Dans Chrome uniquement, l'utilisation d'AVIF est passée à environ 1 % en un peu plus d'un an après que Chrome a ajouté la prise en charge d'AVIF dans la version stable.
De nombreux CDN d'images, tels que Akamai, Cloudflare, Cloudinary et Imgix, diffusent actuellement des images AVIF. Dans un article de blog annonçant la prise en charge d'AVIF, Imgix a indiqué une réduction de 60 % de la taille des fichiers 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 des économies de stockage importantes, mais aussi de charger les pages plus rapidement, ce qui accélère le temps de Largest Contentful Paint (LCP). Le LCP est l'une des métriques Core Web Vitals. Il indique la rapidité avec laquelle le plus grand bloc de contenu de la page a été 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. Il permet de tester votre site Web et de voir quelles économies AVIF pourrait vous apporter.
WordPress est la plate-forme de site Web la plus populaire au monde. De nombreux plug-ins sont disponibles pour permettre aux développeurs de convertir leurs images au format AVIF, par exemple :
- AutoOptimize
- Converti pour les contenus multimédias
- Optimiseur d'image EWWW
- Optimole
- ShortPixel Image Optimizer
Pour les développeurs plus pratiques, des outils tels que ImageMagick et FFmpeg constituent 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 du 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 basse, mieux c'est), mais il est également plus rapide à encoder.
Le graphique ci-dessous (plus le chiffre est élevé, mieux c'est) compare la vitesse d'encodage AVIF à celle d'autres formats d'image. Les codecs de la génération précédente tels que WebP bénéficient des algorithmes de compression moins complexes (mais aussi moins efficaces). Avec un schéma d'encodage multithread, AVIF atteint des performances similaires pour les cas d'utilisation courants tout en offrant des gains de compression importants.
Le site Image Coding Comparisons permet aux développeurs qui souhaitent effectuer des comparaisons plus détaillées de la vitesse d'encodage et de la qualité visuelle.
Bien que les implémentations logicielles des codecs d'image modernes tels que AVIF et WebP soient optimisées pour les architectures de processeurs x86 et ARM, la compression de grandes quantités d'images à grande échelle peut être coûteuse en termes de calcul. Une autre option pour réduire les coûts de compression consiste à explorer l'accélération matérielle. Bluedot a développé un encodeur Pulsar-AVIF accéléré par du matériel qui s'exécute sur des FPGA programmables, tels que l'Alveo U250 d'AMD. Par rapport à avifenc basé sur un logiciel, Pulsar-AVIF offre une amélioration de la vitesse de 7 à 23 fois 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 créer des pages Web plus réactives. 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 GIF animé est toujours un format populaire pour les images animées, bien qu'il ait 35 ans. Les principaux inconvénients des GIF animés sont la prise en charge de 256 couleurs uniquement et la mauvaise compression, qui entraînent des tailles de fichiers très importantes, 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 identique au schéma de codage vidéo AV1, ce qui permet de réduire considérablement la taille des fichiers par rapport aux GIF animés.
Nous avons effectué un benchmark simple dans lequel nous avons encodé un ensemble de GIF animés au format AVIF et JPEG XL. Sur l'ensemble de test, le pourcentage moyen d'économie 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 les lectures animées au format AVIF.
FFmpeg est un outil permettant de créer des fichiers AVIF animés. Voici un exemple de conversion de 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, meilleure est la qualité et plus le fichier est volumineux. 0 utilise une compression sans perte. Commencez par la valeur 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'encodeur et l'ajustement des paramètres d'encodage en fonction du compromis vitesse/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 méthode est beaucoup 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 a augmenté de manière constante depuis son lancement et est largement prise en charge par les navigateurs, les CDN d'images, les plug-ins WordPress et les outils d'encodage. Dans l'ensemble, 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 ce que vous préférez 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 sur la liste de discussion av1-discuss, la communauté GitHub AOM et le wiki AVIF.