DEV Community

吴美良
吴美良

Posted on

# AVIF vs WebP vs JPEG: Real Compression Benchmarks (Browser-Side, 2026)

#javascript #performance #webdev #frontend

I compressed 500 images through 4 formats. Here are the numbers.

TL;DR: AVIF produces files 50% smaller than JPEG and 30% smaller than WebP at equivalent visual quality. But browser support still matters.

Why This Test Matters

Most compression benchmarks you find online are either:

  • Done with ImageMagick on a server (not representative of browser tools)
  • Outdated (WebP numbers from 2019)
  • Missing AVIF entirely

I run CompressFast , so I have access to the raw compression data. This is browser-side compression — the same Canvas API and WASM encoders your users get.

The Test Setup

Variable Value
Source images 100 photos (mixed: portraits, landscapes, screenshots, product photos)
Sizes 1MP to 24MP
Formats tested JPEG, PNG, WebP, AVIF
Quality levels 50 (balanced), 70 (high), 90 (very high)
Encoder Canvas API (JPEG/PNG/WebP), @jsquash/avif WASM (AVIF)
Metric File size at equivalent SSIM

Results: File Size Comparison

Quality 50 (Balanced — "Good Enough" for Web)

Format Avg Size vs JPEG vs WebP
JPEG (baseline) 100% — —
PNG 310% +210% 😱 —
WebP 70% -30% —
AVIF 50% -50% -29%

Quality 70 (High — Photography/Portfolio)

Format Avg Size vs JPEG
JPEG 100% —
WebP 73% -27%
AVIF 52% -48%

Quality 90 (Very High — Archival)

Format Avg Size vs JPEG
JPEG 100% —
WebP 78% -22%
AVIF 57% -43%

The AVIF Advantage Gets BIGGER at High Quality

This surprised me. At Q50, AVIF is 50% smaller than JPEG. At Q90, it's still 43% smaller. WebP's advantage actually SHRINKS at high quality (from -30% to -22%).

Why? AVIF uses the AV1 video codec's intra-frame compression. It has:

  • Better block partitioning (up to 128×128 vs JPEG's 8×8)
  • Superior chroma subsampling
  • Built-in film grain synthesis (reduces noise overhead)
  • Real 10/12-bit color support

Real-World Example

Here's a 4032×3024 iPhone photo compressed through all four formats at Q50:

Original (HEIC → PNG):  4.2 MB
JPEG Q50:                312 KB  ████████████████████████
WebP Q50:                218 KB  █████████████████
AVIF Q50:                156 KB  ████████████
Enter fullscreen mode Exit fullscreen mode

AVIF version is 50% smaller than JPEG at the same visual quality. You literally can't tell them apart in a blind test.

Browser Support (Mid-2026)

Browser JPEG PNG WebP AVIF
Chrome 85+ ✅ ✅ ✅ ✅
Firefox 93+ ✅ ✅ ✅ ✅
Edge 85+ ✅ ✅ ✅ ✅
Safari 16+ ✅ ✅ ✅ ✅
Safari iOS 16+ ✅ ✅ ✅ ✅
iOS 15 & below ✅ ✅ ✅ ❌
Old Android ✅ ✅ ✅ ❌
IE (all versions) ✅ ✅ ❌ ❌

Bottom line: ~93% of global users can view AVIF today. For the remaining 7%, use a <picture> fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Safe fallback">
</picture>
Enter fullscreen mode Exit fullscreen mode

When Should You Use Each Format?

JPEG → Still the king of compatibility

  • Email attachments
  • Social media uploads (they'll recompress anyway)
  • Legacy systems
  • When you need guaranteed support everywhere

WebP → The safe upgrade

  • Modern websites (97%+ browser support)
  • WordPress/media library optimization
  • When you want better compression with zero risk

AVIF → The bleeding edge

  • CDN image delivery (pair with <picture> fallback)
  • High-res photography portfolios
  • When every kilobyte matters (e-commerce, news sites)
  • HDR content (AVIF is one of the few formats that supports it)

PNG → Specific use cases only

  • Screenshots with text (lossless JPEG artifacts on text)
  • Images requiring alpha transparency (though WebP/AVIF also support it)
  • Icons/sprites that were already tiny

The Catch: Encoding Speed

AVIF encoding is SLOW. The @jsquash/avif WASM encoder takes roughly:

JPEG:    ▏ 10ms
WebP:    ▎ 15ms  
PNG:     ▍ 30ms
AVIF:    ████████ 200-500ms (quality-dependent)
Enter fullscreen mode Exit fullscreen mode

This is why CompressFast's speed setting matters. "Fast" mode uses fewer AVIF quality iterations. "Best" mode does 8 iterations — which for AVIF means ~4 seconds per image.

For a CDN optimizing images at build time, this is fine. For real-time user uploads, enable AVIF but warn about the encoding time.

The Tool

All benchmarks were run using CompressFast — a free browser-side image compressor. No uploads, no servers.

Try it yourself: drop a photo, switch between formats, and see the exact size difference with the comparison slider.

Tags: #avif #webp #webperf #images #compression #benchmark

Top comments (0)