AVIF is the new contender in the world of web image formats. It promises up to 50% better compression than JPG and 20% better than WebP at equivalent visual quality. But is now the right time to use it? What happens with browsers that don't support it? This guide answers everything.
AVIF (AV1 Image File Format) is an image format derived from the AV1 video codec, developed by the Alliance for Open Media (AOM) — a consortium that includes Google, Apple, Mozilla, Netflix, and Amazon, among others.
It was designed from the ground up to exploit the most advanced compression techniques available. Unlike JPG (created in 1992) or WebP (2010), AVIF (2019) incorporates:
For a typical 1920×1080 photograph at equivalent visual quality:
Baseline reference. Compatible everywhere. Visible artifacts at low quality.
30% lighter than JPG. 97% browser support. The current standard.
50% lighter than JPG. Superior quality at low bit rates. Slow encoding.
| Feature | JPG | WebP | AVIF |
|---|---|---|---|
| Compression (vs JPG) | — | ~30% better | ~50% better |
| Transparency | ❌ No | ✅ Yes | ✅ Yes |
| Animation | ❌ No | ✅ Yes | ✅ Yes (better) |
| HDR / wide color | ❌ No | ❌ No | ✅ Yes |
| Encoding speed | ⚡ Fast | ⚡ Fast | 🐢 Slow |
| Browser support 2026 | ✅ 100% | ✅ 97% | ✅ 93% |
AVIF has support in all major modern browsers:
⚠️ Users without support: according to Can I Use, approximately 7% of global users still use browsers without AVIF support (mainly IE11 and very old Safari versions). That is why you should always serve AVIF with a fallback to WebP or JPG.
💡 Practical rule: if you already serve WebP and have good performance, do not rush to migrate to AVIF. If you are building a new site or refactoring assets, implementing AVIF with fallback from the start is worth it.
The correct way to use AVIF on the web is with the <picture> element, which offers alternatives to the browser based on what 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="800" height="600">
</picture>The browser uses the first source it understands. Modern Chrome and Firefox use AVIF. Safari < 16.4 uses WebP. IE and very old browsers use JPG. You just define the three options.
Next.js converts and serves AVIF automatically if you configure it in next.config.js:
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
},
};Enable "Polish" in the Cloudflare dashboard → Speed → Optimization. With "Lossless" or "Lossy" enabled, Cloudflare automatically serves the format each browser supports, including AVIF.
While AVIF matures in your toolchain, WebP already gives you 30% savings with 97% browser support. No sign-up, all in your browser.
⚡ Convert to WebP freeIn the long term, probably yes. But WebP has almost a decade's head start in tool ecosystem and adoption. In 2026, the most practical strategy is to use AVIF with WebP fallback rather than migrating entirely.
Adobe Photoshop added AVIF read support in recent versions (2022+), but native export is still limited. Alternatives: use Squoosh, ImageMagick, or a CDN that converts automatically.
No. Email clients (especially Outlook) do not support AVIF. For emails use JPG or PNG. Even WebP does not work in all email clients.
At equivalent quality settings (same perceived visual quality), AVIF is smaller but the visual result is very similar. The difference is more noticeable at very low bit rates: AVIF retains more detail with fewer bytes than WebP.