What is an AVIF image? The AVIF image format explained

In this post, you'll learn what an AVIF image is, why it's the best image format for the modern web, and how to use AVIF in your websites.

We compare how the AVIF image format stacks up against other formats like WebP, PNG, and JPEG on metrics like performance and image quality. 

It also includes a code example that shows how to serve responsive, high-performance AVIF images using Contentful’s Image API.

What is the AVIF image format?

AVIF (AV1 Image File Format) is a modern image file format, released in 2019 by the Alliance for Open Media, that's able to store images with 30% better compression than currently popular formats such as WebP and JPEG. It's a flexible format, supporting both lossy and lossless compression, allowing you to prioritize whichever is more important — file size or quality. 

The format is designed for the web and optimized for a low computation footprint and small file size to minimize bandwidth usage. It's also open source, and is now supported by all major web browsers including Chrome, Firefox, Edge, and Safari.

AVIF supports HDR and wide color gamuts, allowing it to show brighter highlights and deeper shadows, and to use a very wide range of colors that is close to the range the human eye can see. The AVIF format also stores metadata, such as camera settings (EXIF), color profiles (ICC), and editing history (XMP). This makes it ideal for publishing high-quality photographs online while ensuring color consistency across devices.

AVIF also supports transparency, which is useful for images that will be used in user interfaces or animations in interactive app graphics, providing an alternative to GIFs with much greater visual fidelity.

Comparing AVIF to other image formats

The best image file formats for modern websites today are AVIF and WebP, however, JPEG and PNG images remain popular due to their wide support and historical use. 

AVIF vs. JPEG, GIF, and PNG

Developers have historically had to choose between JPEG for smaller files with lossy compression; GIF for small, very simple animated images (like animated buttons), and PNG for the highest quality images. These legacy formats are universally supported across web browsers going back decades.

However, JPEG, GIF, and PNG images are no longer the best choice for web developers: AVIF and WebP have been around for long enough that they're supported by all the major browsers, and their benefits in file size and quality are well proven.

AVIF vs. WebP

WebP was designed to give the best of both worlds of JPEG and PNG, striking a balance between file size and image quality. While WebP largely succeeded at this, AVIF outperforms it with even smaller file sizes and higher image quality. In most circumstances, AVIF is the best format to use on the web today.

One area where WebP does outshine AVIF is in the speed of its compression algorithm. Although AVIF can compress to smaller sizes, WebP does the job faster. This can be important if you are processing uploaded images for storage, or generating images dynamically for display to users, where encoding time will matter.

AVIF file size vs. other formats: an experiment!

The difference in file size and quality between AVIF and other formats can be demonstrated by using this example URL and tweaking its values. 

This URL serves an image of a cat in different file formats. The URL is configured to serve an AVIF image, but you can change the ?fm=avif query string parameter to serve other formats. You can experiment with changing the format parameter to ?fm=jpg, ?fm=png, ?fm=webp, or ?fm=gif and compare the size of the image returned by saving it or using your web browser’s developer tools.

Chrome Developer Tools network tab shows the file size of the AVIF image format compared to other formats (for the same source image).

To save you doing so, here are the results: AVIF is the clear winner in terms of reduction in size for this image. Here’s how the image formats compare in terms of size:

Why is image compression important?

Websites are visual experiences, full of images containing visual designs, animations, and high-resolution photography. Without efficient image compression formats like AVIF, users would be forced to download potentially hundreds of megabytes of images each time they visit a page on your website. This risks making your website slow, wasting bandwidth and causing your users to move elsewhere.

A fast experience on the web is crucial for user experience. Google’s Core Web Vitals measure loading performance, visual stability, and interactivity, the first two of which can be negatively impacted by image file sizes being too large. Google then uses scores on these three aspects of user experience to rank websites in its search results — so if you want to optimize your application for SEO, image compression matters. 

The Largest Contentful Paint (LCP) Core Web Vital measures loading performance: the time taken for the largest visible element to load on the page. 

