AVIF vs WebP

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.

At this time, neither AVIF nor WebP are fully supported by all major browsers and devices, as shown in Can I Use:

You see that WebP has better support than AVIF. 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.