Every image you ship to the web gets rendered twice: once when you optimize it, and again by the browser. Pick the wrong format and you're either leaving performance on the table or fighting tooling support. In 2026, the two formats worth your attention are WebP and AVIF. Both beat JPEG on compression. Both support transparency. Both have broad browser support. The question is which one to reach for first — and when to use both together.
For all the attention AVIF gets, most of the web still hasn't adopted either format. In the HTTP Archive's 2024 crawl, WebP accounted for about 12% of all images and AVIF just 1% (Web Almanac, Media, 2024). That gap is the opportunity: if your competitors are still shipping JPEG and PNG, switching to a modern format is one of the cheapest performance wins available.
If you're new to image optimization, our WebP conversion guide covers the basics of why modern formats matter. This post goes deeper on the WebP-vs-AVIF tradeoff.
Key Takeaways
- WebP cuts file sizes by 25–34% vs JPEG at equivalent quality (Google WebP Compression Study)
- AVIF compresses harder than WebP, but the saving is content-dependent — test with your own images
- Browser support: WebP is universal (Chrome 32+, Firefox 65+, Safari 14+); AVIF reached all major browsers by Safari 16 in 2022
- Default to WebP; layer AVIF on top with
<picture>for hero images and LCP candidates
What Is WebP?
WebP was developed by Google and publicly released in 2011, built on technology from the On2 VP8 codec. It supports lossy and lossless compression, alpha transparency, and animation — making it a genuine JPEG + PNG + GIF replacement in a single format.
Google's published research shows WebP achieves 25–34% smaller file sizes than equivalent JPEGs at the same perceptual quality (Google WebP Compression Study). The same study, measured at a constant SSIM (structural similarity) score, found WebP files came in at roughly 66–75% of the equivalent JPEG size across three separate image datasets. Gains vary with content — photos with gradients and rich colour compress well; flat-colour graphics may compress even better using lossless WebP.
Browser support (2026): Chrome 32+, Firefox 65+, Safari 14+, and all Chromium-based browsers. WebP now reaches roughly 96% of global users (Can I use: WebP) — effectively universal, which means you can usually serve it without a fallback.
What Is AVIF?
AVIF (AV1 Image File Format) was finalised in 2019 by the Alliance for Open Media — a consortium that includes Netflix, Google, Apple, Microsoft, and Amazon. It is built on keyframes from the AV1 video codec and brings significantly stronger compression than WebP.
How much you save over WebP is highly content-dependent and varies widely from image to image, so it's worth testing on your own assets rather than relying on a single headline number. AVIF also supports HDR, wide colour gamut (Display P3, Rec. 2020), and 10/12-bit colour depth — capabilities that matter for high-fidelity photography and premium e-commerce product shots.
Browser support (2026): Chrome 85+ (2020), Firefox 93+ (2021), Safari 16+ (2022), and all Chromium-based browsers. AVIF now reaches roughly 93% of global users (Can I use: AVIF) — close behind WebP, with the remaining gap mostly older Safari and legacy Android. Adoption is climbing fast off a small base: the HTTP Archive found nearly four times as many AVIF images in 2024 as in 2022, a 386% jump in two years (Web Almanac, Media, 2024).
Head-to-Head Comparison
| Feature | WebP | AVIF |
|---|---|---|
| Compression vs JPEG | ~25–34% smaller | ~40–50% smaller |
| Transparency | Yes | Yes |
| Animation | Yes | Limited tooling |
| HDR / wide colour gamut | No | Yes |
| Lossless | Yes | Yes |
| Encoding speed | Fast | Slower (improving) |
| Browser support | Universal | All major browsers |
| Tool support | Excellent | Good and growing |
The compression-vs-JPEG row deserves a caveat: these are typical ranges, not guarantees. The actual saving depends on the image. A noisy, high-detail photograph narrows the gap between formats; a poster-flat illustration or a screenshot with large solid areas widens it. Always test with your own images rather than trusting a single headline percentage.
Quality Settings That Actually Matter
Format choice is only half the decision — the quality setting you encode at usually moves file size more than WebP-vs-AVIF does. A few practical anchors:
- WebP photographs: quality 75–82 is the sweet spot for most web photos. Above 85 you pay in bytes for detail almost nobody notices; below 70 banding starts showing in skies and gradients.
- AVIF photographs: AVIF holds quality at lower numbers than WebP, so a setting around 50–63 (on the common 0–100 scale) often matches WebP-80 output while being meaningfully smaller. Don't reuse your JPEG quality number — AVIF's scale behaves differently.
- Lossless graphics (logos, icons, UI): use lossless WebP. For flat-colour assets it routinely beats PNG without the perceptual risk of lossy encoding.
- Encoder effort: AVIF encoders expose an "effort" or "speed" knob. Higher effort = smaller files but slower encoding. For a one-time hero image, crank it up; for a batch job in CI, dial it back so builds don't crawl.
If you work from the command line, the reference encoders make this concrete:
# WebP at quality 80
cwebp -q 80 input.png -o output.webp
# AVIF at quality 60, higher effort (slower, smaller)
avifenc --min 0 --max 63 -q 60 -s 4 input.png output.avif
Don't have a toolchain set up? You can skip all of it and compress in the browser — more on that at the end.
When to Use WebP
WebP is the right default for most web projects:
- Speed matters in your pipeline. WebP encodes dramatically faster than AVIF, which matters when you're processing hundreds of product images in a build step or CI pipeline.
- You need animation. WebP animation tooling is more mature and widely supported than AVIF's equivalent.
- Broad compatibility with zero configuration. Safari has supported WebP since 2020; you can serve it without a
<picture>fallback in most modern projects. - Predictable results. WebP compression behaviour is well understood, and quality settings map reliably to output size.
When to Use AVIF
AVIF is worth the added complexity when file size is the priority:
- Hero images and LCP candidates. Your Largest Contentful Paint image directly affects Core Web Vitals. Shaving 20–30% off that file size is a meaningful win.
- E-commerce product photography. High-fidelity product shots — fine texture, specular highlights, accurate colour — benefit most from AVIF's superior detail retention and wide-gamut support.
- Image-heavy pages. Blogs, portfolios, and galleries where cumulative image weight compounds across dozens of assets.
- HDR displays. AVIF is the only web image format that properly supports HDR and Display P3 colour — important for photography portfolios on modern Apple and OLED displays.
Use Both With <picture>
The cleanest production approach: serve AVIF to browsers that support it, WebP as the fallback. The HTML <picture> element handles this with no JavaScript and no runtime cost:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Hero image" loading="lazy" width="1200" height="630" />
</picture>
Browsers pick the first <source> they support and ignore the rest. The <img> fallback ensures compatibility with any environment that supports neither. This is a zero-cost pattern — pure declarative HTML.
A Simple Decision Workflow
When you're staring at a folder of images and need to decide, this order works for almost every project:
- Is it a flat-colour graphic, logo, or icon? Use lossless WebP. Done.
- Is it a hero, banner, or your LCP image? Encode both AVIF and WebP, serve them with
<picture>, and let the browser pick. - Is it a regular in-body photo or thumbnail? Plain WebP is fine. The marginal AVIF saving rarely justifies maintaining a second file for every image.
- Does it need HDR or wide-gamut colour? AVIF is your only web option — there's no WebP equivalent.
That's it. You don't need to convert your entire library to AVIF on day one; concentrate the effort where bytes matter most.
Practical Recommendations
- Default to WebP for everything. It's supported everywhere, compresses well, and your tooling already handles it.
- Add AVIF for your top LCP images. Run your hero and above-the-fold images through an AVIF encoder, wrap them in
<picture>, and measure the Core Web Vitals delta in PageSpeed Insights. - Never re-encode lossy to lossy. Start from the original uncompressed source. Each generation of lossy re-encoding stacks visible artefacts.
- Target 150–200 KB for hero images, under 100 KB for thumbnails. These are practical starting points for fast-loading pages — adjust based on your measured LCP and layout shift budget.
- Measure, don't assume. After switching formats, re-run PageSpeed Insights on a real URL and watch the LCP and total page-weight numbers. A format change that doesn't move your metrics isn't worth the extra build complexity.
Remember the bigger picture: with WebP on only ~12% of images and AVIF near 1% web-wide (per the HTTP Archive figures above), simply adopting a modern format already puts your pages ahead of most of the web on image weight.
Try It Right Now
You don't need Photoshop or a build pipeline to test either format. Use our free image compressor to convert and compress images to WebP directly in your browser — no upload, no account, no file size limit. Your files never leave your device.
Convert a hero image, compare the output sizes, and the format choice becomes obvious. For a step-by-step walkthrough of WebP conversion specifically, see our WebP conversion guide.