AVIF Image Format: Next-Gen Compression Explained

I’ll be honest — when AVIF first showed up on my radar back in 2020, I dismissed it as another “next-gen format” that would take a decade to actually matter. We’d been through this before with WebP, and that took years to get Safari support. But here we are in 2026, and AVIF has quietly become the best image format most developers still aren’t using.

The numbers are hard to argue with: files 50% smaller than JPEG and 20-30% smaller than WebP at the same visual quality. Royalty-free. And now sitting at 92% global browser support. That’s not “emerging technology” territory anymore — that’s “why aren’t you using this?” territory.

Let me walk you through everything I’ve learned from testing and deploying AVIF across production sites, including the parts that still frustrate me.

So What Exactly Is AVIF?

AVIF (AV1 Image File Format) is an image format built on top of the AV1 video codec. It comes from the Alliance for Open Media (AOMedia), which is basically a who’s-who of tech giants — Google, Apple, Mozilla, Netflix, Microsoft, Amazon, and dozens more all collaborating on this thing.

The format was designed to solve three problems at once. First, superior compression — smaller files than JPEG, PNG, or WebP at the same quality level. Second, modern features you’d actually want in 2026 — HDR, wide color gamut, transparency, and animation. Third, and this is the one that really matters for adoption, royalty-free licensing. No patent fees. This is what killed HEIF/HEIC on the web — nobody wants to deal with HEVC patent licensing headaches just to serve images.

Under the hood, AVIF uses the same container as HEIF (based on ISO BMFF) but swaps out the patent-encumbered HEVC codec for AV1. You get comparable compression without the legal baggage. Pretty clever move, honestly.

On the technical side, AVIF supports both lossy and lossless compression, goes up to 12-bit color depth, handles every chroma subsampling mode you’d need (4:2:0, 4:2:2, 4:4:4), does HDR with PQ and HLG transfer functions, has alpha channel transparency, and even does film grain synthesis. It’s a genuinely feature-complete format.

The Compression Numbers Don’t Lie

I know everyone claims their favorite format is “the best,” so let’s just look at the benchmarks. Here’s what happens when you compress the same source image to equivalent perceptual quality across formats:

Format	Typical Photo Size (1 MB JPEG reference)	Compression Ratio vs JPEG	Encoding Speed	Decoding Speed
AVIF	350-500 KB	50-65% smaller	Slow (2-10x slower than JPEG)	Fast
WebP	550-750 KB	25-45% smaller	Fast	Fast
JPEG	1,000 KB (reference)	Baseline	Very fast	Very fast
PNG	3,000-5,000 KB	3-5x larger (lossless)	Fast	Fast

What really impressed me was AVIF’s behavior at low bitrates. This is where formats show their true colors — crank up the compression and see what falls apart first. JPEG starts showing those ugly blocking artifacts we all know and hate. WebP gets this weird smearing effect on textures. But AVIF? It holds onto clean edges and natural-looking textures far longer than either of them. It’s like AVIF knows which details your eyes actually care about and prioritizes those.

That said, AVIF isn’t uniformly dominant. For photographic content with complex textures and gradients, the advantage is massive. For simple graphics with flat colors? The gap over WebP narrows quickly, and PNG is still perfectly fine for screenshots and diagrams. Your mileage will vary depending on what you’re actually compressing.

AVIF vs WebP vs JPEG: Which One When?

This is the question I get asked the most, and the answer is annoyingly nuanced. Each format has genuine strengths, and the right choice depends on what you’re optimizing for.

Where AVIF Genuinely Shines

AVIF was born for photographic images. The compression algorithm is purpose-built for the kind of complex textures and gradients you find in real photographs — skin tones, landscapes, product shots. I’ve tested it extensively on e-commerce catalogs and the difference is night and day compared to JPEG.

When you need the absolute smallest file without visible quality loss, AVIF wins hands down. I’m talking about those performance-critical hero images where shaving off 100 KB actually moves the needle on Core Web Vitals. AVIF gets you there.

If you’re working with HDR or wide-gamut content, AVIF handles 10-bit and 12-bit color natively. And here’s a use case people overlook: product images on transparent backgrounds. JPEG can’t do transparency at all, and PNG makes the files enormous. AVIF gives you transparency with efficient compression. That’s a real superpower for e-commerce.

