Modern Image Formats: AVIF vs. WebP

The choice between AVIF and WebP largely depends on your website’s specific needs and the demographic of your audience. Implementing a mixed strategy, where both formats are utilized based on browser support and image type, could be beneficial.

Let's quickly go through both formats and their pros and cons.

Developed by the Alliance for Open Media, AV1 Image File Format (AVIF) is a modern image format based on the AV1 video format. AVIF utilizes advanced compression techniques, resulting in smaller file sizes while maintaining high image quality. This efficiency is particularly beneficial for reducing bandwidth usage and improving load times.

VIF offers both compression methods (Lossless and Lossy Compression), providing flexibility depending on the quality and file size requirements. Like GIFs, AVIF can handle animations with better compression and quality.

Introduced by Google in 2010, WebP is derived from the VP8 video codec. It was designed to create smaller, high-quality images for the web, aiming to improve upon formats like JPEG and PNG.

Since its introduction, WebP has seen broad adoption across major browsers and platforms, contributing to its widespread use in web development. There are a couple of reasons for this. First, Lossy WebP images are typically smaller than their JPEG counterparts, while lossless WebP images offer better compression than PNG. Second, WebP supports animated images and transparency (alpha channel) in lossy and lossless modes, providing versatility for various image types.

Understanding the origins and features of AVIF and WebP provides a foundation for evaluating their suitability for specific web development scenarios. In the subsequent sections, we will delve deeper into their performance benchmarks, browser support, and the implications of their use on web development practices. We’ll also explain how to leverage Crystallize to use both image formats in your next project.

When evaluating image formats for web optimization, key performance metrics include compression efficiency, image quality, and loading times. Here's a comparative analysis of AVIF and WebP based on these factors:

Compression Efficiency:

• AVIF: Utilizes the AV1 video codec to achieve superior compression rates, resulting in file sizes up to 50% smaller than JPEG and 20-30% smaller than WebP for equivalent quality levels.
• WebP: Developed by Google, WebP offers both lossy and lossless compression. While it reduces file sizes compared to JPEG, it generally requires larger files than AVIF to maintain similar quality.

Image Quality:

• AVIF: Preserves image details effectively, especially at higher compression levels. It supports HDR and a wide color gamut, enhancing visual richness.
• WebP: Provides good image quality with smaller file sizes than JPEG, though it may exhibit artifacts at higher compression settings.

Loading Times:

• AVIF: Smaller file sizes contribute to faster loading times, improving user experience and potentially benefiting SEO rankings.
• WebP: Also offers reduced file sizes leading to quicker load times, though typically not as fast as AVIF due to larger file sizes.

At this time, neither AVIF nor WebP is fully supported by all major browsers and devices, as shown on Can I Use website. But we're getting there. While WebP enjoys broader browser support, AVIF is gradually gaining traction with backing from major browsers like Chrome and Firefox. On the other hand, there’s a lot of chatter claiming that AVIF has a better image quality to compressed file size ratio, which is better on slow connections, for example, but unfortunately not well supported.

To address varying browser support, developers can implement the <picture> element in HTML, allowing the browser to select the appropriate image format based on its capabilities. This approach ensures compatibility while leveraging the benefits of modern formats.

This is where the picture tag comes to the rescue. Combined with the source tag, it gives developers superpowers to let browsers know which file format to use, and they’ll do a better job than us since browsers are constantly changing. Support for a given format can appear overnight.

<picture>

 <source
   srcset="https://media.crystallize.com/crystallize_marketing/21/10/29/5/@100/collaborative_marketing.avif 100w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@200/collaborative_marketing.avif 200w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@500/collaborative_marketing.avif 500w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@768/collaborative_marketing.avif 768w"
   type="image/avif" sizes="600px">

 <source
   srcset="https://media.crystallize.com/crystallize_marketing/21/10/29/5/@100/collaborative_marketing.webp 100w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@200/collaborative_marketing.webp 200w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@500/collaborative_marketing.webp 500w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@768/collaborative_marketing.webp 768w"
   type="image/webp" sizes="600px">

 <source
   srcset="https://media.crystallize.com/crystallize_marketing/21/10/29/5/@100/collaborative_marketing.jpeg 100w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@200/collaborative_marketing.jpeg 200w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@500/collaborative_marketing.jpeg 500w, https://media.crystallize.com/crystallize_marketing/21/10/29/5/@768/collaborative_marketing.jpeg 768w"
   type="image/jpeg" sizes="600px">

 <img src="https://media.crystallize.com/crystallize_marketing/21/10/29/5/collaborative_marketing.jpg" loading="lazy"
   width="768">

