AVIF Images: Up to 40% Data Savings Compared to WebP

The WebP format is great. But what if you want even more? AVIF is like WebP with a turbo boost.

Based on the AV1 video codec, this format saves 30–40% more data than WebP while maintaining the same or better quality.

AVIF (AV1 Image File Format) was developed in 2019 as a collaborative project by the Alliance for Open Media. Like WebP, it leverages video codec technology, but this time from the more modern AV1. The result? Even more efficient compression and smaller files.

If you're already using WebP and want to take image optimization to the next level, AVIF is the logical next step.

AVIF (AV1 Image File Format) – a modern format for even more efficient image compression.

Why Use AVIF?#

AVIF offers several advantages over older formats:

• Better Compression than WebP AVIF typically saves 20–30% more data than WebP with the same quality. Compared to JPEG, the savings are even more significant—up to 50% and more.
• Transparency Support Like WebP, AVIF supports an alpha channel, allowing you to use transparent images without resorting to the outdated PNG format.
• No Blocking Artifacts While JPEGs tend to “block” at high compression (blocking artifacts), AVIF tends to gently blur the image, which is much more tolerable to the human eye.
• HDR Support AVIF can display images with a higher dynamic range, which photographers will particularly appreciate.
• More Color Spaces It supports a wider range of color spaces, including Rec2020.

Browser Support#

Support for AVIF in browsers is rapidly improving. Currently, all modern browsers support it:

• Chrome (from version 85) and other Chromium-based browsers
• Firefox (from version 93)
• Safari (from version 16)
• Edge (from version 85)

See AVIF support on CanIUse. However, older browser versions that do not support AVIF still exist, so it's advisable to monitor your browser statistics and implement a fallback to WebP or JPEG.

How to Implement with Fallback to WebP#

To ensure compatibility with older browsers, you can use the HTML <picture> element with multiple sources. The browser will automatically choose the format it supports:

<picture>
	<source srcset="image.avif" type="image/avif" />
	<source srcset="image.webp" type="image/webp" />
	<img src="image.jpg" alt="Image description" width="1600" height="900" loading="lazy" />
</picture>

The browser processes sources from top to bottom and uses the first one it supports. If it doesn’t support AVIF, it will use WebP. If it doesn’t support WebP either, JPEG will be the fallback option.

Automating the Conversion#

Ideally, automate the generation of AVIF images. There are several options:

• Cloudflare Cloudflare in specific settings automatically converts images to AVIF if the browser supports this format. You don't need to handle anything on your server.
• PHP 8.1+ From PHP 8.1, a native function imageavif() is available for generating AVIF images. You can set the quality and speed parameters.
• ImageMagick The tool ImageMagick supports conversion to AVIF using the magick convert command.
• External Services You can use services like AWS Lambda with CloudFront, which automatically convert images on demand.

Our Experience in Practice#

In our web speed consultations at PageSpeed.ONE, we've helped implement AVIF on several projects. Here are our experiences and recommendations:

Expected Data Savings#

With the AVIF format, it's possible to achieve data size savings of approximately 30 to 40% compared to WebP. This naturally varies with the type of image—savings are typically higher for photographs than for graphics with sharp edges.

Recommended Parameter Settings#

Based on our tests, we recommend the following settings:

• Quality: around 50
• Effort: value 4

A higher effort value increases image generation time but also potential data savings. We recommend testing this setting on your specific images since optimal values may vary according to content type.

Practical comparison of data volume savings using AVIF compared to WebP. Source: Technical Report in PLUS Monitoring on a client content website PageSpeed.ONE. Tool: Squoosh

Implementation Options#

There are two main ways to deploy AVIF:

1. Self-generation If you have server control, you can generate AVIF images yourself. The advantage is full control, the disadvantage is higher server load.

2. External Services It's very diverse; sometimes Cloudflare fits, sometimes CloudFront and AWS Lambda. We recommend making your own assessment based on your needs and image volume.

3. Manual Conversion For smaller static sites, compress images into the AVIF format manually, using tools like Squoosh, Image to Avif on Cloudinary, or the well-known TinyPNG.

Impact Monitoring#

Just as with WebP, it’s important to monitor the data volume of AVIF images and their impact on the LCP metric. In our PLUS Monitoring, you can track how image sizes change over time and their impact on page load speed.

Always monitor image data volume. Even a change in a single image can cause speed fluctuations and affect your website's conversions. Source: Technical Report in PLUS Monitoring.

When to Use AVIF vs WebP?#

AVIF isn't always the better choice over WebP. Here's a quick guide on when to use what:

• Use AVIF if: You want maximum data savings. You target modern browsers. And you have the time and resources to test settings.

• Stick with WebP if: You need a universal solution with maximum compatibility. Generating AVIF would slow down your server. And you want simpler implementation.

• Ideal Solution: Use AVIF with a fallback to WebP. Browsers that support AVIF get the smallest files. Older browsers get WebP. Everyone's happy.

Summary#

AVIF is a logical next step after WebP. It offers significantly better compression but requires a bit more work with implementation and testing.

If you're already using WebP and want to push optimization even further, AVIF is worth considering. Especially if you can leverage automation through Cloudflare or similar services.

Always think about fallback for older browsers and monitor the impact on website speed. Every kilobyte saved counts, but not at the expense of compatibility.

Find more tips for image optimization on the web and detailed information about the WebP format.