Where WebP Still Has the Edge

Here’s what surprised me about AVIF encoding speed: it’s not just “a little slower.” We’re talking 2-10x slower than WebP. If you’re processing user-uploaded images in real time or running a pipeline that chews through thousands of images per hour, WebP is the pragmatic choice. You’ll burn through server resources (and patience) trying to AVIF-encode everything on the fly.

Animation is another WebP strength. Yes, AVIF technically supports animated sequences, but the implementation is less mature and browser support is inconsistent. If you’re replacing GIFs, WebP is still your best bet in 2026.

And honestly, WebP’s tooling ecosystem is just more mature. More image editors, more CMS platforms, more processing libraries have first-class WebP support. AVIF is catching up, but it’s not there yet.

Why JPEG Refuses to Die

I have a soft spot for JPEG, and I think you should too. It works everywhere. Every browser, every device, every image editor, every CMS, every email client on the planet. If universal compatibility is your top requirement, nothing beats JPEG. It’s been doing its job since 1992 and it’s still fine at it.

JPEG encoding is also absurdly fast and light on memory. For embedded systems, real-time capture, or serverless functions with tight resource limits, JPEG remains the practical choice. And plenty of enterprise workflows, print pipelines, and legacy systems still expect JPEG in and JPEG out.

For a detailed three-way comparison including PNG, see our WebP vs JPEG vs PNG guide.

Browser Support in 2026: We’re There

Remember when “browser support” was the excuse not to use AVIF? That excuse expired. As of early 2026, roughly 92% of active web users can view AVIF natively.

Browser	AVIF Support Since	Notes
Google Chrome	Version 85 (August 2020)	Full support including animation
Mozilla Firefox	Version 93 (October 2021)	Full support
Apple Safari	Version 16.4 (March 2023)	Full support on macOS and iOS
Microsoft Edge	Version 121 (January 2024)	Full support (Chromium-based)
Opera	Version 76 (2021)	Full support (Chromium-based)
Samsung Internet	Version 20 (2023)	Full support

That’s over 9 in 10 visitors who can handle AVIF without any fallback. The remaining 8% is mostly older Android devices running outdated browser versions. IE11 doesn’t support it either, but if you’re still worrying about IE11 in 2026, we need to have a different conversation.

Every major mobile browser on both iOS and Android supports AVIF now. Safari was the last major holdout, and Apple shipped support back in March 2023. With this level of coverage, AVIF is absolutely viable as a primary format — you just need a fallback strategy for that trailing 8%.

How to Actually Create AVIF Images

Enough theory. Let’s talk about getting AVIF files out the door.

Browser-Based (Easiest)

BulkImagePro lets you batch convert JPEG, PNG, or WebP to AVIF right in your browser. No uploads to a server, no software to install, up to 50 images per batch. It’s what I recommend for anyone who doesn’t want to mess with command-line tools.

Squoosh (squoosh.app) from Google is great for one-off conversions where you want to visually compare quality settings side by side. Not built for batch work, but excellent for dialing in your quality target.

Command-Line (Most Flexible)

libavif is the reference encoder/decoder. On macOS it’s just brew install libavif, and you get the avifenc command for encoding. This is what I use when I need fine-grained control over encoding parameters.

ImageMagick 7+ supports AVIF when compiled with libavif. A simple magick convert input.jpg -quality 50 output.avif gets the job done. If ImageMagick is already in your toolchain, this is the path of least resistance.

ffmpeg can also produce AVIF via the libaom-av1 encoder. It’s more commonly a video tool, but it works for stills in a pinch.

Programming Libraries (Best for Automation)

sharp (Node.js) is my go-to for build pipelines. The API is dead simple: sharp('input.jpg').avif({ quality: 50 }).toFile('output.avif'). That’s it. You’re done.

Pillow (Python) handles AVIF read/write natively in recent versions (or via pillow-avif-plugin for older installs). Just image.save('output.avif', quality=50).

libvips is a fast C library with bindings for practically every language. It supports AVIF through libheif and is the engine under the hood of sharp.

Quality Settings That Actually Make Sense

