Should AVIF be the dominant image format on the web?

While the JavaScript community continues to brawl over which libraries and frameworks have the smallest bundle footprint, it’s easy to forget how large images are in comparison. Luckily, we continue to see innovation in the image compression space. One of which is the relatively new image format, AVIF! I try to avoid jumping on today’s shiniest tech and make informed decisions, so I want to find out how AVIF compares to competing formats like JPEG and WebP.

For most of my projects, we tend to have a single generic image optimization step, so the goal is to find out what image format works best without tweaking settings for individual images.

Source material

Before we jump into the data, I want to disclose what data and tools I’ve used to get some degree of reproducibility.

I took the pictures from Unsplash Awards 2022, which lists all finalists. Note that I excluded the Unsplash+ images because these weren’t available in a higher resolution without a watermark. In total, that results in 118 images.

With sharp, I resized and cropped these images and saved them as lossless PNG files. All images are cropped to a resolution of 1024×1024 in an attempt to find a balance between big and medium-sized images on the web, while also considering how long it takes for my computer to re-encode all these images — I don’t have a supercomputer.

These PNG images are then converted to AVIF, JPEG, and WebP images using a compression setting from 10 to 100 with increments of 10, totalling 3,540 (118×3×10) compressed images.

I deliberately avoided tweaking format-specific compression settings to simulate a realistic environment where images are automatically converted with global settings. These environments are often set up by people who aren’t experts, nor have time to thoroughly tweak every parameter.

You can check out the code in the repository.

Are AVIF images more accurate?

Let’s find out how similar AVIF, JPEG, and WebP are to their original. When we compare them using full-reference image quality assessment algorithms like mean squared error, peak signal-to-noise ratio, and the structural similarity index, we see that AVIF outperforms both JPEG and WebP starting at a quality setting between 30-40%. Also, note that WebP performs slightly better than JPEG.

It appears that AVIF is the right choice if you’re using a quality setting of 40% or up.

Although these image quality assessment algorithms are useful to compare different compression algorithms, it’s quite abstract. Do these algorithms align with perception? At what score is the compressed image perceptually accurate or good enough? Can people tell the difference between an SSIM of 0.996 and 0.998? To get more context, we need subjective ratings as well.

I’ve compared all compressed images to their original and marked them either perceptually lossless, loss of detail (e.g. a wood texture turned into a solid colour), or loss of features (e.g. hair strands or tree branches turned into a blur) to denote perceptual loss. This way we get an idea, albeit biased and subjective, of how quality settings influence perceived accuracy. Note that this task was performed under varying conditions and in an unoptimized environment — take it with a pinch of salt.

Although WebP outperforms JPEG in accuracy on a per-pixel basis, it’s more prone to leave noticeable artefacts and consequently scores worse on perceptual accuracy. This contradicts the algorithmic accuracy.

As for JPEG and AVIF, things get more complicated. At lower quality settings, AVIF produces a more noticeable loss of information than JPEG. Starting at 50%, AVIF compression no longer shows pronounced artefacts or loss of features, while JPEG sometimes does.

Based on the graphs above, we can conclude AVIF is consistently accurate at a quality setting of 60-70%, JPEG at 80%, and WebP at 90%. Accuracy isn’t the full story, though. If WebP at 90% is smaller than AVIF at 70%, we might still opt for WebP.

Are AVIF images smaller?

AVIF appears to yield more accurate images compared to JPEG and WebP at a quality setting of around 50% and up. Despite that, we might opt for another format if that jump in accuracy also comes with a jump in file size.

When we look at compression ratios of different image formats, AVIF becomes less of an attractive choice. Starting at a quality setting of just over 50%, WebP starts to outperform AVIF, and at just over 80%, JPEG yields a better compression ratio as well.

Each format vastly outperforms a lossless PNG file. At a quality setting of 70%, we get a saving of over 90% in file size for marginally less detailed pictures. Despite that, the difference between the compressed image formats is still huge. At the same quality setting, the average compression ratio of WebP is 0.037, meaning the WebP images are 30% smaller than AVIF. This might not be obvious on the graph as it uses a logarithmic scale.

