Skip to main content
More in Learn

AVIF vs WebP

Should you use AVIF or WebP as a format for your eCommerce shop? As always in software development, it depends. Let’s explore how you can use these two image formats in your eCommerce store with Crystallize.

AVIF Image Format

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

WebP Image 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 Support

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.

What To Do If You Have .Jpeg Images?

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.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community