AVIF format — should you use it instead of WebP or JPEG?

AV1 Image File Format (AVIF) is an open image compression format that uses the AV1 video codec and offers superior image quality and smaller file sizes compared to formats like JPEG and WebP. Since it was first introduced in 2019, it has quickly become the new cool kid in the block that is a more efficient choice for serving images. Recently, Google has even given it a green light as an approved file type for its search engine! You may have already seen or used AVIF images yourself — it’s becoming quite popular!

But is this image format right for your project? How does it compare with existing image formats like WebP and JPEG, which have been serving the web for years? In this article, we will take a friendly look at how AVIF image formats stack up to existing formats like WebP and JPEG, discuss the benefits and limitations of using AVIF images, and give some tips on how you can start serving AVIF images to your users today.

At the end of this article, you should be able to decide if this is the right format for your project, so grab a cup of coffee or tea, get cozy, and let’s dive in together!

How AVIF works

Before jumping into making decisions, first, let’s talk about the codec for AVIF images — AV1 video codec. It was first created in 2015 by the Alliance for Open Media (AOMedia), a non-profit organization formed by companies such as Google, Amazon, Apple, Microsoft, and Netflix to develop open, royalty-free technology for multimedia delivery. AVIF image format is based on the AV1 video codec, which AOMedia developed to provide better compression efficiency than existing codecs like H.264 and VP9.

So how does the AV1 codec works? The AVIF format uses the AV1 video codec for highly efficient compression and then uses the HEIF (High-Efficiency Image File) container to organize and store the image data.

Let’s break it down step by step on how the codec operates:

• First, it divides the image into tiny blocks (from 4×4 to 64×64 pixels) so it can analyze and compress each part separately, allowing for a more efficient encoding and smaller file sizes.

• The codec then looks for patterns, colors, and edges in each block and predicts the values based on the nearby blocks. Instead of saving all the original data, it saves only the differences between the predicted and actual values, thus saving a lot of space.

• The image data is then converted into patterns (like waves) to make it easier to compress. Then, it removes less important details (in lossy compression) to save even more space.

• Finally, the codec packs the data more tightly by giving short codes to common patterns and longer codes to less common ones. This step makes the file as small as possible.

• Once the image is compressed, it is stored in the HEIF container. This container organizes the image data along with additional information like camera settings, location, and color details into one neat AVIF file.

Benefits of using AVIF image

What are some of the cool things you get when you use the AVIF image format? Some of these cool perks include:

• Sharper image quality. AVIF delivers exceptional image quality, even for high-resolution images. In various tests, it has consistently outperforms JPEG and WebP in clarity and sharpness. Using tools like SSIM (Structural Similarity Index), you can see the difference yourself. Netflix’s in-depth study explained in details how AVIF images maintain better quality than JPEG and WebP — even at comparable file sizes.

• Smaller file sizes, big savings. Smaller file sizes mean faster load times and reduced storage costs — and AVIF is a star here and it shines. The format compresses images more effectively than JPEG and WebP without compromising quality. Check out this detailed table, of various image formats after compression and notice how AVIF stands out by offering dramatically smaller file sizes.

• Stunning visuals for modern displays. Need support support for HDR (High Dynamic Range) content and Wide Color Gamut (WCG)? AVIF has that built-in. You need brighter highlights, deeper colors, and incredible detail that make your visuals pop on modern screens that supports HDR content? AVIF can serve you that effortlessly.

• Transparency? Checked! AVIF includes alpha channel support, making it a perfect choice for images requiring PNG-like transparency, such as overlays and web graphics.

• Edit without compromise. Thanks to its HEIF container, AVIF supports non-destructive editing this means you can crop, resize, or tweak your images without altering the original file.

• Royalty-free. Built on the open-source, royalty-free AV1 codec, AVIF is cost-effective and accessible for businesses across industries.

• Web performance optimization. Smaller file sizes and efficient rendering mean faster load times and drastically improved core web metrics like Largest Contentful Paint (LCP), reduced bandwidth usage, and better SEO. I mean — no one has ever complained that a website is too fast to load and AVIF just helps you achieve that.