Here’s something that trips people up: AVIF quality numbers don’t map 1:1 to JPEG quality numbers. An AVIF quality of 50 looks roughly like JPEG quality 80. Keep this table handy:

Use Case	AVIF Quality	Equivalent JPEG Quality	Typical File Size
High-quality photos	55-65	85-90	150-400 KB
Standard web images	40-55	75-85	60-200 KB
Thumbnails	30-45	65-75	15-60 KB
Maximum compression	20-35	55-65	10-40 KB

Serving AVIF Without Breaking Anything

Even at 92% support, you don’t want 8% of your visitors staring at broken image icons. Here’s how to handle fallbacks properly.

The Picture Element (Simplest and Most Reliable)

<picture>
  <source srcset="hero-image.avif" type="image/avif">
  <source srcset="hero-image.webp" type="image/webp">
  <img src="hero-image.jpg" alt="Description of image" width="1200" height="800">
</picture>

The browser picks the first format it understands. Modern browsers grab the AVIF, slightly older ones fall back to WebP, and everything else gets JPEG. The <img> tag at the bottom is your safety net and also carries the alt, width, and height attributes. I’ve used this pattern on every site I’ve worked on and it’s never failed me.

CDN-Level Content Negotiation (Set It and Forget It)

If you’re behind Cloudflare, Fastly, or AWS CloudFront, you can let the CDN handle format selection automatically. No HTML changes required — the CDN detects what the browser supports and serves the right version.

