If you're optimizing images in 2026, your real choice is between two modern formats: WEBP and AVIF. JPEG still has its place but it's the floor, not the ceiling.

At a glance

	WEBP	AVIF
File size vs JPEG	25-35% smaller	40-50% smaller
Browser support	All modern browsers (since 2020)	All modern browsers (since 2023)
Transparency	Yes	Yes
Animation	Yes	Limited
Encode speed	Fast	Slow (3-10× slower than WebP)
Decode speed	Fast	Fast
Wide-gamut color	sRGB only	Yes (HDR-ready)

When WEBP wins

Bulk batches: encoding 500 images, encode speed matters. WebP is 5-10× faster.
Animated assets: WebP animation is mature, AVIF's isn't.
You need 100% compatibility back to 2020: WebP support is broader on older devices.
Simple sRGB photos: difference between WebP and AVIF is small for ordinary photos.

When AVIF wins

Hero / above-the-fold images: every kilobyte counts at the top of the page. AVIF gives you the smallest possible file.
Photography portfolios: AVIF's color depth shows on rich photography.
Mobile-first sites: data caps and slow networks reward smaller files.
HDR or wide-gamut content: AVIF carries color profile info JPEG/WebP cannot.

The pragmatic answer

Serve both. Use the <picture> element to let browsers pick:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." loading="lazy">
</picture>

Modern browsers grab AVIF. Slightly older ones grab WebP. Ancient ones fall back to JPEG. Everyone wins.

Quality settings that work

Format	Recommended Q
JPEG	80-85
WEBP	75-82
AVIF	55-65

AVIF needs lower numerical quality to produce the same perceived quality — its encoder is just more efficient per unit of "quality."

Try it yourself

Drop one image into the size comparator. You'll see actual byte sizes for the same image at 5 different qualities. Best way to find your sweet spot for your specific content.

Profile Pilot

WEBP vs AVIF — which modern image format should you actually use?