{"id":325691,"date":"2020-11-26T07:07:55","date_gmt":"2020-11-26T15:07:55","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325691"},"modified":"2020-11-26T07:08:22","modified_gmt":"2020-11-26T15:08:22","slug":"three-things-you-didnt-know-about-avif","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/three-things-you-didnt-know-about-avif\/","title":{"rendered":"Three Things You Didn\u2019t Know About AVIF"},"content":{"rendered":"\n

AVIF<\/a>, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports<\/a> and comparisons<\/a> show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge<\/a> in regards to encoding and decoding. Encoding, decoding, settings and parameters has been well discussed elsewhere. <\/p>\n\n\n\n

No doubt, AVIF images generate a smaller payload and are nice looking. In this post, we\u2019ll take a closer look at issues to be aware or before you go all in on AVIF.<\/p>\n\n\n\n\n\n\n

1. WebP is Better for Thumbnails<\/h3>\n\n\n

One interesting observation is that for small dimension images, WebP will produce lighter payload images than AVIF.<\/p>\n\n\n\n

It\u2019s probably possible to explain why, and tune the encoder to address this case. However, that is not an option for most people. Most people would probably rely on an image optimizer like squoosh.app<\/a> or an image CDN like ImageEngine<\/a>. The below comparison uses exactly these two alternatives for AVIF conversion. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We see that WebP will generally produce images with a higher file size than AVIF. On larger dimension images, ImageEngine performs significantly better than squoosh.app.<\/p>\n\n\n\n

Now, to the interesting observation. On images around 100px \u00d7 100px squoosh.app passes ImageEngine on effectiveness, but then also WebP catches up and for a 80px x 80px image. WebP is actually the most effective image measured in file size. <\/p>\n\n\n\n

The test performs relatively consistently on different types of images. For this illustration, this image<\/a> from Picsum is used.<\/p>\n\n\n\n

Pixels<\/th>Original JPEG (bytes)<\/th>Optimized WebP (bytes)<\/th>ImageEngine AVIF (bytes)<\/th>squoosh.app AVIF (bytes)<\/th><\/tr><\/thead>
50<\/td>1,475<\/td>598<\/td>888<\/td>687<\/td><\/tr>
80<\/td>2,090<\/td>1,076<\/td>1,234<\/td>1,070<\/td><\/tr>
110<\/td>3,022<\/td>1,716<\/td>1,592<\/td>1,580<\/td><\/tr>
150<\/td>4,457<\/td>2,808<\/td>2,153<\/td>2,275<\/td><\/tr>
170<\/td>5,300<\/td>3,224<\/td>2,450<\/td>2,670<\/td><\/tr>
230<\/td>7,792<\/td>4,886<\/td>3,189<\/td>3,900<\/td><\/tr>
290<\/td>10,895<\/td>6,774<\/td>4,056<\/td>5,130<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n

2. AVIF Might Not Be the Best for Product Images with High Entropy<\/h3>\n\n\n

Typically, a product page consists of images of the product, and when a user\u2019s mouse hovers over or clicks on the product image, it zooms in to offer a closer look at the details.<\/p>\n\n\n\n

It is worth noting that AVIF will in certain cases reduce the level of detail, or perceived sharpness, of the image when zoomed in. Especially on a typical product image where the background is blurred or has low entropy while foreground, and product, has more detail and possibly higher entropy.<\/p>\n\n\n\n

Below is a zoomed in portion of a bigger product image (JPEG<\/a>, AVIF<\/a>) which clearly illustrates the difference between a regularly optimized JPEG versus an AVIF image optimized by squoosh.app.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


The AVIF is indeed much lighter than the JPEG, but in this case the trade off between visual quality and lower file size has gone too far. This effect will not be as perceptible for all types of images, and therefore will be difficult to proactively troubleshoot in an automated build process that relies on responsive images syntax for format selection.<\/p>\n\n\n\n

Moreover, unlike JPEG, AVIF does not support progressive rendering. For a typical product detail page, progressive rendering might provide a killer feature to improve key metrics like Largest Contentful Paint and other Core Web Vitals metrics. Even if a JPEG takes a little bit longer time to download due to its larger file size compared to AVIF, chances are that it will start rendering sooner than an AVIF thanks to its progressive rendering mechanism. This case is well illustrated by this video<\/a> from Jake Achibald.<\/p>\n\n\n

3. JPEG 2000 is Giving AVIF Tough Competition<\/h3>\n\n\n

The key selling point of AVIF is its extremely low file size relative to an acceptable visual image quality. Early blogs and reports have been focusing on this. However, JPEG2000 (or JP2) may in some cases be a better tool for the job. JPEG2000 is a relatively old file format and does not get the same level of attention as AVIF, even if the Apple side of the universe already supports JPEG2000<\/a>.<\/p>\n\n\n\n

To illustrate, let\u2019s look at this adorable puppy<\/a>. The AVIF file size optimized by squoosh.app is 27.9 KB with default settings. Converting the image to JPEG2000, again using ImageEngine<\/a>, the file size is 26.7 KB. Not much difference, but enough to illustrate the case.<\/p>\n\n\n\n

What about the visual quality? DSSIM<\/a> is a popular way to compare how visually similar an image is to the original image. The DSSIM metric compares the original image to a converted file, with a lower value indicating better quality. Losslessly converting the AVIF and JPEG2000 version to PNG, the DSSIM score is like this:<\/p>\n\n\n\n

<\/th>DSSIM (0 = equal to original)<\/th>Bytes<\/th><\/tr><\/thead>
JPEG2000<\/a><\/td>0.019<\/td>26.7 KB<\/td><\/tr>
AVIF<\/a><\/td>0.012<\/td>27.9 KB<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

AVIF has slightly better DSSIM but hardly visible to the human eye.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

Right Tool for the Job<\/h3>\n\n\n

The key takeaway from this article is that AVIF is hardly the \u201csilver bullet,\u201d or the one image format to rule them all. First of all, it is still very early in the development of both encoders and decoders. In addition, AVIF is yet another format to manage. Like Jake Archibald also concludes in his article<\/a>, offering 3+ versions of each image on your webpage is a bit of a pain unless the entire workflow (resize, compress, convert, select, deliver) is all automated.<\/p>\n\n\n\n

Also, like we\u2019ve seen, just because a browser supports AVIF, it doesn’t mean that it is the best choice for your users.<\/p>\n\n\n\n

Using responsive images and adding AVIF to the list of image formats to pre-create is better than not considering AVIF at all. A potential challenge is that the browser will then pick AVIF if it\u2019s supported regardless of whether AVIF is the right tool or not.<\/p>\n\n\n\n

However, using an image CDN like ImageEngine<\/a>, will to a greater extent be able to dynamically choose between supported formats and make a qualified guess whether WEBP, JPEG2000 or AVIF will give the best user experience. Using an image CDN to automate the image optimization process will take into account browser compatibility, image payload size and visual quality.<\/p>\n","protected":false},"excerpt":{"rendered":"

AVIF, the file format based on the AV1 video codec, is the latest addition to the next-gen image formats. Early reports and comparisons show good results compared to JPEG and WebP. However, even if browser support is good, AVIF is still on the bleeding edge in regards to encoding and decoding. Encoding, decoding, settings and […]<\/p>\n","protected":false},"author":4,"featured_media":325694,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/image3.png?fit=1200%2C742&ssl=1","jetpack-related-posts":[{"id":334315,"url":"https:\/\/css-tricks.com\/maximally-optimizing-image-loading-for-the-web-in-2021\/","url_meta":{"origin":325691,"position":0},"title":"Maximally optimizing image loading for the web in 2021","date":"February 16, 2021","format":false,"excerpt":"Malte Ubl's list for: 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. Fluid width images in CSS, not forgetting the height and width attributes in HTML so you get proper aspect-ratio on first render.Use\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/resp-images-thumb.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":365579,"url":"https:\/\/css-tricks.com\/useful-tools-for-creating-avif-images\/","url_meta":{"origin":325691,"position":1},"title":"Useful Tools for Creating AVIF Images","date":"May 9, 2022","format":false,"excerpt":"AVIF (AV1 Image File Format) is a modern image file format specification for storing images that offer a much more significant file reduction when compared to other formats like JPG, JPEG, PNG, and WebP. Version 1.0.0 of the AVIF specification was finalized in February 2019 and released by Alliance for\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/avif-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320702,"url":"https:\/\/css-tricks.com\/avif-has-landed\/","url_meta":{"origin":325691,"position":2},"title":"AVIF has landed","date":"September 8, 2020","format":false,"excerpt":"Everybody is talking about AVIF today because of Jake's blog post. As the say, I was today years old when I learned AVIF was a thing. But thanks to web technology being ahead of the game for once, we can already take advantage of it. This will be easier if\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/Screen-Shot-2020-09-08-at-2.07.31-PM.png?fit=1200%2C367&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373484,"url":"https:\/\/css-tricks.com\/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now\/","url_meta":{"origin":325691,"position":3},"title":"GIFs Without the .gif: The Most Performant Image and Video Options Right Now","date":"September 28, 2022","format":false,"excerpt":"So you want an auto-playing looping video without sound? In popular vernacular this is the very meaning of the word GIF. The word has stuck around but the image format itself is ancient and obsolete. Twitter, for example, has a \u201cGIF\u201d button that actually inserts a