The flow is straightforward: the browser sends an Accept: image/avif, image/webp, image/* header, the CDN checks it against available variants, serves the optimal format, and uses Vary: Accept to ensure correct caching. Once it’s configured, you never think about it again.

Server-Side with .htaccess (Apache)

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Serve AVIF if browser supports it and file exists
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_URI} \.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.avif -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.avif [T=image/avif,L]

  # Serve WebP if browser supports it and file exists
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI} \.(jpe?g|png)$
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

This stores AVIF and WebP versions alongside your originals and serves the best format based on what the browser can handle. You’ll need to pre-generate the variants — BulkImagePro’s converter or a build script can handle that.

AVIF’s Rough Edges (Yes, They Exist)

I genuinely like AVIF, but I’d be doing you a disservice if I didn’t talk about where it still falls short. Every format has trade-offs, and pretending otherwise is how you end up with a broken production pipeline at 2 AM.

AVIF’s Achilles Heel: Encoding Speed

This is the big one, and I wish I could sugarcoat it. I once tried batch-encoding 500 product images with AVIF on a CI server, and the pipeline that normally took 3 minutes with WebP ballooned to over 25 minutes. AVIF can take 2-10x longer than WebP to encode, and up to 20x longer than JPEG.

For static assets where you encode once and serve a million times? Totally worth the wait. For real-time processing of user uploads, high-volume pipelines, or dev workflows where you need fast iteration? It’s a genuine bottleneck. Plan accordingly.

Animation Support Is Half-Baked

AVIF can technically do animated sequences, but “technically” is doing a lot of heavy lifting there. Browser support for animated AVIF is spotty, rendering performance varies wildly, and the tools for creating them are limited. If you’re replacing GIFs or need animated content, stick with WebP for now. Maybe revisit in 2027.

No Progressive Loading (And It Stings)

This one bothers me more than it should. JPEG has supported progressive loading since forever — you see a blurry preview immediately, and it sharpens as data arrives. AVIF can’t do this. The whole file has to download before anything renders. On fast connections, who cares. But on a flaky mobile connection, a 200 KB AVIF that shows nothing until it’s complete can feel slower than a 400 KB progressive JPEG that shows something immediately. Perceived performance matters.

It’s Hungry for Memory

AVIF encoding chews through RAM like nobody’s business. This isn’t usually a problem on a beefy build server, but it bites hard on serverless functions with tight memory caps (looking at you, 256 MB Lambda functions) or when you’re encoding very large images north of 8000 pixels. I learned this the hard way when an AWS Lambda started OOM-killing during what should have been a routine image processing job.

The Tooling Isn’t Quite There Yet

Major browsers and the popular libraries support AVIF just fine. But venture outside that mainstream and you’ll hit gaps. Older Photoshop and Lightroom versions can’t export AVIF natively. Some CMS platforms reject AVIF uploads. Email clients don’t support it at all (always use JPEG for email). And some social media platforms will strip or re-encode your AVIF uploads without telling you. It’s getting better every month, but it’s not seamless yet.

Should You Switch to AVIF? A Real Decision Framework

Forget the hype. Here’s how I’d actually think about this.

Go ahead and adopt AVIF now if your analytics show most visitors are on modern browsers, you’re serving static content where slow encoding isn’t a dealbreaker, you can implement a fallback strategy, and shaving kilobytes off your images actually moves the needle for your use case. If you’re doing HDR or wide-gamut work, it’s a no-brainer.

Hold off for now if your pipeline depends on real-time encoding and can’t absorb the speed hit, your CMS doesn’t support AVIF uploads yet, you lean heavily on animated images, or a meaningful chunk of your audience is on older devices.

For most sites in 2026, the smart play is all three. Generate AVIF, WebP, and JPEG versions of every image. Serve the best format each browser supports. It’s more storage, sure, but storage is cheap and bandwidth isn’t. Your users on modern browsers get tiny AVIF files, everyone else still gets a good experience, and you don’t have to pick just one format.

For a deeper comparison of AVIF with HEIF, see our HEIF vs AVIF formats guide. For more on compression techniques across all formats, visit our image compression complete guide and image compression techniques breakdown.

FAQ

Is AVIF better than WebP?

For photographs, absolutely -- AVIF produces files 20-30% smaller than WebP at the same visual quality, and that gap is hard to ignore. But WebP still encodes way faster, has broader tooling support, and handles animation better. In practice, most sites should serve both formats and let the browser pick the best one it supports.

Can I convert JPEG to AVIF without quality loss?

Not exactly -- any re-encoding introduces some generational quality loss, that's just how lossy compression works. But here's the thing: because AVIF is so much more efficient, you can often produce a smaller AVIF file that looks as good or better than the JPEG you started with. The trick is to always convert from the highest-quality source you have, not an already-compressed JPEG.

Does Safari support AVIF images?

Yep, Safari's had full AVIF support since version 16.4, which shipped in March 2023. That covers Safari on macOS, iOS, and iPadOS. If someone's running iOS 16.4 or later (which is most Apple users by now), they can view AVIF images natively. Safari was the last major holdout, so this was a big deal for adoption.

Why does AVIF take so long to encode?

Because the AV1 codec underneath was designed to squeeze out maximum compression, not to be fast. The encoder does extensive analysis of each image to find the most efficient way to represent it. That thoroughness is exactly why the files end up so small, but it means encoding takes 2-10x longer than WebP and up to 20x longer than JPEG. The good news is that hardware acceleration and faster encoder implementations keep improving, so this gap is narrowing over time.

What quality setting should I use for AVIF?

Don't assume AVIF quality maps to JPEG quality -- it doesn't. For everyday web images, start at AVIF quality 40-55, which gives you results comparable to JPEG quality 75-85. For photography where quality really matters, bump it to 55-65. Thumbnails can usually get away with 30-45. My advice: start at 50, eyeball the result, and adjust from there.

Can I use AVIF for e-commerce product images?

It's actually one of the best use cases for AVIF. Product catalogs are image-heavy, so the compression savings add up fast -- we're talking noticeably faster page loads across your whole catalog. And if you need product photos on transparent backgrounds (which most stores do), AVIF gives you that without the bloated file sizes you'd get from PNG. Just pair it with JPEG fallbacks using the picture element so every visitor sees your products.

How do I batch convert images to AVIF?

The quickest way is BulkImagePro's converter -- drag in up to 50 images, pick AVIF as the output, and you're done. Everything happens in your browser, nothing gets uploaded anywhere. If you need to process thousands of images or automate it in a build pipeline, the sharp library for Node.js or libavif's avifenc command-line tool are your best bets. Both let you set consistent quality and dimension targets across your entire library.

---

Ready to try AVIF compression? Convert your images to AVIF with BulkImagePro — batch convert up to 50 images at once, free and private in your browser. For a broader look at compression formats and techniques, read our complete image compression guide.