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 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 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 qu'il apporte aux développeurs en termes de performances et de qualité pour les images fixes et les animations.
Quelles sont les nouveautés de l'écosystème AVIF ?
Depuis le lancement d'AVIF dans Chrome, Firefox et Safari, son utilisation sur le Web ne cesse d'augmenter. Presque tous les navigateurs sont actuellement compatibles avec ce format.
Rien que dans Chrome, l'utilisation d'AVIF est passée à environ 1 % en un peu plus d'un an après l'adoption stable d'AVIF.
Un certain nombre de CDN pour les images, tels que Akamai, Cloudflare, Cloudinary et Imgix, diffusent actuellement des images AVIF. Dans un article de blog annonçant la compatibilité avec AVIF, Imgix a fait état d'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éduire considérablement l'espace de stockage, mais également d'accélérer le chargement des pages et donc le temps de chargement du Largest Contentful Paint (LCP). Le LCP fait partie des Core Web Vitals et représente la vitesse de chargement du plus grand bloc de contenu de la page. L'utilisation de codecs modernes pour compresser des images est l'une des techniques clés de réduction du LCP. Lighthouse est un excellent outil pour les développeurs Chrome qui permet de tester votre site Web et de déterminer les économies que pourrait réaliser AVIF.
WordPress est la plate-forme de sites Web la plus populaire au monde. Les développeurs disposent de nombreux plug-ins pour convertir leurs images au format AVIF, par exemple:
- AutoOptimize
- Converti pour les médias
- Optimiseur d'image EWWW
- Optimole
- Optimiseur d'image ShortPixel
Pour les développeurs plus expérimentés, les outils tels que ImageMagick et FFmpeg constituent un bon point de départ.
Vitesse d'encodage AVIF
La vitesse d'encodage et la qualité visuelle 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 ces deux dernières années. Par rapport aux autres formats d'images fixes modernes, le format AVIF génère des fichiers plus petits et de qualité visuelle similaire (voir le graphique suivant, plus il est faible, mieux c'est) mais il est également plus rapide à encoder.
Le tableau ci-dessous (plus il est élevé, mieux c'est) illustre une comparaison entre la vitesse d'encodage AVIF et 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). Grâce à son schéma d'encodage multithread, AVIF offre des performances similaires pour les cas d'utilisation courants tout en offrant des gains de compression importants.
Les développeurs qui souhaitent effectuer une comparaison plus détaillée de la vitesse d'encodage et de la qualité visuelle peuvent consulter le site Comparatifs de codage d'images. Ils y trouveront des résultats d'analyse comparative reproductibles.
Bien que les implémentations logicielles pour les codecs d'image modernes tels qu'AVIF et WebP soient optimisées pour les architectures de processeur x86 et ARM, la compression de grandes quantités d'images à grande échelle peut s'avérer coûteuse en calcul. Une alternative pour réduire les coûts de compression consiste à étudier l'accélération matérielle. Bluedot a développé un encodeur Pulsar-AVIF avec accélération matérielle, qui fonctionne sur des FPGA programmables, comme le modèle Alveo U250 d'AMD. Comparé au logiciel avifenc, Pulsar-AVIF offre une vitesse multipliée par 7 à 23 fois supérieure, avec une efficacité de compression similaire.
- Ensemble de test: Kodak (24 images de 768 x 512)
- Encoder 24 images simultanément (24 processus)
- Chaque processus d'encodage logiciel est exécuté avec 4 threads. (-j 4)
Les développeurs peuvent déployer l'encodeur Pulsar-AVIF avec des machines virtuelles cloud telles que Azure NP-Series.
Fonctionnalités AVIF pour les pages Web réactives
AVIF propose quelques fonctionnalités intéressantes qui aideront à fournir des pages Web plus réactives. Cette fois, nous allons nous intéresser de plus près aux fichiers AVIF animés, qui constituent de loin le moyen le plus efficace de créer des animations sympas sur le Web.
Fichiers AVIF animés
Les GIF animés sont toujours un format populaire pour les images animées, bien qu'ils datent de 35 ans. Le principal inconvénient des GIF animés est la prise en charge de 256 couleurs uniquement et une mauvaise compression 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 identique au schéma de codage vidéo AV1, ce qui permet de réduire considérablement la taille des fichiers par rapport au format GIF animé.
Nous avons effectué une analyse comparative simple dans laquelle nous avons encodé un ensemble de GIF animés à la fois au format AVIF et JPEG XL. Sur l'ensemble de test, le pourcentage moyen de réduction de la taille des fichiers é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 AVIF animées.
FFmpeg est l'un des outils permettant de créer des fichiers AVIF animés. Voici un exemple de base de conversion d'un GIF au format 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é et la taille des fichiers sont élevées. 0 utilise la compression sans perte. Commencez par la valeur 23 pour les petits fichiers AVIF animés.
Par défaut, FFmpeg utilise le protocole libaom pour encoder les images AVIF, mais il peut également utiliser rav1e ou SVT-AV1 lorsqu'ils sont disponibles. Pour plus d'informations sur le choix des encodeurs et sur la façon de régler les paramètres d'encodage afin de faire des compromis entre vitesse et qualité, consultez le guide d'encodage AV1 de FFmpeg.
Autre cas d'utilisation : vous pouvez réempaqueter une vidéo AV1 au format AVIF sans réencoder le fichier d'origine. Cette méthode est nettement moins chère 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, vous pouvez transmettre -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 et son utilisation 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 ; AVIF 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 contacter la liste de diffusion av1-discuss, la communauté GitHub AOM et le wiki AVIF.