If you’re forcing users to download megabytes of images when the page first starts to load — for example, large hero images at the top of the page — your LCP time will increase. A good user experience requires the LCP to be complete within 2.5 seconds or less of the page starting to load — and compressing your images as much as possible will strongly improve this metric.

The Cumulative Layout Shift (CLS) Core Web Vital measures visual stability. A web page will get a high (bad) CLS score if content pops into view after it’s loaded, pushing other content out of the way, because this can cause content to shift abruptly while the user is in the middle of reading it. 

CLS makes your web page unstable — and usually, large images that take time to load are to blame. A good user experience maintains a CLS score of 0.1 or less.

AVIF image format disadvantages

WebP can provide better compression than AVIF in some circumstances for simple non-photographic images. The compression benefits of AVIF over WebP are best seen when it comes to complex images like photographs or those with complex gradients. 

When it comes to simpler images (like logos or icons), AVIF is sometimes unable to compress these images as well as PNG or lossless WebP.  For example, this vector logo for Contentful came in at 22 KB as a WebP image, but increased to 24 KB as an AVIF image.

If you're developing for a scenario that relies on legacy web browsers (usually enterprise or government), using AVIF images makes little sense. Older browsers don't support AVIF, so it's better to stick to legacy JPG, GIF, or PNG formats if you're building apps that will be running in outdated environments.

Lossless high-quality AVIFs can be inefficient: Sometimes for the highest-quality lossless images, PNG or WebP can be better, with a smaller file size than AVIF but similar visual quality. There are also issues with tone mapping in some web browsers (such as Chrome and Safari) that may result in incorrect color representation, which is fine for casual browsing, but may be a problem in some use cases.

How to open an AVIF file

AVIF files can be opened using built-in Windows or macOS software, providing you have a modern version. The Photos app in Windows 11+ opens AVIF images out of the box, as does macOS preview in macOS 13+. 

Many image editors will also open them, including IrfanView (with the IrfanView plugins pack), Adobe Photoshop (with the WebM extension), GIMP, and Paint.NET.

How to convert your images to AVIF format

In addition to saving AVIF images using the image editors discussed above, you can convert your images to AVIF using online converters such as Squoosh, CloudConvert or Ezgif. 

Remember, you need to start with a high-quality image like a PNG — there's no point in converting a JPEG to an AVIF as you won't be able to get an image any higher quality than the original.

It's also possible to convert your images programmatically, which is useful when you want to handle user uploads, or serve images dynamically at different sizes and formats. There are tools like ImageMagick, but this means pre-processing all of your images on the command line, or hosting your own servers to process images when they are uploaded (using libraries like node-imagemagick, PHP's Imagick, or Python's Wand).

Another approach for web developers is to use an image processing library (such as Sharp for Node.js) that doesn't require any dependencies and can be run in more environments. 

For example, in Sharp, to convert a PNG to AVIF, you can use the following code snippet:

Contentful Images API: CDN image conversion example

The Contentful Images API automatically optimizes, transforms, and converts images for you, and delivers them to websites, apps, billboards, and other channels using Contentful's global CDN. 

Once you've uploaded an image to Contentful, you can request it in different formats, or request versions with altered quality, size, background, or cropping. You can do this using its REST or GraphQL APIs. This makes it possible to programmatically get any image in the optimal format depending on how your image will be displayed. 

How to use the Contentful REST API to convert an image to AVIF format

To use the Contentful REST API to convert an image to AVIF, you need to access the API endpoint using its URL, constructed with the path to the image file and the fm=avif query parameter, which tells Contentful to convert the image to AVIF before serving it.

An example of a call to the REST API is:

https://images.ctfassets.net/{space_id}/{asset_id}/{unique_id}/{file_name}?fm=avif

Querying the REST API endpoint in this way will return a binary image file.