</picture>

The picture element can have multiple sources inside with different file formats. Take the example above from crystallize.com. We have three source tags: one for AVIF, another for WebP, and a final one for .jpeg. Finally, the image tag will be the fallback.

Note that the order of the sources matters, as browsers will first try to use the AVIF format. If it doesn’t have support, then it will try to use the WebP format, followed by .jpeg, and finally fall back to the image tag if none of the sources is supported.

At Crystallize, we like to deliver the best experience possible. Because milliseconds matter, we save you time by providing you with WebP and AVIF out of the box. All you have to do is upload your images to our image component. Our backend will do some magic and convert your images automatically. (Feel free to read about our media delivery in more detail.)

When you query the Catalogue API and ask for the images, as in the example below, the API will return an array with the images and their formats.

fragment image on Image {
 url
 altText
 key
 variants {
   url
   width
   key
 }
}

[
   {
       "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/content_modeling.jpg",
       "altText": "Tailor-made Product and Content Modeling",
       "key": "crystallize_marketing/21/10/29/4/content_modeling.jpg",
       "variants": [
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@100/content_modeling.avif",
               "width": 100,
               "key": "crystallize_marketing/21/10/29/4/@100/content_modeling.avif"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@100/content_modeling.webp",
               "width": 100,
               "key": "crystallize_marketing/21/10/29/4/@100/content_modeling.webp"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@100/content_modeling.jpeg",
               "width": 100,
               "key": "crystallize_marketing/21/10/29/4/@100/content_modeling.jpeg"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@200/content_modeling.avif",
               "width": 200,
               "key": "crystallize_marketing/21/10/29/4/@200/content_modeling.avif"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@200/content_modeling.webp",
               "width": 200,
               "key": "crystallize_marketing/21/10/29/4/@200/content_modeling.webp"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@200/content_modeling.jpeg",
               "width": 200,
               "key": "crystallize_marketing/21/10/29/4/@200/content_modeling.jpeg"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@500/content_modeling.avif",
               "width": 500,
               "key": "crystallize_marketing/21/10/29/4/@500/content_modeling.avif"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@500/content_modeling.webp",
               "width": 500,
               "key": "crystallize_marketing/21/10/29/4/@500/content_modeling.webp"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@500/content_modeling.jpeg",
               "width": 500,
               "key": "crystallize_marketing/21/10/29/4/@500/content_modeling.jpeg"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@768/content_modeling.avif",
               "width": 768,
               "key": "crystallize_marketing/21/10/29/4/@768/content_modeling.avif"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@768/content_modeling.webp",
               "width": 768,
               "key": "crystallize_marketing/21/10/29/4/@768/content_modeling.webp"
           },
           {
               "url": "https://media.crystallize.com/crystallize_marketing/21/10/29/4/@768/content_modeling.jpeg",
               "width": 768,
               "key": "crystallize_marketing/21/10/29/4/@768/content_modeling.jpeg"
           }
       ]
   }
]

As you can see, we provide you with the AVIF, WebP, and .jpeg formats and different sizes, so you can use them in various screen sizes and let the browsers choose which format and size are better to display. Your users will appreciate this experience, getting lightning-fast images without losing quality, even on slow connections.

AVIF shines in scenarios demanding high-quality images, such as photography, where its advanced compression techniques unveil more accurate colors and better detail. Conversely, WebP's versatility makes it a go-to choice for a myriad of images, including photographs, illustrations, and logos, thanks to its blend of lossy and lossless compression techniques, along with support for transparency and animations.

The decision hinges on several facets, including your specific use cases, image quality requisites, and browser compatibility needs. If image quality and file size are paramount, and a slight compromise on browser compatibility is acceptable, AVIF stands out. For a versatile image format with broad browser support, WebP is a viable pick. An astute strategy would be employing a blend of both formats, serving AVIF to compatible browsers while reverting to WebP for others, ensuring a balanced mix of quality, file size, and compatibility.

Adopt a progressive enhancement approach by serving WebP images to browsers that support it, with AVIF as a fallback for browsers that support it. For browsers lacking support for both, traditional formats like JPEG or PNG can be used as a last resort. This strategy balances performance gains with broad compatibility.

The landscape of image format adoption is continually evolving. As browser support for AVIF expands, its superior compression and quality characteristics may lead to increased adoption. However, widespread adoption will depend on factors like encoding/decoding performance, support across various platforms, and developer familiarity. Monitoring industry trends and browser support matrices will be crucial for web developers to make informed decisions about image format usage in the coming years.