AVIF et WebP —

]AVIF

Le format de fichier image AV1 (AVIF) est un format d'image open source pour le stockage d'images fixes et animées. Il a été publié en février 2019 par l'Alliance for Open Media (AOMedia). AVIF est la version image du populaire format vidéo AV1. L'objectif était de développer un nouveau format de codage vidéo open source qui soit à la fois à la pointe de la technologie et libre de droits.

AVIF Benefits

AVIF prend en charge une compression très efficace avec et sans perte pour produire des images de haute qualité. après compression, AVIF compresse bien mieux que les formats les plus populaires sur le Web aujourd'hui (JPEG, WebP, JPEG 2000, etc.). Les images peuvent être jusqu'à dix fois plus petites que les JPEG de qualité visuelle similaire. Certains tests ont montré qu'AVIF offre une économie de 50 % de la taille du fichier par rapport au JPEG avec une qualité de perception similaire. Notez qu'il peut y avoir des cas où WebP sans perte peut être meilleur qu'AVIF sans perte, alors assurez-vous d'évaluer manuellement.

Ici, vous pouvez voir une comparaison de taille entre une image JPEG et son image AVIF correspondante (avec perte) convertie à l'aide du Application Squoosh :

En plus d'une compression supérieure, AVIF fournit également les fonctionnalités suivantes :

• AVIF prend en charge les animations, les photos en direct et plus encore via des images multicouches stockées dans des séquences d'images.
• Il offre une meilleure prise en charge des éléments graphiques, des logos et des infographie, où JPEG a des limites.
• Il offre une meilleure compression sans perte que JPEG.
• Il prend en charge douze bits de profondeur de couleur permettant une plage dynamique élevée (HDR) et des images à large gamme de couleurs (WCG) avec une meilleure étendue de luminosité et des tons sombres et une plage de luminosité plus large.
• Il inclut la prise en charge des images monochromes et des images multicanaux, y compris les images transparentes qui utilisent le canal alpha.

Comparaison des formats

Pour mieux comprendre les différences de qualité et de compression offertes par les différents formats, nous pouvons comparer visuellement les images et évaluer les différences.

Évaluer la qualité et la compression

Nous allons commencer notre évaluation de la qualité de JPEG, WebP, un nd AVIF en utilisant les paramètres de sortie de haute qualité par défaut de Squoosh pour chaque format – intentionnellement non réglé pour imiter l'expérience d'un nouvel utilisateur avec eux. Pour rappel, vous devez viser à évaluer la configuration de qualité et les formats qui correspondent le mieux à vos besoins. Si vous manquez de temps, les CDN d'images automatisent une partie de cela.

Dans ce premier test, l'encodage d'une photo de 560 Ko d'un coucher de soleil (avec de nombreuses textures) produit une image visuellement et perceptuellement assez similaire pour chacune. La sortie atteint 289 Ko (JPEG@q75), 206 Ko (WebP@q75) et 101 Ko (AVIF@q30) — jusqu'à 81 % d'économies de compression.

Excellentes choses, mais approfondissons.

