The Misconception About Image Formats

Recently, Safari started to partially support the AVIF format as the last major browser. A great improvement for web performance. AVIF is one of the more efficient image formats out there, promising smaller file sizes with better quality. And some developers might be tempted to switch in general to AVIF to maximize performance.

But one disclaimer first: Image-related performance issues are actually less common than we think. Often the improvements are just incremental. Other factors like lazy loading, efficient caching, backend optimizations, reducing scripts, etc. can have a much bigger impact on overall performance. But let's focus here solely on images, even then it's not as simple as just switching to the newest format available.

The Basics

Before diving into the more complicated issues, let's go over some fundamentals of image formats and optimization. If you're already familiar with web performance, you probably want to skip this part.

Lossless vs. Lossy Compression

As the name says, "lossless" compression keeps all image details intact, while "lossy" is able to achieve higher compression rates by permanently removing some data. Lossless is often a good choice for photographers or artists who want to show their work on the web. But for web performance, lossy compression is generally the better option. Depending on the final image quality the file size can be significantly reduced while there is no noticeable difference for the end user. Some formats even support both lossless and lossy compression. AVIF and WebP, for example, can be used in either way.

More Than Just Compression

It's not only about choosing between lossy and lossless. Other factors matter too:

• Alpha Channel: Not every format supports transparency
• Animation: use animated WebP/AVIF, not GIFs
• Color Depth/Range: Different formats have different bit depth and color space support
• Metadata: Important for e.g. professional photographers
• Progressive Loading: Not commonly used anymore
• Browser support: In some cases specific browser support is required e.g. IE, fallback can be used
• And probably many more

Find The Right Format

Even if the newest image format checks all the right boxes on paper, it might still not be the right one to use. As an example I converted several photos and some vector graphics into AVIF, WebP, JPEG, and PNG with different resolutions and quality settings. My goal is not to provide proof of when to use which image format, but rather to highlight patterns and trade-offs that might help with finding the right formats.

To keep the testing consistent, I randomly picked five photos and vector graphics from the web. I then calculated the average file size from these five files for each test case. For lossy formats, I tested compression levels at 30%, 60%, and 90% quality. The images were resized to 1440p, 1080p, and 480p to cover different scenarios.

As the results show there is no clear winner. Still some general patterns can be observed though they are not always true.

AVIF works well for higher compression rates and bigger resolutions. At low quality settings (30%), AVIF mostly produces the smallest files in comparison. This makes it a fitting choice for images where some quality losses are acceptable.

WebP on the other hand seems to handle generally higher quality settings and lower resolutions better. This makes WebP often a good choice if balancing between quality for smaller images and size is required.

For lossless compression, AVIF and WebP are mostly on par with personally giving the slight edge to WebP in most cases. But that said, if AVIF shows better results the size difference tends to be more significant compared to WebP.

Although not shown in the results, I've personally observed issues with AVIF when handling noise-heavy images. Especially in such cases testing is essential to figure out if WebP is the better option.

While AVIF and WebP generally outperform JPEG and PNG, they are not entirely obsolete. Occasionally, I come across niche cases where JPEG or PNG deliver better results, particularly for smaller and simpler images. This was one reason I included vector graphics in my tests, to illustrate this point in certain scenarios. Unfortunately, the results didn't turn out as expected.

The Best Approach

In short: Testing. Rather than blindly choosing a format, I normally use Gimp as a render engine for my primary images to generate different formats and sizes with a variety of settings. I compare the results and choose the subjective best versions for each breakpoint. This might sound time intense but through a simple script it costs me only a couple of minutes. For images that are not as important, I usually stick with WebP.

So if I had to give some rules of thumb for a good baseline strategy, I would recommend the following points:

• Use AVIF and WebP as primary formats, testing both to compare file sizes.
• Stick to 60-75% quality for standard images, and 30% for less important ones.
• Keep JPEG and PNG as fallbacks
• Prioritize SVG for vector-based graphics. I only used them here with other formats for demonstration purposes.

Decoding

One more aspect ignored so far but worth mentioning is how different formats handle decoding. Some formats may be optimized for smaller file sizes but take longer and require more browser resources to decode. Others may load faster but come with larger file sizes. Unfortunately, this is far beyond my expertise, and I couldn't find any helpful articles about it either. Still, it might be another factor to consider, though I doubt it has any significant real-world impact.

New Formats

New image formats emerge all the time, but the differences in compression efficiency are becoming increasingly marginal. JPEG-XL, for example, promised to be the next step forward for web development. However, its benefits have been so minor compared to the existing formats that only Chrome implemented it so far and there are already talks about removing it again.

It's likely that we'll see several more iterations of image formats before the improvements become significant enough for further adoptions. And even then the browser vendors need to agree on a common standard. Until then, we can stick to our current formats, and reigniting the debate once more when the time comes.

Conclusion

At the end of the day, blindly using the newest format won't necessarily give you the best results. Testing different formats for different images is the only way to find the right balance.