Two formats, one question nobody agrees on
I've spent way too much time thinking about image formats. That's not a flex. It's the kind of thing you end up doing when you build tools that compress images all day. And the question I keep getting — from friends, from random people on Twitter, from that one guy in every Discord server — is always the same: "Should I use WebP or AVIF?"
The honest answer? It depends. But that's a cop-out, so let me actually tell you what I think.
The compression numbers don't lie
AVIF wins on raw compression. It's not close. I ran a batch of about 200 product photos through both encoders last month, and AVIF came out 20-30% smaller than WebP at the same perceived quality. For photographic content — the kind with gradients, skin tones, complex lighting — AVIF is just better at keeping detail while stripping bytes.
Here are rough numbers for a typical 1200x800 photo:
| Quality Level | JPEG Size | WebP Size | AVIF Size |
|---|---|---|---|
| High (q80+) | 100 KB | ~72 KB | ~58 KB |
| Medium (q60) | 65 KB | ~48 KB | ~35 KB |
| Low (q40) | 40 KB | ~30 KB | ~20 KB |
Those AVIF numbers at medium quality are kind of absurd. Half the size of JPEG and the images look... fine? Good, even. That said, the gap shrinks a lot when you're compressing screenshots, UI mockups, or anything with sharp text and flat colors. WebP lossless actually beats AVIF lossless for that kind of content more often than you'd expect. (For a deeper dive on when to use each legacy format, see my breakdown of PNG vs JPG vs WebP.)
But then there's the encoding speed problem
And this is where my love affair with AVIF gets complicated. Encoding AVIF is slow. We're talking 2 to 10 seconds for a single photo, compared to maybe 50-200ms for WebP. That's not a rounding error. That's the difference between a tool that feels snappy and one that makes you wonder if it crashed.
I noticed this acutely when building CanYouSmoosh. Compression happens right in your browser, so encoding speed is something you feel. WebP? Near instant. AVIF? You're watching a progress bar. For a single hero image you're optimizing for a blog post, whatever, grab a coffee. But batch-process 50 product photos? You'll be waiting a while.
If you're pre-encoding images during a build step — say, an Astro or Next.js static site — the encoding time barely matters. Your CI pipeline doesn't care about an extra 30 seconds. But for anything interactive or real-time, WebP is dramatically more practical.
Browser support is basically a non-issue now
I remember when Safari finally shipped AVIF support in 16.4. It was early 2023, and suddenly the last major holdout was gone. Before that, recommending AVIF meant recommending a <picture> element with a WebP fallback, which is fine but annoying.
In 2026, AVIF support sits above 95% globally according to Can I Use. WebP is at effectively 100%. Unless you're building for some niche embedded browser or a kiosk running ancient software, both formats just work. This used to be AVIF's achilles heel. It isn't anymore.
Where each format actually makes sense
WebP is the workhorse. It encodes fast, decodes fast, supports transparency and animation, and works literally everywhere. It's the format I reach for when I don't want to think about it. Screenshots for documentation? WebP. Animated demos replacing a GIF? WebP. Real-time compression in a web app? WebP, easily.
AVIF is the specialist. When you're publishing a photography portfolio and every kilobyte of bandwidth costs money, AVIF earns its keep. When you need HDR or wide color gamut support — something WebP simply doesn't offer — AVIF is your only real option among the modern formats. And when you can afford to let an encoder chew on your images for a while during a build step, the file size savings are genuinely significant at scale.
I've settled into a pattern that works for me: AVIF for pre-built photographic content where I can encode once and serve forever. WebP for everything else. That covers about 90% of the decisions I make.
The quality settings aren't interchangeable
One thing that trips people up: quality 75 in WebP and quality 75 in AVIF produce very different results. AVIF's quality scale is more aggressive — a lower number gets you surprisingly good-looking output. Here's roughly where I've landed after a lot of A/B testing:
For WebP, I default to quality 75-80. That's the sweet spot where file size drops significantly but you'd struggle to spot any difference from the original. Go down to 60 for thumbnails, up to 85 if someone is pixel-peeping.
For AVIF, quality 55-65 gets you roughly the same visual fidelity as WebP at 75-80. AVIF just punches harder at lower quality values. I usually start around 60 and work my way down until I notice artifacts, then bump it back up a notch.
Serving both formats with the picture element
If you really want to maximize savings, you can serve AVIF to browsers that support it and fall back to WebP for everything else. The <picture> element makes this easy:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description" width="1200" height="800">
</picture>
The browser picks the first format it supports. AVIF-capable browsers get the smallest file, everyone else gets WebP, and the JPEG is there as an ancient-browser safety net. The main downside is that you're generating and hosting three versions of every image, which can be annoying to manage. For a handful of hero images, it's worth the effort. For a catalog with 500 product photos, you probably just pick one format and call it done.
Actually trying both is underrated
One thing I wish more people did: just... try both on your actual images. The benchmarks and averages are useful, but image compression is weirdly content-dependent. I've had photos where WebP at quality 75 looked better than AVIF at quality 60, and others where AVIF at quality 40 was indistinguishable from the original.
With CanYouSmoosh, you can drop an image in, flip between formats, drag the quality slider around, and see the output size change in real time. Everything runs locally on your machine — nothing gets uploaded anywhere. It takes thirty seconds to answer the "which format should I use for THIS image" question, and I think that's more useful than any blog post (including this one).
So, which one?
If you're only going to pick one format and call it a day: WebP. It's fast, it's universal, and the compression is still way better than JPEG. You won't regret it.
If you're willing to put in a little more effort — serving AVIF with a WebP fallback, or using AVIF selectively for your heaviest photographic content — you'll squeeze out meaningful bandwidth savings. On a high-traffic site, that translates directly to faster loads and lower CDN bills.
Neither format is going away. WebP has the momentum of a decade of adoption. AVIF has the backing of every major browser vendor through the Alliance for Open Media. The real winner is that JPEG's dominance is finally, actually, genuinely fading. And honestly, it's about time.
If you're looking for practical tips on getting your images smaller without any visible quality loss, I wrote a separate guide on how to reduce image size without losing quality.