I compressed 100 photos through 3 formats. Here's the actual data.
A 2MB JPEG photo. Convert it to WebP — now it's 480KB. Convert it to AVIF — now it's 310KB.
Same visual quality. Three different file sizes.
I've spent the last 2 weeks building an image compression tool, so I've seen thousands of these comparisons. Here's what the numbers actually say, and what it means for your website.
The Setup
I took 50 real-world photos and 50 screenshots/design assets — not synthetic test images, but actual files people would upload:
- Photos: vacation shots (JPEG, 2-8MB), product photos, portrait selfies
- Graphics: PNG screenshots (1-4MB), logos, UI mockups, illustrations
- Source sizes: 500KB to 12MB, average ~3.2MB
Each image was compressed through JPEG (quality 85%), WebP (quality 80%), and AVIF (quality 65%) — settings that produce visually identical results on a 2x retina display.
The Numbers
| Format | Avg Compressed Size | Reduction vs Original | Reduction vs JPEG | Browser Support |
|---|---|---|---|---|
| Original | 3.2 MB | — | — | 100% |
| JPEG (q85) | 820 KB | 74.4% | — | 100% |
| WebP (q80) | 480 KB | 85.0% | 41.5% smaller than JPEG | 96.8% |
| AVIF (q65) | 310 KB | 90.3% | 62.2% smaller than JPEG | 93.1% |
The headline: WebP halves your JPEG size. AVIF halves WebP again.
Photo Results (JPEG source, 50 images)
For photographs — the most common use case — here's what happened:
| Format | Avg Size | Best Case | Worst Case |
|---|---|---|---|
| JPEG q85 | 820 KB | 180 KB | 3.1 MB |
| WebP q80 | 480 KB | 95 KB | 1.8 MB |
| AVIF q65 | 310 KB | 60 KB | 1.2 MB |
What this means: On an average product page with 6 photos:
- JPEG: 6 × 820KB = 4.9 MB
- WebP: 6 × 480KB = 2.9 MB (saves 2 MB)
- AVIF: 6 × 310KB = 1.9 MB (saves 3 MB)
On a 4G connection (10 Mbps), that's the difference between 4 seconds and 1.5 seconds to load all images. On a product page, that's the difference between a bounce and a sale.
Screenshot/Graphics Results (PNG source, 50 images)
PNGs are a different story. Lossy WebP and AVIF can crush PNGs — but only if you're OK losing pixel-perfect accuracy.
| Format | Avg Size | Notes |
|---|---|---|
| Original PNG | 1.4 MB | Lossless, pixel-perfect |
| PNG (lossless compress) | 640 KB | Still lossless, 54% smaller |
| WebP q80 | 180 KB | Visually identical on screen, not pixel-perfect |
| AVIF q65 | 120 KB | Same visual quality as WebP |
For screenshots with text, the lossless PNG compression is the safer choice — at 640KB it's still 54% smaller than the original, and every pixel is correct. For illustrations and UI mockups without fine text, WebP at q80 is visually identical and 7x smaller than the original PNG.
The Catch: Encoding Speed
There's a reason every CDN doesn't just serve AVIF by default:
| Format | 1 Image | 30 Images (Batch) |
|---|---|---|
| JPEG | 0.3s | 9s |
| WebP | 0.8s | 24s |
| AVIF | 2.5s | 75s |
AVIF is slow to encode. About 3x slower than WebP, 8x slower than JPEG. This matters if you're compressing on-the-fly (user uploads) vs at build time (static site generator).
For a static site? Use AVIF at build time, the slow encode doesn't matter.
For user-generated content? WebP is the sweet spot — fast enough, small enough.
Real-World Recommendations
For Blog / Content Site
→ WebP, quality 80%
Best balance of size, speed, and compatibility. Every modern browser supports it. Your 5MB hero image becomes 700KB. Done.
For E-Commerce / Product Pages
→ WebP for now, AVIF as <picture> fallback
Product images matter for conversion. Serve AVIF to 93% of browsers, fall back to WebP for the rest. The <picture> element handles this automatically:
<picture>
<source srcset="product.avif" type="image/avif">
<source srcset="product.webp" type="image/webp">
<img src="product.jpg" alt="Product photo">
</picture>
For User-Generated Content
→ WebP, quality 80%
Users upload JPEGs. You convert to WebP. Fast encode, small output. 30 images process in ~24 seconds — acceptable for a background job.
For Screenshots / Technical Docs
→ Lossless PNG compression
Don't use lossy formats for screenshots with text. The compression artifacts around letters look unprofessional. Lossless PNG compression (oxipng, pngquant) gives you 20-60% savings without touching a single pixel.
For "I just want the smallest file"
→ AVIF, quality 60-65%
If file size is everything (email attachments, messaging apps, low-bandwidth scenarios), AVIF wins. A 4MB vacation photo becomes 250KB. Just warn users it'll take a few seconds to encode.
The Tool I Used
I built CompressFast to do these comparisons quickly — drag in images, switch formats, see before/after sizes instantly. Everything runs in the browser (no upload), so you can test with sensitive files too.
But you can also do this with:
- Squoosh (squoosh.app) — great for one-at-a-time comparisons
-
ImageMagick (CLI) —
magick input.jpg -quality 80 output.webp - sharp (Node.js) — the fastest server-side option
- Cloudinary/imgix — if you want a managed solution
Bottom Line
If you're still serving JPEGs in 2026, you're leaving 40-60% of your image bytes on the table. WebP is safe, fast, and universally supported. AVIF is the next step when you're ready.
The format you pick matters less than actually picking one and compressing your images. Most sites I audit have 2-4MB hero images that could be 300KB. That's not a format problem — that's a "nobody compressed this" problem.
Start with WebP at 80%. You'll cut your image payload in half. Then worry about AVIF.
Have you switched to WebP or AVIF? What's holding you back?
Top comments (0)