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 a beneficial approach.

AV1 Image File Format (AVIF) is a modern image format based on the AV1 video format.

WebP is an image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency.

A lot has already been written about AVIF and WebP individually. Here, we’ll explain how to leverage Crystallize to use both image formats on your next project.

AVIF and WebP are engineered to outclass traditional formats like JPEG in compression efficiency significantly. AVIF, leveraging the advanced AV1 codec, generally achieves superior compression and, thus, smaller file sizes for equivalent image quality. On the contrary, WebP, albeit efficient, may fall short of matching the compression prowess of AVIF.

The superior compression techniques of AVIF, coupled with higher color depth support, deliver images with accurate colors, better detail, and fewer compression artifacts. Conversely, WebP, reliant on the older VP8 codec with lower color depth support, might not yield as sharp or vibrant images as AVIF.

On the other hand, WebP has been around longer and, hence has better tooling and documentation available for developers. AVIF, being relatively new, might require a bit more effort to implement, but the payoff in terms of performance could be significant.

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.

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.