• Future-proof. Backed by AOMedia and designed with modern use cases in mind, AVIF supports advanced visual requirements, making it a forward-thinking alternative to older formats. With over 94% of browsers already in support as of the time of writing this blog post, it’s a great choice for modern web development.

Limitations of AVIF image format

As with every technology, while AVIF offers impressive features, it does comes with some trade-offs which include:

• Higher encoding costs. Encoding AVIF images is computationally intensive and more expensive than encoding JPEG and WebP images. Fully leveraging AVIF requires a solid understanding of image compression theory and ongoing research and development, which can make adoption more challenging, especially for smaller organizations or content delivery networks (CDNs).

• Incompatibility with legacy systems. AVIF is a modern image format that may not be supported by older browsers, devices, or platforms. While support is growing on modern browsers and devices, if your audience consist of users with old devices and browser, AVIF might not the be right fit.

• Slower encoding and decoding speeds. The AV1 compression algorithm is powerful but complex, resulting in encoding and decoding times that are significantly longer than formats like JPEG. This can impact performance in workflows where speed is critical.

• Limited editing tool support. Many widely used image editing tools and image processing libraries have yet to adopt native support for AVIF, although this is gradually changing as more tools provide more support. For example, Adobe Photoshop started supporting AVIF in 2022.

• Lack of progressive decoding. AVIF currently does not support progressive decoding like JPEG. This means that on slow networks, users won’t see a low-resolution preview of the image while it loads; instead, the browser waits until the entire image is downloaded before displaying it.

AVIF vs WebP vs JPEG for image optimization

How does AVIF compare to other image formats like WebP and JPEG? You might ask, Let’s break it down using a table:

Overall, from the table you can see that AVIF offers the best of both worlds: superior image quality and smaller file sizes, making it an excellent choice for websites that prioritize visual quality and performance. While WebP and JPEG have their strengths, AVIF stands out as a modern, efficient format.

How about AVIF compatibility?

If you plan to serve AVIF images to end users, you might worry whether AVIF is supported in a wide range of browsers and devices. As of the time of this writing:

• Browsers. AVIF is supported by over 94% of browsers

• Operating systems. As of iOS 16, all Apple devices support AVIF natively, and Windows started providing support for AVIF formats from their Windows 10 May 2019 update.

Optimizing your images to AVIF format with Uploadcare

Uploadcare helps you to optimize your images to AVIF format with ease. With its powerful image processing capabilities, you can convert your images to AVIF format while maintaining high quality and small file sizes.

With support for AVIF images out of the box, Uploadcare makes it easy to deliver optimized images to your users, improving web performance and user experience. You can also leverage Uploadcare’s image CDN to serve AVIF images efficiently across devices and platforms.

In the Settings of your project, click on the Delivery tab, and you will see the option to toggle on auto WEBP / AVIF.

This setting is toggled on by default, so you don’t have to worry about converting your images to AVIF format manually.

What this setting does is that Uploadcare’s CDN will automatically convert your images to AVIF format to serve your users, and in a situation where the user’s browser does not support AVIF, it will serve the image in the next best format, i.e., WebP or JPEG. This ensures that your images are optimized for the web and delivered in the best possible format efficiently.

So you don’t have to worry about the complexities of converting your images to AVIF format manually, Uploadcare takes care of that for you, allowing you to focus on building great web experiences for your users.

Uploadcare also provides a range of image processing capabilities, such as resizing, cropping, and compression, to further optimize your images for the web. With Uploadcare, you can deliver visually stunning images that load fast and enhance user engagement on your website.

Conclusion

So, back to the question: is the AVIF image right for your project? The classic technical answer in programming is that — It depends. If you’re looking for a modern image format that offers better image quality yet a smaller file size, then AVIF image format might be the perfect format for your users. Still, if you want to support legacy and older browsers and platforms, then WebP or JPEG might be the best format for your project.

Regardless of the users you’re looking to serve, Uploadcare has got you covered with delivering the best image formats for your project! With our powerful image processing and lightning-fast CDN, optimizing your images for the web is a breeze — regardless of the device or platform your users are using.