WebP vs AVIF: which should you actually use?
For most websites in 2026, the honest answer is WebP. AVIF compresses better, but the gap is smaller than the marketing suggests and it costs you encoding time. Use AVIF when you serve large hero images and can automate the pipeline.
Last updated 11 September 2026
The practical difference
| JPEG | WebP | AVIF | |
|---|---|---|---|
| Typical size vs JPEG | baseline | 25–35% smaller | 40–50% smaller |
| Browser support | Universal | Universal | All modern browsers |
| Transparency | No | Yes | Yes |
| Encoding speed | Instant | Fast | Slow |
| Best for | Compatibility | Almost everything | Large images, automated pipelines |
Why WebP is usually the right default
WebP hits the point of diminishing returns. It cuts file sizes by roughly a third against JPEG, it handles transparency so it replaces PNG too, every browser in use supports it, and it encodes fast enough that converting 200 images takes seconds rather than minutes.
Crucially, it's supported natively by browsers' built-in encoders, which means tools can convert to it instantly with no extra download. That matters more than it sounds — it's the difference between a conversion that feels immediate and one where you wait.
Where AVIF genuinely wins
AVIF's compression is better, particularly on photographic images with smooth gradients — skies, skin tones, shadows. On a large hero image, the difference between a 180 KB WebP and a 120 KB AVIF is real and worth having.
It also handles gradients without the banding WebP sometimes produces at aggressive quality settings.
The costs are equally real. AVIF encoding is computationally expensive — often several seconds per image versus milliseconds for WebP. In a browser-based tool it requires a WebAssembly encoder to be downloaded first. And the file-size advantage narrows considerably on small images; below about 500 px, AVIF's container overhead can make files larger than WebP.
A simple decision rule
- Product photos, thumbnails, blog images, anything under ~1000 px: WebP at quality 80.
- Full-width hero images and large photography: AVIF at quality 60–70 is worth the encoding time.
- Logos, icons, screenshots with text: PNG, or WebP lossless.
- Anything being uploaded to a platform you don't control (social media, marketplaces, some CMSs): JPEG.
Quality settings that actually work
Quality numbers aren't comparable between formats. WebP at 80 and AVIF at 80 are not the same thing — AVIF at 80 is visually near-lossless and much larger than you need.
Sensible starting points:
- JPEG: 80–85
- WebP: 75–85
- AVIF: 55–70
Always check the result on a photo with a smooth gradient and one with fine detail. Those are the two places compression artefacts show first.
You don't have to choose only one
If you control your site's HTML, the <picture> element lets browsers pick:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Description">
</picture>The browser takes the first format it supports. It costs you three exports per image instead of one, which is only practical if you're converting in bulk — which is, conveniently, what ShrinkFox does. Run the same batch three times with different format settings.
What actually moves the needle
Format choice is worth maybe 30% of your image weight. Resizing is worth far more. Serving a 4000 px photo scaled down by CSS into a 400 px slot wastes roughly 99% of the bytes you sent, and no format will save you from that.
Resize to the size you actually display, then worry about format.