Why You Should Use AVIF Instead of JPEG, WebP, PNG, and GIF in 2025

AVIF is an emerging file format that, at the time of writing, has gained support in Microsoft Edge, achieving significant browser compatibility.

We are no longer in the dark ages of technology; most major website platforms typically support the latest browser versions and those from a year prior. You can start using AVIF now, with WebP as a fallback format until the end of 2024 (before which a fallback is necessary).

What does this mean?

You can now primarily use AVIF as the default format for raster images, as it essentially replaces many common JPEG use cases.

Why choose AVIF over JPEG and WebP?

Compression efficiency: Higher compression ratios than formats like JPEG and WebP while maintaining high image quality.

Color depth: Supports a wide range of color depths, including 8-bit, 10-bit, 12-bit, and 16-bit.

Wide color gamut and HDR support: AVIF supports a broad color range and high dynamic range (HDR), making images more vivid and realistic—ideal for applications requiring precise color and detail, such as professional photography and media content.

Lossy and lossless compression: AVIF's lossless compression far outperforms compressed bitmaps and PNG.

Alpha channel support: Similar to PNG, it can store semi-transparent images but with better compression.

Based on AV1: AV1 is a royalty-free codec developed by the Alliance for Open Media, building on Google's VP9 encoding. This means it will see widespread adoption and face fewer controversies compared to other emerging image formats.

Mainstream browser and broad platform support.

Reduced bandwidth and faster load times: Smaller files mean quicker loading for users.

Drawbacks

Computationally intensive compression: Generally, AVIF compression is more computationally intensive than older formats like JPEG, but it typically achieves more efficient compression.

How much smaller?

The Alliance for Open Media excitedly claims:

"Images can be up to ten times smaller than JPEGs of similar visual quality."

Additionally,

"AVIF can achieve 40% to 90% compression."

Having used AVIF for about four years, our experience shows that most compressed images are roughly 60% the size of equivalent-quality JPEG outputs. This is still impressive.

Thus, AVIF covers most image scenarios except the following:

Vector graphics: SVG and SVG images handle this well.

Vector animations: Similarly, SVG performs decently here, though there's room for improvement in rendering quality.

Backend encoding/decoding

If you can't find AVIF support in your preferred backend language's libraries, you can wrap libavif, the official AOMedia encoder/decoder. Or, if you're bold, port it to native support.

GitHub - AOMediaCodec/libavif: libavif - Library for encoding and decoding .avif files

Here are some libraries I found on GitHub:

Node.js: https://github.com/lovell/sharp

PHP: https://github.com/flyimg/flyimg

Go: https://github.com/webp-sh/webp_server_go

When not to use AVIF

It really depends on the dynamics and complexity of the image, but generally:

Lossless vector/non-photorealistic animations: This is case-dependent (sigh).

In some 'rare' cases, WebP or even JPEG might outperform AVIF when comparing quality/compression ratios.

As a rule of thumb, AVIF typically excels at optimizing photorealistic images. Personally, I find it quite dominant for other images like charts and vector art too.

Supporting legacy browsers

Imagine someone just returning from a long vacation who hasn't updated their browser.

If you want to start using AVIF at the time of writing, use srcset or <picture><source>, prioritizing AVIF with fallbacks to older formats like WebP or JPEG.

If Edge has had three or more updates since this writing, you can just use src.

Animation

Animated AVIF example: https://colinbendell.github.io/webperf/animated-gif-decode/avif.html

While slightly beyond this article's scope, as mentioned, AVIF can be used for animations like APNG.

Both formats far surpass GIF, and you should consider them as replacements since they have full browser support, whereas GIF, as an older animated image format, has poor compression.

That said, be cautious with email support, as that's another old, flawed system that might not consistently support these new formats—always check.

Conclusion

Try to avoid comparing image formats and compression results in terms of superiority. In reality, all lossless codecs come at a cost; it's a matter of trade-offs.

You might dislike the style of certain image artifacts, but if it means someone on a train or with poor latency can load your site faster, as a developer, you must compromise too.

The ultimate goal is to deliver the smallest possible payload to users within reason, regardless of which format proves more optimal.

In my view, new image formats are simply tools for building better products and improving user experience, not a matter of competitive preference.