Although AVIF produces more accurate images, it comes with a noticeable file size penalty. With these conflicting findings, how do make a good tradeoff between accuracy and file size?

Is AVIF better?

We’ve compared the accuracy and file size of various image formats per quality setting. Although this gives us insight into how the dial we control as an author affects the result, it also skews findings.

When we graph compression ratio versus accuracy (SSIM), something interesting emerges. In the graph below, AVIF, JPEG and WebP are shown as three distinct lines that do not cross. They all follow the same trend: as compression ratio (i.e. file size) increases, so does accuracy. This isn’t too surprising — to get a higher accuracy, we need to save more information, and thus the file gets bigger. Ideally, we want high accuracy and a low compression ratio, meaning the top left corner of our graph is most interesting. AVIF appears to be a clear winner with its curve being pulled into that top left corner most, followed by WebP, and JPEG coming in last.

Each curve consists of 10 points, representing the accuracy and compression ratio at specific quality settings. Note that they don’t align. For example, the first point of WebP’s curve, which is WebP at a compression setting of 10%, is roughly equal in accuracy to AVIF and JPEG at 20%.

This chart is better to compare accuracy and compression ratios. For example, we can observe that AVIF with a quality setting of 70% is roughly equal in (algorithmic) accuracy compared to WebP and JPEG at 90%, though significantly smaller than WebP and JPEG!

When we replace this chart’s accuracy axis with perceived accuracy, we get a janky graph that’s similar in nature, but one that tells a different story. At first glance, AVIF takes the lead again, but at some point starts to align with the JPEG and WebP curves. This is the equilibrium of perceptual fidelity — while the previous chart shows that AVIF continues in quality, we can no longer perceive it.

The top of the S-shaped curve tells us that at some point we stop seeing much improvement in accuracy, but we do see significant jumps in file size. For AVIF, at a quality setting of 60%, accuracy virtually grinds to a halt while quickly catching up with a file size similar to that of JPEG. At 70%, the perceived accuracy of AVIF and JPEG is almost indistinguishable and file sizes converge. After 80%, AVIF inflates in file size much faster than other formats without improvement in perceived accuracy.

It appears AVIF is the obvious choice until we study the graphs closely. At higher qualities, a minor increase in accuracy comes at a size penalty, and JPEG and WebP start to compete again. Moreover, at very high quality settings, that increase in accuracy isn’t perceivable without pixel peeping.

Should we switch to AVIF?

Choosing image format(s) and quality settings for the web is a tradeoff of various concerns. Accuracy, size, storage, support, and more. We’ll explore these, but if you hoped to get a short and simple answer, it’s the familiar but uncomfortable answer: it depends.

As we discovered, AVIF often is more accurate and smaller in file size than competing image formats. A quality setting of 60-70% is a good place to start where perceivable accuracy is consistent enough across images without exploding in file size. At the cost of accuracy, we can lower it to 50%, but anything lower typically comes with bad artefacts. I recommend staying below 80% as any value higher is indistinguishable. If you care about improved pixel accuracy, JPEG might give you that at a smaller file size.

Browser support for AVIF is good, but not great. Edge lags behind, so we need to use the <picture> tag to set a fallback image. This means we’ll need to store at least two image formats, significantly increasing storage requirements and processing power to convert these.

Despite the findings in this article, consider doing your own research, as some nuances remain unexplored. While manually comparing images, I noticed that some image formats outperform others for specific kinds or styles of images. It might be worth exploring further if you want to optimize for a specific style, like brightly lit product pictures or monochrome cartoons.

Edit (November 12th, 2023)

Sharp author Lovell Fuller reached out on Mastodon to say that my code created palette-based PNGs instead of lossless ones. I fixed the code and recomputed the data, which slightly changes the findings. The algorithmic accuracy scores for JPEG and WebP are much closer than they were. Moreover, AVIF compression ratios are more favourable in the new measurements, so you can increase the AVIF quality setting further and still get smaller files than JPEG and WebP. I updated the article to reflect those changes.