The Core Question: Why Does Format Choice Matter?
Images account for 45-65% of a typical web page's total byte weight. Choosing between WebP and AVIF is not a theoretical exercise — it directly affects Largest Contentful Paint (LCP), the metric Google weights most heavily in Core Web Vitals.
A real-world example: an e-commerce product page with 12 product images at 300KB each (JPEG) becomes:
- WebP at 85% quality: ~175KB average → 2.1MB total (42% reduction)
- AVIF at q45: ~120KB average → 1.44MB total (60% reduction)
That 1.4MB difference can shift LCP from 3.2s to 1.8s on a mobile connection — the difference between "Needs Improvement" and "Good" in Search Console.
Format Comparison at a Glance
| Feature | JPEG | WebP | AVIF | |---|---|---|---| | Lossy compression | ✓ | ✓ | ✓ | | Lossless compression | ✗ | ✓ | ✓ | | Alpha channel | ✗ | ✓ | ✓ | | HDR / wide gamut | ✗ | ✗ | ✓ | | Animation | ✗ | ✓ | ✓ | | Avg. size vs JPEG | baseline | -25 to -35% | -40 to -60% | | Encode speed | fast | fast | slow (3-10× slower) | | Decode speed | fast | fast | moderate | | Browser support | 100% | 97.4% | 93.2% | | caniuse baseline | always | 2022 | 2023 |
Browser support figures from caniuse.com as of May 2025.
Compression: Where AVIF Has a Real Edge
AVIF uses AV1 intra-frame encoding, which applies more sophisticated transforms than WebP's VP8/VP8L codec. The gap shows up most with:
- High-detail photography (landscapes, product shots): AVIF saves 30-50% over WebP
- Synthetic / UI screenshots: advantage shrinks to 10-20%
- Illustrations with flat colour: both formats are near-parity
What the codec difference means in practice:
# Convert a PNG to both formats and compare sizes
cwebp -q 85 photo.png -o photo.webp
avifenc --min 20 --max 40 photo.png photo.avif
# Check output sizes
ls -lh photo.*
# photo.png 2.1M
# photo.webp 480K (-77% from PNG)
# photo.avif 310K (-85% from PNG, -35% from WebP)
The trade-off is encode time. On a 4-core machine, encoding 100 images:
- cwebp: ~8 seconds
- avifenc (default settings): ~90 seconds
For dynamic image resizing in production (Vercel Image Optimization, imgix, Cloudinary), this latency becomes request latency on the first cache miss.
Browser Support in Production
WebP crossed the threshold of "safe to ship without fallback" in 2022. AVIF reached similar maturity in 2024, though you still need a fallback for:
- Safari on iOS 15 and earlier (approximately 2-3% of global traffic)
- Samsung Internet before v17
- Firefox on Android before v113
The <picture> element handles fallback cleanly:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product photo" width="800" height="600" loading="lazy">
</picture>
The browser picks the first source it supports. JPEG is the universal fallback — never remove it.
Next.js: Automatic Format Negotiation
Next.js <Image> component handles the <picture> fallback automatically via content negotiation (Accept headers):
// next.config.js
module.exports = {
images: {
formats: ['image/avif', 'image/webp'],
// AVIF first = Chrome/Firefox get AVIF, older Safari gets WebP, old browsers get original
},
};
The caveat: AVIF encoding happens on-demand and is CPU-intensive. On Vercel's serverless infrastructure, this can add 500-2000ms to the first request for each unique image/size combination. Ensure you have adequate minimumCacheTTL:
images: {
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 31536000, // 1 year — critical when using AVIF
},
Tooling Reality Check
WebP tooling has matured since 2018. AVIF is still catching up.
WebP: Excellent tooling coverage
cwebp/dwebp— official Google CLI, battle-tested- Sharp (Node.js) — full WebP support since v0.21
- ImageMagick — WebP since 7.0.2
- Squoosh, Figma, Photoshop (2022+) — native WebP export
- Browser-based conversion: PNG to WebP Converter handles this in-browser via Canvas API
AVIF: Good but with gaps
avifenc— reference encoder, slow but high quality- libavif via Sharp: requires
npm install sharpwith libvips compiled with libavif support - Photoshop: AVIF export added in 2021, but plugin quality varies
- Figma: no native AVIF export as of 2025
When to Use Each Format
Reach for WebP when:
- You need broad tooling compatibility (CI pipelines, CMS integrations)
- Encode speed matters (user-uploaded content, on-the-fly processing)
- You're migrating an existing JPEG-heavy site and want a low-risk win
- Target audience includes older mobile browsers
Reach for AVIF when:
- You control the full encoding pipeline (static assets, not user uploads)
- File size reduction is the primary metric (bandwidth-cost-sensitive)
- You're targeting modern browsers and have proper fallbacks
- HDR content or wide-colour-gamut images are part of the design
Both formats simultaneously (recommended for most sites):
Use <picture> with both AVIF and WebP sources + JPEG fallback, or configure Next.js formats: ['image/avif', 'image/webp']. You get maximum compression for modern browsers with zero sacrifice on compatibility.
Migrating an Existing Image Library
Batch-convert a directory of JPEGs to both WebP and AVIF:
#!/bin/bash
# convert-images.sh — requires cwebp and avifenc
for f in images/*.jpg; do
base="${f%.jpg}"
# WebP
cwebp -q 85 "$f" -o "${base}.webp"
# AVIF (lower quality number = higher quality in avif)
avifenc --min 25 --max 45 "$f" "${base}.avif"
done
echo "Done: $(ls images/*.webp | wc -l) WebP, $(ls images/*.avif | wc -l) AVIF files created"
For a single image or quick check without installing CLI tools, our JPG Compressor runs entirely in your browser and lets you preview WebP quality levels interactively before committing to a batch conversion.
The Verdict
AVIF compresses better. WebP deploys easier. They are not mutually exclusive.
For a new project launching today: configure Next.js with ['image/avif', 'image/webp'] and forget about it — you get the best of both with no extra work. For an existing site on a custom stack, WebP is the high-ROI migration: simple tooling, 97% browser support, and 30-40% typical file size reduction over JPEG.
The one scenario where WebP alone is not enough: serving photographic content to users on high-bandwidth-cost connections (emerging markets, mobile data). For those audiences, the extra 20-30% AVIF saves on top of WebP is meaningful.