AVIF stands for AV1 Image File Format. It is a still-image format built on top of the AV1 video codec, which itself was created by an industry consortium that included Google, Mozilla, Microsoft, Apple, Netflix, and Amazon. Because it is a derivative of a modern video codec, AVIF compresses images significantly better than older formats designed in the 1990s.
Why AVIF files are smaller
Older image codecs like JPG use compression techniques that are decades old. Modern video codecs like AV1 use newer techniques — better prediction, larger block sizes, and smarter handling of high-detail regions — to remove more redundant information without making the picture look worse. AVIF inherits all of that and applies it to a single frame.
In practice, this means AVIF files are typically 30–50% smaller than WEBP and 60–80% smaller than JPG at visually equivalent quality. For photo-heavy pages, the savings translate directly to faster loads and lower bandwidth bills.
Comparison at the same visual quality
| Source | JPG | WEBP | AVIF |
|---|---|---|---|
| 12 MP landscape photo | 1.8 MB | 780 KB | 390 KB |
| Portrait, soft background | 950 KB | 420 KB | 210 KB |
| Product shot on white | 320 KB | 180 KB | 95 KB |
| Detailed UI screenshot | 210 KB | 140 KB | 120 KB |
Pros and cons
Pros
- Best-in-class compression at any given quality level.
- Supports HDR, wide colour gamut, 10-bit and 12-bit colour depth.
- Supports transparency.
- Royalty-free and patent-friendly.
- Backed by every major browser vendor.
Cons
- Encoding is slower than JPG or WEBP, especially at the highest compression settings.
- Older email clients, image viewers, and design tools may not render it.
- Default Windows Photos viewer needs an extension on some installs.
- Some social platforms still recompress AVIF into something else on upload.
Browser support, in plain language
AVIF is supported in Chrome (since 85), Firefox (since 93), Safari (since macOS Ventura and iOS 16), Edge, Opera, and Samsung Internet. Global coverage is well above 95%. For a public website, you can safely serve AVIF as the primary asset and provide a WEBP or JPG fallback for the remaining few percent.
When to use AVIF
- Hero images, banners, and any large photo on a page where bytes matter.
- Image-heavy pages where you want better Core Web Vitals.
- Product galleries and editorial photography on your own site.
- Background images served via CSS to modern browsers.
When JPG or WEBP is the safer choice
- Email attachments — many email clients still do not render AVIF inline.
- Files you will share through chat apps that recompress aggressively.
- Documents going to a printer or print service that expects JPG or PNG.
- Internal tools or older content management systems that do not know AVIF.
How to adopt AVIF safely
- Use the <picture> element. List an AVIF source first, then a WEBP source, then a JPG fallback. Browsers pick the first one they support.
- If you use a CDN or image component (Cloudflare Images, Vercel Image, TanStack Start image helpers), enable AVIF output and let the platform negotiate per-request.
- Test on a real device, not just a desktop browser. Older Android phones can still surprise you.
- Keep an original master file in a lossless format so you can re-encode later as encoders improve.
Frequently asked questions
Is AVIF better than WEBP for everything?+
Almost. For photos and rich images, AVIF is smaller at the same quality. For tiny graphics with very few colours, the gap shrinks and the slower encoding may not be worth it.
Does AVIF support transparency?+
Yes. AVIF supports full alpha transparency just like PNG and WEBP.
Why is my AVIF file slow to generate?+
AVIF encoders are slower than JPG by design. They trade encoding time for smaller files. For batch jobs this is usually a one-time cost.
Can I share an AVIF on WhatsApp or Instagram?+
You can try, but most chat and social platforms will recompress it to JPG. For sharing, convert to JPG first to keep predictable quality.