Note that you'll need to replace the {space_id}/{asset_id}/{unique_id}/{file_name} with the path to your file once you have added it to your Contentful space. If you're looking for a free, user-friendly way to construct and test REST and GraphQL queries, Postman is a great option.

How to use the Contentful GraphQL API to convert an image to AVIF format

If you’re using GraphQL, you can convert your images to AVIF via a transform function on the image API in the GraphQL query. For example, the query below returns a URL of an image that's attached to a blog post.

And here’s the response returned. You’ll notice that the image URL that's returned looks exactly like a call to the REST images API — that's because it is! Contentful’s GraphQL API uses Contentful’s Images REST API under the hood to do the image transformation. The speed benefits of using GraphQL come into play when doing transformations of larger numbers of images in the same query.

Code example: Using the HTML <picture> tag to serve AVIF along with fallback image formats for older browsers

Some legacy browsers (including Internet Explorer and Safari version 15 and older) don't support AVIF images. If you're targeting users who are likely to be using a browser that doesn't support AVIF, it's a good idea to fall back to other formats. To do this, you can use the HTML <picture> tag.

The <picture> tag

The <picture> tag can be used to provide image format fallbacks. In the example below, the browser will load the first <source> image that it supports into the <img> element, and then finally, if none are supported, it will load the fallback image specified in the <img> tag — so AVIF, then WebP, then JPEG, then PNG.

The srcset and sizes attributes

The <source> element has a srcset attribute that defines the path of each image variant within a <picture>. In addition to providing different image formats, you can use this attribute to provide a variety of different sizes of images for responsive websites. The example below uses Contentful's Image API to supply a variety of image sizes and formats for use on devices with different screen sizes and varying image file format support:

You can use the sizes attribute alongside this to let the browser know how wide the image will be displayed under different viewport conditions. That way, the source element can choose the right image to download from the srcset.

sizes="(max-width: 735px) 100vw, 736px"

This sizes attribute tells the browser that if the viewport is 735px wide or less, the image will take up the full width of the screen (100vw), and if it's wider, the image will never be more than 736px.

Useful <img> tag attributes

The <picture> example above also utilizes the <img> tag attributes loading="lazy" and decoding="async" to provide a better user experience.

Lazy loading is a strategy to identify resources such as images, video, and other media as non-blocking, or non-critical — and to load these only when needed, such as when a user scrolls that resource into view.

To prevent visitors’ browsers from downloading a full page of images that aren’t visible in the viewport yet, we can use native HTML lazy loading with the loading="lazy" attribute to defer loading an image until a user scrolls near it — no JavaScript required! As stated before, to prevent Cumulative Layout Shift, be sure to add the height and width of the base image as attributes to the <img> element, which will instruct the browser to leave the correct space on the page in which to finally load your image when it scrolls into view.

The decoding="async" attribute tells the browser that the image loading can be performed asynchronously, so that content below the resource — such as paragraphs of text — are not blocked by the image taking a moment to load.

How does serving responsive AVIF images improve your website?

While the code example above is a lot of HTML to write for one image, it's easy to understand, and works in all modern browsers without additional JavaScript. This makes it easy to maintain, and improves performance.

For image-heavy blog posts, and in particular this blog post, converting all images from WebP to AVIF reduced the cumulative size of images on a desktop screen at 2 DPR (device pixel ratio) from just over 1 MB to just 404 KB. And on mobile devices at 1 DPR, it reduced the cumulative sizes of images from 430 KB to 124 KB. 

That’s a 60–70% reduction across device sizes — those are some huge savings! Plus, all images are lazy loaded, which means the browser doesn’t request them until the image is near to the visible viewport.

Convert AVIF images with Contentful for the best omnichannel content delivery

The AVIF image format can help you boost your site’s performance by ensuring that smaller image file sizes are loaded while still being very high quality — especially for complex photographic images.

The Contentful Images API is backed by our global, high-speed CDN, making it easy to deliver responsive, optimized images in any format to any device or channel, including emails, websites, apps, AI assistants, and more.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.