What is the AVIF format and why is it replacing WebP?

For several years, WebP established itself as the reference image format for the web, progressively displacing JPEG and PNG. But a newcomer has pulled ahead: AVIF. More compressed, more precise, and now supported by all modern browsers, AVIF is asserting itself in 2026 as the most efficient image format available for the web. Here is what it is, what sets it apart from WebP, and when to adopt it.

What is the AVIF format?

AVIF (AV1 Image File Format) is an image format derived from the AV1 video codec, developed by the Alliance for Open Media — a consortium including Google, Apple, Mozilla, Netflix, Amazon, Microsoft and Intel. It was officially launched in 2019 and reached sufficient maturity for widespread web adoption from 2022-2023.

Unlike JPEG or PNG which rely on compression algorithms several decades old, AVIF leverages the most modern video compression technologies to encode still images. The result is spectacular: for equivalent visual quality, an AVIF file is significantly smaller than a JPEG or WebP.

AVIF vs WebP vs JPEG: the key differences

To understand why AVIF is prevailing, here is a direct comparison of the three formats on the criteria that matter for the web:

Why AVIF is superior to WebP

WebP was a significant advance when Google launched it in 2010 — it offered a size reduction of around 25 to 35% compared to JPEG. But AVIF goes much further on several points:

• Superior compression: AVIF reduces file sizes by 40 to 55% compared to JPEG for equivalent visual quality, versus 25 to 35% for WebP. On an image-heavy page, this is a considerable performance difference
• Fewer visual artefacts: WebP suffers from visible compression artefacts in gradient areas and fine edges at low bitrates. AVIF handles these areas with markedly superior precision
• Native HDR support: AVIF natively supports HDR (High Dynamic Range) and wide colour spaces (Display P3, Rec. 2020), making it ideal for high-end screens and professional photography
• Colour depth: AVIF supports up to 12 bits per channel versus 8 bits for WebP, providing an incomparably richer colour palette
• Flexible chroma subsampling: AVIF supports 4:4:4, 4:2:2 and 4:2:0 modes, offering fine-grained control over the quality/size trade-off depending on image type

Good to know: AVIF compression is particularly impressive on portraits and skin tones, sky gradients, and images containing text on complex backgrounds — precisely the cases where WebP begins to show visible artefacts. For very simple images (icons, vector illustrations), the gains are smaller and SVG remains preferable.

Browser support in 2026

One of the historical barriers to AVIF adoption was partial browser support. This is no longer the case in 2026:

• Chrome: supported since version 85 (August 2020)
• Firefox: supported since version 93 (October 2021)
• Safari: supported since version 16.0 (September 2022)
• Edge: supported since version 121 (2024)
• Opera, Samsung Internet, Brave: all supported

In 2026, global AVIF support exceeds 97% of browsers used worldwide according to Can I Use data. The only notable exception involves some embedded browsers and a few industrial or government environments running very old versions of Internet Explorer or Edge Legacy — marginal cases.

AVIF's main drawback: slow encoding

AVIF is not perfect. Its main weakness is encoding speed: generating an AVIF file is significantly slower than encoding a JPEG or WebP, particularly at the highest quality levels. Depending on settings and hardware, encoding an image in AVIF can take 5 to 20 times longer than in WebP.

For sites generating images on the fly (e.g. an e-commerce platform with millions of product variants), this delay can be problematic. Common solutions:

• Pre-encode AVIF images at upload time and serve them from a CDN
• Use the encoding speed parameter (speed) to accelerate generation at the cost of a slight compression gain
• Maintain a hybrid AVIF + WebP fallback strategy via the <picture> tag

How to implement AVIF on your site

The cleanest way to integrate AVIF while maintaining maximum compatibility is to use the HTML <picture> tag with multiple sources:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image description" width="800" height="600">
</picture>

The browser automatically selects the best supported format. A modern browser will load the AVIF, an older browser will fall back to WebP, and very old browsers will load the JPEG. No JavaScript required, no server-side detection needed.

To convert your images to AVIF, available tools include:

• Squoosh (Google) — free online tool, real-time visual comparison
• ImageMagick — command line: convert input.jpg -quality 80 output.avif
• Sharp (Node.js) — high-performance image processing library
• Cloudinary, Imgix, Cloudflare Images — automatic AVIF conversion and delivery via CDN

Is AVIF really replacing WebP?

In terms of pure performance, yes — AVIF is superior to WebP on virtually every technical criterion. But migration is not necessarily immediate for all projects:

• If your image processing pipeline is already optimised for WebP and your images are lightweight, the AVIF gain may not justify a complete overhaul in the short term
• For new projects or image redesigns, AVIF should be the default first choice
• The hybrid <picture> AVIF + WebP + JPEG strategy is currently best practice: it maximises performance on modern browsers without sacrificing compatibility

Good to know: the main image CDNs (Cloudflare, Cloudinary, Fastly, imgix) now serve AVIF automatically by detecting the visitor's browser via the Accept header. If you use one of these services, you may already be benefiting from AVIF without any code changes — simply check the response headers of your images using your browser's developer tools.