AVIF vs WebP: Understand Image Optimization in 3 mins

1. What is WebP
2. What is AVIF
3. Sample HTML & CSS for AVIF and WebP
   • AVIF in HTML
   • WebP in HTML
   • Fallback
   • Sample in CSS
4. Browser Compatibility
   • WebP
   • AVIF: 
5. Summary

In recent years, the use of images on websites has increased dramatically, making image optimization a crucial aspect of website performance.

The size and loading speed of images can have a significant impact on a website’s overall performance and user experience. To address this, new image formats such as AVIF and WebP have emerged as alternatives to traditional formats like JPEG and PNG.

These modern image formats promise better compression, smaller file sizes, and faster loading times. In this article, we will be comparing AVIF and WebP to see how they stack up against each other and against older image formats.

We will dive into the pros and cons, use cases, and browsers compatibility to give you a complete understanding of what these modern image formats have to offer for the web.

What is WebP?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. 

WebP images average 25–35% smaller than JPEG images of visually similar compression levels, and typically ~26% smaller than the same images in PNG format.

What is AVIF?

AVIF is a new image format specification for storing images or image sequences compressed with AV1 in the HEIF container format.

AVIF images average 50% smaller than JPEG images of visually similar compression levels, also, generally AVIF has better compression than WebP.

Sample HTML & CSS for AVIF and WebP

AVIF in HTML

<img src="banner.avif" />

WebP in HTML

<img src="banner.webp" />

Fallback

Due to the AVIF file type having limited support on some of the browsers (for eg: safari), to ensure all images display correctly, you can use to <picture> handle JPG/PNG fallback.

In this example, there are 3 different images in 3 different formats, the first <source> that fits the preference is the one being used.

<picture>
    <!-- use this if supported-->
    <source type="image/webp" srcset="img/banner.avif">
    <!-- else, use this if supported-->
    <source type="image/webp" srcset="img/banner.webp">
    <!-- else, this will be selected -->
    <img src="img/banner.jpg">
</picture>

1. The 1st image source is pointing to AVIF format. If the browser is supporting AVIF format, this source will be rendered. Otherwise, it will move to the second source.
2. The 2nd image source is pointing to WebP format, if the browser is supporting this format, this source will be rendered. Otherwise, it will move to the final fallback option, which is defining from <img src>
   

Sample in CSS

.banner{

  <!-- this is the fallback image -->
  background-image: url("img/banner.jpg");

  background-image: image-set(
    <!-- use this if supported-->
    "banner.avif" type("image/avif"),
    <!-- else, use this if supported-->
    "banner.webp" type("image/webp"),
    <!-- this is the fallback image -->
    "banner.jpg" type("image/png")
  );
}

Unlike HTML, there is no build-in fallback for image-set(), therefore, for non-supported browsers, a separate declaration is required before image-set() to handle fallback.

Browser Compatibility

WebP

• Supported in most of the modern browsers (Chrome, Edge, Firefox, Opera, Safari)
• Not supported in Internet Explorer
• Limited support for animated images

source: https://caniuse.com/webp

AVIF: 

• Supported in most of the modern browsers (Chrome, Edge, Firefox, Opera)
• Not supported in Internet Explorer, Safari, Edge
• Limited support for animated images

source: https://caniuse.com/avif

Summary

Smaller file size -> reduce bandwidth usage, reduce rendering time, better browser performance
Both WebP & AVIF provide an excellent solution in image compression
Browser support for both image types is limited compared to a traditional image format (JPEG, PNG, and GIF).

Generally, AVIF has better compression than WebP, but at the same time, AVIF has a less browser compatibility compared to WebP.