Formatly

← All guides

AVIF Explained: The Image Format Replacing WebP

AVIF compresses 30–50% better than JPG, supports HDR and transparency, and works in every major browser. What it is, when to use it, its limits.

By Formatly

AVIF is the most technically impressive image format you’ve never deliberately used. It produces files dramatically smaller than JPG or WebP at the same visual quality, handles HDR and wide color gamut, and is royalty-free. After a slow start, browser support is now universal. So why isn’t everyone using it? Let’s get into it.

What AVIF is

AVIF (AV1 Image File Format) stores still images compressed with the AV1 video codec — the same codec Netflix and YouTube use for streaming. Still images are just single-frame videos, and AV1 is extraordinately good at squeezing detail into few bytes. The format is developed by the Alliance for Open Media (the same group behind WebM) and is completely royalty-free, unlike HEIC/HEIF which carries patent licensing baggage.

The compression numbers

These are approximate but representative for photographic content at visually-equivalent quality:

FormatRelative file size
JPG100% (baseline)
WebP~70%
AVIF~50%

So AVIF is roughly half the size of JPG and meaningfully smaller than WebP at the same perceived quality. For hero images and photo-heavy pages, that’s a transformative saving. It also supports:

  • Lossless mode (like PNG, but smaller)
  • Transparency (like PNG, with lossy alpha no less)
  • HDR and wide color gamut (10-bit and 12-bit color — JPG is 8-bit only)
  • Animation (like GIF, vastly more efficient)

On paper, it beats every format at everything. The caveats are practical, not theoretical.

Browser support in 2026

AVIF now works in all current versions of Chrome, Edge, Firefox, Safari, and Opera — desktop and mobile. Safari was the last holdout and added support in 2022. If your audience uses reasonably updated browsers, AVIF just works.

The remaining gaps are outside the browser: many desktop apps, CMS media libraries, email clients, and design tools still don’t recognize .avif files. It’s the WebP story replaying — great on the web, awkward everywhere else.

The real limitations

Encoding is slow. AVIF’s compression advantage comes from an encoder that works hard — much harder than JPG or WebP encoders. Converting a batch of large photos to AVIF can take several seconds per image even on a fast machine. For build-time optimization (encode once, serve millions of times) this is irrelevant. For on-the-fly conversion, it’s noticeable.

Decoding costs battery. AVIF decode is heavier than JPG decode. On low-end mobile devices, a page full of AVIF images can measurably increase CPU usage versus JPG. For most sites this is a non-issue, but it’s worth knowing for image-heavy mobile experiences.

Tooling is still catching up. Photoshop needs a plugin. Many DAMs and social platforms won’t accept AVIF uploads. If your workflow touches non-browser software, you’ll be converting back and forth.

Quality tuning is less intuitive. AVIF’s quality scale behaves differently from JPG’s — the same “quality 80” means different things. You need to eyeball results when you first adopt it rather than trusting familiar numbers.

When to use AVIF

  • Website hero images and photo galleries — maximum byte savings where it matters most
  • HDR content — AVIF is the only web format with real HDR support
  • High-DPI/retina images — the savings compound at 2× resolutions
  • Bandwidth-constrained audiences — emerging markets, mobile-first sites

Serve it with a fallback: the <picture> element lets you offer AVIF to browsers that support it and JPG/WebP to everything else. Our WebP/AVIF optimizer generates the markup for you.

When to stick with WebP or JPG

  • Your toolchain can’t handle AVIF yet — no shame in WebP, which is still excellent
  • Fast batch conversion matters — WebP encodes much faster
  • The images leave the browser — print, email, apps, clients: use JPG
  • Simple graphics and screenshots — PNG or WebP; AVIF’s advantage is smallest on flat graphics

AVIF vs HEIC

People confuse these constantly. Both are modern, high-efficiency formats, but: HEIC is Apple’s camera format (photos from iPhones), patent-encumbered, and a headache for compatibility. AVIF is the open web format (images for websites), royalty-free, and universally supported in browsers. Different jobs, different formats.

Practical next steps