Home/Research/WebP vs JPEG vs AVIF vs PNG
Original research · measured July 7, 2026

WebP vs JPEG vs AVIF vs PNG: which is actually smallest?

We took four real images — a photo, a marketing graphic, a diagram, and a logo — and re-encoded each to all four formats at typical quality settings, then measured every byte. AVIF was smallest every single time, averaging 55% smaller than JPEG. But the gap swung from 32% on the photo to 64% on the diagram — because the “best” format depends entirely on what's in the image.

Convert an image now
55%
smaller with AVIF, on average

Versus a strong (mozjpeg) JPEG at matched settings — and AVIF was the smallest format in all four tests, from 32% to 64% smaller.

26%
smaller with WebP, on average

Universally supported and a safe default — but its win over JPEG ranged from just 2% on the photo to 46% on the diagram.

The data

Output size in KiB after re-encoding each source image. Smallest per row is highlighted. Measured July 7, 2026.

ImageJPEGWebPAVIFPNGAVIF vs JPEG
Photograph
800×600 coastline photo
86.684.658.622832%
Marketing graphic
1200×630, gradient + text
41.92615.428.663%
Diagram / line art
1024×1024 instructional guide
26.314.39.5116.464%
Logo
512×512, flat color + transparency
108.3417.660%

Two things jump out. AVIF is smallest in every row — often by a lot. And the photo is the outlier: it's the only image where WebP barely beats JPEG, and where PNG balloons to 228 KB (2.6× the JPEG). Flat-color images — the graphic, diagram, and logo — are where modern formats crush JPEG.

A note on the JPEG column:JPEG can't store transparency. The marketing graphic and logo both have an alpha channel, so their JPEG figures are for a version flattened onto a solid background — not a like-for-like replacement.

So which should you use?

There isn't one winner — there's a right tool per job. Here's what the numbers say:

Photographs

AVIF, or a good JPEG

AVIF cut our photo by a third. But a modern JPEG encoder (mozjpeg) is closer than the folklore suggests — WebP was only 2% smaller here. Photos are the one case where JPEG still holds up.

Screenshots, graphics, diagrams

AVIF or WebP — never JPEG

Flat color and hard edges are where JPEG falls apart (ringing around text). WebP was 38–46% smaller and AVIF 63–64% smaller than JPEG on these.

Logos & icons with transparency

AVIF/WebP, or PNG

JPEG can't store an alpha channel at all. AVIF was smallest by far; PNG stays the safe, universally-supported lossless option.

Anything that must be pixel-exact

PNG (or lossless WebP)

Lossless keeps every pixel. Just never use PNG for photographs — our photo was 228 KB as PNG versus 59 KB as AVIF.

How we measured

  • Four real source images that this site owns — a photograph, a marketing graphic, a line-art diagram, and a logo — chosen because each stresses image compression differently.
  • Each was re-encoded with libvips (via sharp 0.34) at fixed settings: JPEG quality 80 with the mozjpeg encoder (a strong baseline, not a weak default), WebP quality 80, AVIF quality 50, and PNG lossless at maximum compression.
  • The honest caveat: a quality number of 80 doesn't mean the same visual quality across formats, so these are comparisons at common settings, not at perceptually-matched quality. We used a strong JPEG encoder specifically so the comparison doesn't flatter the newer formats.
  • The photograph's source is itself a JPEG (as most real-world photos are — straight off a phone or camera), so its figures reflect re-encoding an already-lossy original. That is the common real case.
  • Your exact bytes will differ with the encoder, effort level, and image. The point isn't the decimal — it's the shape: AVIF smallest, WebP a safe middle, JPEG only competitive on photos, PNG only for lossless needs.

One more thing: browser support

Smaller isn't useful if browsers can't open it. The good news: WebP and AVIF are both supported in every current major browser — Chrome, Edge, Firefox, and Safari (WebP since Safari 14, AVIF since Safari 16). If you need to support a decade-old browser, JPEG and PNG remain the universal fallback — which is exactly what the <picture> element is for: serve AVIF, fall back to WebP, fall back to JPEG.

Do it yourself — in your browser, no upload

Every conversion above runs locally in your browser — your images are never uploaded.