Voir le stylo [Image format comparison 2](https://codepen.io/smashingmag/pen/WNOPpbd) par Addy Osmani.

Différents outils existent pour comparer la dissemblance entre différents formats d'image (par exemple, DSSIM, simulacres). À l'aide de ces outils, vous pouvez approximer le paramètre de qualité comparable lors de l'évaluation, par exemple, de JPEG en WebP ou de WebP en AVIF. Vous trouverez ci-dessous les mêmes images encodées à une qualité comparable, ciblant la qualité de 70% de JPEG. La sortie est de 323 Ko (JPEG), 214 Ko (WebP@q75) et 117 Ko (AVIF@60) – les tailles sont un peu plus grandes que les valeurs par défaut, mais les gains de compression sont toujours importants.

Voir le stylo [Image format comparison 2a (quality)] (https://codepen.io/smashingmag/pen/NWgopqw) par Addy Osmani.

Nous pouvons également examiner une qualité inférieure dans chaque format, ce qui est vraiment là où WebP et AVIF brillent. Voici JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB) – le WebP a beaucoup moins d'artefacts en blocs par rapport au JPEG, tandis que l'AVIF est à la fois moins en blocs et plus précis sur les détails clés de l'image .

Voir le stylo [Image format comparison 2d (quality)](https://codepen.io/smashingmag/pen/GREzWpN) par Addy Osmani.

Remarque : Ce coucher de soleil est une image à plus haute résolution (2400×1595), et sur les écrans 2×, la qualité peut être bien inférieure et toujours sembler nette selon la façon dont les utilisateurs interagissent avec l'image (par exemple, combien ils pincent et zooment).

Pour un exemple plus extrême des différences entre JPEG et AVIF, nous pouvons regarder un exemple du jeu de données Kodak (évalué par Netflix) comparant un JPEG (4:4:4) à 20 Ko à un AVIF (4:4:4) à 19,8 Ko. Remarquez comment le JPEG a des artefacts en blocs visibles dans le ciel et le toit. L'AVIF est visiblement meilleur, contenant moins d'artefacts de blocage. Il y a, cependant, un niveau de perte de texture sur le toit et un certain flou. C'est toujours assez impressionnant, étant donné que le facteur de compression global est de 59x.

Voir le stylo [Image format comparison 4a (netflix)](https://codepen.io/smashingmag/pen/abwXJvg) par Addy Osmani.

Ensuite, évaluons la qualité d'une image de plage avec de nombreux détails fins, des textures et des zones de faible contraste dans les nuages. Nous comparerons l'original (à 482 Ko) à ce que JPEG, WebP et AVIF peuvent produire avec une limite de taille de fichier de 45 Ko (sans réglage avancé) — en utilisant Squoosh ; cela fonctionne en JPEG (MozJPEG) avec une qualité de 50%, WebP à 54% et AVIF à 36%.

Voir le Pen [Image format comparison 3a (size)](https://codepen.io/smashingmag/pen/rNwPyxP) par Addy Osmani.

En parlant de textures, nous pouvons également effectuer une évaluation similaire de moindre qualité sur une affiche Netflix pour "Le sorceleur" (ciblant 36 Ko). Notez le bloc dans les nuages ​​pour le JPEG et un peu de flou autour du texte rouge pour WebP (qui ne prend en charge que le sous-échantillonnage de chrominance 4:2:0 sans solutions de contournement). L'AVIF est le plus beau, suivi du WebP.

Voir le stylo [Image format comparison 5a (size)](https://codepen.io/smashingmag/pen/dyRavXY) par Addy Osmani.

Enfin, regardons une photo avec beaucoup plus d'éléments de texte que les images précédentes – une affiche. Lorsque nous descendons à des qualités inférieures et visons une taille raisonnablement petite (25 Ko), nous pouvons observer que le JPEG a de fortes bandes de couleurs et des halos autour du texte. Il y a des artefacts en blocs clairs sur les bords. Le WebP évite une partie du blocage, en ayant l'air de mieux en mieux. L'AVIF préserve un peu mieux les bords nets que JPEG ou WebP, produisant une image fluide.

Voir le stylo [Image format comparison 4a (size)](https://codepen.io/smashingmag/pen/WNOPpxM) par Addy Osmani .

Des comparaisons supplémentaires entre le format et la qualité sont disponibles pour la photographie et illustrations.

AVIF Tooling And Support

Depuis sa sortie en 2019, le support d'AVIF a considérablement augmenté. Bien qu'il n'y ait pas eu de méthode directe pour créer ou afficher des fichiers AVIF auparavant, vous pouvez facilement le faire maintenant avec les utilitaires open source disponibles.

Images AVIF dans le navigateur

AVIF a été introduit sur la version de bureau de Chrome en août 2020 avec Chrome 85. Il est également pris en charge sur Chrome pour Android, Opera et Firefox pour ordinateur de bureau et Opera pour Android.

Pour inclure une image AVIF sur votre page, vous pouvez l'ajouter en tant qu'élément d'image. Cependant, les navigateurs qui ne prennent pas en charge AVIF ne peuvent pas rendre cette image. . Il existe deux manières de procéder.

Amélioration progressive

1. Utilisation de l' élément
   Comme permet aux navigateurs d'ignorer les images qu'ils ne reconnaissent pas, vous pouvez inclure des images dans votre ordre de préférence. Le navigateur sélectionne le premier qu'il prend en charge.

2. Utilisation de la négociation de contenu
   La négociation de contenu permet au serveur de servir différents formats de ressources en fonction de ce qui est pris en charge par le navigateur. Les navigateurs qui prennent en charge un format spécifique peuvent l'annoncer en ajoutant le format à leur Accept Request Header. Par exemple, l'en-tête de demande d'acceptation pour les images dans Chrome est :
   Accepter : image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   Le code pour vérifier si AVIF est pris en charge dans le gestionnaire d'événements fetch peut ressembler à ceci :
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image/avif/.test(hdrAccept );
   Vous pouvez utiliser cette valeur pour servir AVIF ou tout autre format par défaut au client.

Créer le balisage pour l'amélioration progressive peut être intimidant. Image CDN offre la possibilité de servir automatiquement le meilleur format adapté au client. Cependant, si vous n'utilisez pas de CDN d'image, vous pouvez envisager d'utiliser un outil comme just-gimme-an-img. Cet outil peut générer le balisage de l'élément d'image pour une image donnée avec différents formats et largeurs. Il crée également les images correspondant au balisage en utilisant Squoosh entièrement côté client. Remarque : l'encodage de plusieurs formats peut prendre un certain temps, vous pouvez donc prendre un café pendant que vous attendez.

Remarque : Les CDN d'images sont mentionnés à plusieurs reprises dans cet article. Les serveurs CDN sont souvent situés plus près des utilisateurs que les serveurs d'origine et peuvent avoir des temps d'aller-retour plus courts (RTT), ce qui améliore la latence du réseau. Cela dit, servir à partir d'une origine différente peut ajouter des allers-retours et avoir un impact sur les gains de performances. Cela peut être bien si le CDN sert d'autres contenus de site, mais en cas de doute, expérimentez et mesurez. ]Bibliothèques
Libaom est l'encodeur et le décodeur open-source maintenu par AOMedia, les créateurs d'AVIF. La bibliothèque est continuellement mise à jour avec de nouvelles optimisations qui visent à réduire le coût d'encodage AVIF, en particulier pour les images fréquemment chargées ou prioritaires. Libavif est un multiplexeur et analyseur open source pour AVIF utilisé dans Chrome pour décoder les images AVIF. Vous pouvez utiliser libavif avec libaom pour créer des fichiers AVIF à partir d'images originales non compressées ou les transcoder à partir d'autres formats. Il existe également Libheifun encodeur/décodeur AVIF/HEIF populaire et Cavif. Grâce à Ben Morss, libgd prend en charge AVIF et arrive également sur PHP en novembre.

Web Apps And Desktop Apps
Squooshune application Web qui permet vous utilisez différents compresseurs d'image, prend également en charge AVIF, ce qui rend relativement simple la conversion et la création de fichiers .avif en ligne. Sur le bureau, GIMP prend en charge l'exportation AVIF. ImageMagick et Paint.net prennent également en charge AVIF tandis que les plug-ins de la communauté Photoshop pour AVIF sont également disponibles.

Bibliothèques JavaScript

• AVIF.js est un polyfill AVIF pour les navigateurs qui ne prennent pas encore en charge AVIF. Il utilise l'API Service Worker pour intercepter l'événement de récupération et décoder les fichiers AVIF.
• Avif.io est un autre utilitaire Web qui peut convertir des fichiers de différents types d'images en AVIF sur le côté client. Il appelle le code Rust dans le navigateur à l'aide d'un WebWorker. La bibliothèque de conversion est compilée vers WASM à l'aide de wasm-pack.
• Sharp est un module Node.js qui peut convertir de grandes images dans des formats standard en images plus petites, conviviales pour le Web, y compris des images AVIF.

Utilitaires
Les utilitaires de conversion ou de transformation d'images prennent en charge le format AVIF. Vous pouvez utiliser MP4Box pour créer et décoder des fichiers AVIF.

In Code
go-avif implémente un encodeur AVIF pour Go en utilisant libaom . Il est livré avec un utilitaire appelé avif qui peut encoder des fichiers JPEG ou PNG en AVIF.

Toute personne intéressée à apprendre à créer des images AVIF à l'aide de Squoosh ou à créer l'encodeur de ligne de commande avifenc peut le faire au laboratoire de programmation sur servant les fichiers AVIF.

AVIF And Performance

AVIF peut réduire la taille des fichiers d'images grâce à une meilleure compression. Par conséquent, les fichiers AVIF se téléchargent plus rapidement et consomment moins de bande passante. Cela peut potentiellement améliorer les performances en réduisant le temps de chargement des images.

L'audit des meilleures pratiques de Lighthouse considère désormais que la compression d'images AVIF peut apporter des améliorations significatives. Il collecte toutes les images BMP, JPEG et PNG de la page, les convertit en WebP et estime la taille du fichier AVIF. Cette estimation permet à Lighthouse de signaler les économies potentielles dans la section « Diffusion d'images dans des formats de nouvelle génération ».

Tim Vereecke a signalé une économie de 25 % d'octets et un impact positif sur LCP (par rapport au JPEG) après la conversion de 14 millions d'images sur le site Web en AVIF mesurées à l'aide du Real User Monitoring (RUM).

AVIF Problèmes

Le plus gros inconvénient d'AVIF à l'heure actuelle est qu'il ne prend pas en charge de manière uniforme tous les navigateurs. L'introduction d'AVIF en tant qu'amélioration progressive permet de surmonter ce problème. Quelques autres aspects dans lesquels AVIF ne répond pas aux normes idéales pour un format de fichier moderne.

• Les versions modernes de Chrome (Chrome 94+) prennent en charge le rendu progressif AVIF contrairement aux anciennes versions. Bien qu'au moment de la rédaction de cet article, il n'existe pas d'encodeur capable de créer ces images facilement, nous espérons que cela changera.
• Les images AVIF prennent plus de temps à encoder et à créer. Cela pourrait être un problème pour les sites qui créent des fichiers images de manière dynamique. Cependant, l'équipe AVIF travaille à l'amélioration des vitesses d'encodage. Les contributeurs d'AVIF chez Google ont également signalé de beaux gains de performances. Depuis le 1er janvier 2021, l'encodage AVIF a connu une amélioration d'environ 47 % du temps de transcodage (il s'agit de la vitesse 6, la valeur par défaut actuelle pour libavif) et une amélioration de 73 % au cours de l'année civile. Depuis juillet, il y a également eu une amélioration de 72 % des temps de transcodage à la vitesse 9 (encodage à la volée).

• Le décodage des images AVIF pour l'affichage peut également prendre plus de puissance CPU que d'autres codecs, bien que des tailles de fichier plus petites puissent compenser cela.
• Certains CDN ne prennent pas encore en charge AVIF par défaut pour leurs modes de formatage automatique car il peut toujours être plus lent à générer à la première requête.

WebP

Nous avons mentionné WebP à quelques reprises, mais revenons brièvement sur son historique. Google a créé le format WebP en 2011 en tant que format d'image qui contribuerait à rendre le Web plus rapide. Au fil des ans, il a été largement accepté et adopté en raison de sa capacité à compresser des images dans des tailles de fichiers inférieures à celles de JPEG et PNG. WebP offre à la fois une compression sans perte et avec perte à une qualité visuelle acceptable et prend en charge la transparence et l'animation du canal alpha.

La compression WebP avec perte est basée sur le codec vidéo VP8 et utilise un codage prédictif pour encoder une image. Il utilise des valeurs dans les blocs de pixels voisins pour prédire la valeur dans un bloc et code uniquement la différence. Les images WebP sans perte sont générées en appliquant plusieurs techniques de transformation aux images pour les compresser.

Avantages WebP

Les images sans perte WebP sont généralement 26 % plus petites que PNG et les images WebP avec perte sont de 25 à 34 % plus petites que les images JPEG de qualité similaire. La prise en charge de l'animation en fait également un excellent remplacement pour les images GIF. Ce qui suit montre une image PNG transparente sur la gauche et l'image WebP correspondante sur la droite générée par l'application Squoosh avec une réduction de taille de 26%.

En outre, WebP offre d'autres avantages tels que :

• Transparence
  WebP dispose d'un canal de transparence 8 bits sans perte avec seulement 22 % d'octets de plus que PNG. Il prend également en charge la transparence RVB avec perte, qui est une fonctionnalité unique à WebP.
• Métadonnées
  Le format de fichier WebP prend en charge les métadonnées de photo EXIF ​​et les métadonnées de document numérique XMP (Extreme Memory Profile). Il peut également contenir un profil de couleur ICC.
• Animation
  WebP prend en charge les images animées en vraies couleurs.

Remarque : Dans le cas d'images transparentes de type vectoriel telles que ce qui précède, un SVG optimisé peut finalement fournir un fichier plus net et plus petit par rapport à un format raster. , affichez et chargez les fichiers WebP.

Traitement et affichage des fichiers WebP

WebP est pris en charge sur les dernières versions de presque tous les principaux navigateurs actuels.

Si les développeurs souhaitent servir WebP sur d'autres navigateurs à l'avenir, ils peuvent le faire en utilisant l'élément ou les en-têtes de requête comme indiqué dans la section sur AVIF.

Réseaux de diffusion de contenu d'image (CDN) prend également en charge les images réactives avec sélection automatique de format pour les images dans WebP ou AVIF en fonction de la prise en charge du navigateur. Les plug-ins WebP sont disponibles pour d'autres piles populaires telles que WordPressJoomlaDrupaletc. La prise en charge initiale de WebP est également disponible dans WordPress core à partir de WordPress 5.8.

Vous pouvez facilement afficher les images WebP en les ouvrant dans un navigateur qui les prend en charge. De plus, vous pouvez également les prévisualiser sur Windows et macOS à l'aide d'un module complémentaire. L'installation du plug-in Quick Look pour WebP (qlImageSize) vous permettrait de prévisualiser les fichiers WebP à l'aide de l'utilitaire Quick Look. L'équipe WebP a publié des bibliothèques et des utilitaires précompilés pour le codec WebP pour Windows, macOS et Linux. Leur utilisation sous Windows vous permet de prévisualiser les images WebP dans l'explorateur de fichiers ou la visionneuse de photos Windows.

Conversion d'images en WebP

En plus des bibliothèques fournies par l'équipe WebP, plusieurs source et les outils commerciaux d'édition d'images prennent en charge WebP.

Utilitaires :
Comme AVIF, Squoosh peut également convertir des fichiers en WebP en ligne, comme indiqué dans la section précédente. XnConvert est un utilitaire que vous pouvez installer sur le bureau pour convertir différents formats d'image, dont WebP. XnConvert peut également vous aider à supprimer et éditer les métadonnées, recadrer et redimensionner, la luminosité et le contraste, personnaliser la profondeur des couleurs, le flou et la netteté, les masques et les filigranes, et d'autres transformations.

Modules Node.js :
Imagemin est un module de minification d'image populaire avec un module complémentaire pour convertir des images en WebP (imagemin-webp). Le module complémentaire prend en charge les modes WebP avec et sans perte.

Autres :
Plusieurs applications de conversion et de manipulation d'images prennent en charge le format WebP. Ceux-ci incluent SketchGIMPImageMagicketc. Un plug-in Photoshop pour WebP est également disponible.

WebP Production Utilisation

En raison de ses avantages en termes de compression par rapport aux formats JPEG et PNG, de nombreuses grandes entreprises utilisent WebP en production pour réduire les coûts et les temps de chargement des pages Web. Google rapporte des économies de 30 à 35 % en utilisant WebP par rapport à d'autres systèmes de compression avec perte, en répondant à 43 milliards de demandes d'images par jour, dont 26 % de compression sans perte.

Pour atteindre sa large base d'utilisateurs dans les marchés émergents où les données sont chères, Facebook a commencé servir des images WebP aux utilisateurs d'Android. Ils ont observé « des économies de données de 25 à 35 % par rapport au JPG et de 80 % par rapport au PNG ». du support du navigateur et des outils. Il existe encore peu de compromis avec WebP lorsque l'on considère toutes les fonctionnalités qu'un format moderne devrait idéalement prendre en charge.

• WebP est limité à une précision de couleur de 8 bits. Par conséquent, il ne peut pas prendre en charge les images HDR/wide gamut.
• WebP ne prend pas en charge les images avec perte sans sous-échantillonnage de chrominance. Le WebP avec perte fonctionne exclusivement avec un YCbCr 4:2:0 8 bits, tandis que le WebP sans perte fonctionne avec le format RGBA. Cela peut affecter les images avec des détails fins, des textures chromatiques ou du texte coloré. Voir ci-dessous pour un exemple.
• Il ne prend pas en charge le décodage progressif, mais prend en charge le décodage incrémental. Cela peut quelque peu compenser cela, mais l'effet sur le rendu peut être différent.

Idéalement, vous devez générer des fichiers WebP à partir des fichiers sources de la meilleure qualité disponibles. La conversion de fichiers JPEG de qualité inférieure en WebP n'est pas très efficace car vous perdez deux fois en qualité. previous section, we have come up with the following table.

Note: The number of stars is based on a general opinion and may differ for specific use cases.

Following are some of the key points to be considered when referring to this table.

• Compression for photographic and non-photographic images may further differ based on the fidelity (quality) of the images. We have indicated an overall score here.
• You should choose quality and chroma subsampling settings based on the purpose of the images. Low to medium-fidelity images may be acceptable in most scenarios on the web, e.g., for news, social media, and e-commerce. Image archival, movie, or photography websites require high fidelity images. You should test the actual savings due to compression for high fidelity before converting to another format.
• Lack of progressive decoding support and speed may be a problem for encoding/decoding AVIF files. For websites with average-sized images, the byte savings due to compression can compensate for speed and the absence of progressive decoding as images get downloaded quickly.
• When comparing compression offered by image formats, compare file sizes at the same DSSIM.
• The quality setting used when encoding need not be the same for different formats to yield the same quality of images. A JPEG encoded at a quality setting of 60 may be similar to an AVIF at a quality setting of 50 and a WebP at a quality setting of 65, as suggested by this post.
• Extensive studies are still required to measure the actual impact on LCP when comparing formats.
• We have not included other formats like JPEG XL and HEIC in this comparison. JPEG XL is still in a relatively nascent stage, and only Apple devices support HEIC (while Safari does not). Royalty and license fees further complicate support for HEIC.

AVIF does check most of the boxes overall, and WebP has better support and offers better compression when compared to JPEG or PNG. As such, you should undoubtedly consider WebP support when optimizing images on your website. Evaluating AVIF if it meets your requirements and introducing it as a progressive enhancement could provide value as the format gets adopted across different browsers and platforms. With quality comparison tooling and improving encoding speeds using AVIF would ultimately get easier.

With thanks to Leena Sohoni-Kasture for her heavy input into this article as well as Patrick Meenan, Frank Galligan and Yoav Weiss for their reviews.

A Smashing Note

Earlier this year, we published a brand new book with Addy on everything you need to know to optimize how you compress, serve and maintain images — boosting performance along the way. We are shipping the books for free worldwideand if you get the book nowyou will also receive a hand-written postcard by Addy with a personal message.

Source link