The Core Question: Why Does Format Choice Matter?
Images account for a large share 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 a dozen product images served as JPEG can be substantially lighter once converted:
- WebP at 85% quality: noticeably smaller per image than the JPEG original, with broad browser support
- AVIF at a comparable quality level: typically smaller still than WebP for the same photos, at the cost of slower encoding
That difference in total page weight can move LCP from the "Needs Improvement" band into "Good" on a mobile connection — measure your own pages in Search Console rather than relying on a fixed figure.
Format Comparison at a Glance
| Feature | JPEG | WebP | AVIF | |---|---|---|---| | Lossy compression | ✓ | ✓ | ✓ | | Lossless compression | ✗ | ✓ | ✓ | | Alpha channel | ✗ | ✓ | ✓ | | HDR / wide gamut | ✗ | ✗ | ✓ | | Animation | ✗ | ✓ | ✓ | | Avg. size vs JPEG | baseline | smaller | smallest | | Encode speed | fast | fast | slow (multiple times slower) | | Decode speed | fast | fast | moderate | | Browser support | universal | near-universal | modern browsers | | caniuse baseline | always | 2022 | 2023 |
Browser support reflects caniuse.com data as of May 2025; check caniuse.com for current figures.
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's advantage over WebP is largest here
- Synthetic / UI screenshots: AVIF's advantage shrinks
- 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 and compare the output sizes for your own images
ls -lh photo.*
# photo.png (original)
# photo.webp (noticeably smaller than the PNG)
# photo.avif (smaller still than the WebP for typical photos)
The trade-off is encode time: cwebp is fast, while avifenc at quality settings is substantially slower per image. Measure on your own corpus rather than assuming a fixed ratio.
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 (still a non-trivial share 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 noticeable latency 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, near-universal browser support, and a meaningful 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 savings AVIF delivers on top of WebP can be meaningful.