JPEG vs WebP vs AVIF: file size at the same visual quality

Format comparisons usually quote each encoder's own "quality 80", but those scales aren't comparable — so we measured. We encoded 16 test images (1200×800) as JPEG, WebP and AVIF at 12 quality settings each, scored every result with SSIM, and compared file sizes at equal measured quality. At the high-quality setting most sites export (JPEG q90), WebP came out −25% and AVIF −40% vs JPEG. Lossless PNG of the same images averaged 1255 KB — an order of magnitude above any lossy option.

Privacy-first: every image is processed locally in your browser. Nothing is uploaded, stored or transmitted to any server.

UI graphics: WebP and AVIF beat JPEG q70 quality even at their lowest settings, so no size-at-equal-quality comparison exists — their smallest files already look better.

How we measured

Each of the 16 images — spanning photo-like content, heavy texture and grain, flat UI graphics, dense text, and flat illustration — was encoded with libvips (mozjpeg, libwebp, libaom) at quality settings from 1 to 100. Every encode was decoded again and scored against the original with SSIM (structural similarity on luma, the standard 11×11 Gaussian window), a measure of how different the result looks to a human rather than how different the bytes are.

Formats are then compared at matched quality: for each image, JPEG's SSIM at a given setting becomes the target, and each other format's size at that exact SSIM is interpolated along its own quality curve. Images where a format cannot reach the target are excluded from that row (the "images" column), so every mean compares identical pictures at identical measured quality.

What the numbers say

AVIF is the consistent winner: −43% vs JPEG at medium quality and −40% at high quality on this corpus, with the biggest wins on smooth photographic gradients and flat illustration, where its modern entropy coding shines.

WebP's advantage concentrates at the high-quality end (−25% at JPEG q90) and on text and graphics. At low-to-medium quality on photographic and textured content it is roughly JPEG-sized at equal SSIM — the 1992 format remains surprisingly competitive exactly where it was designed to operate.

Fine, noisy texture is expensive for every codec: grain is high-entropy signal that cannot be predicted away, only stored or smoothed. If your images are grainy, expect several times the file size of clean content at the same visual quality, in any format.

What this means in practice

For the web today: AVIF first, WebP as the safety net, JPEG only when you must support very old software or picky email clients. Every current browser (Chrome, Edge, Firefox, Safari) decodes both AVIF and WebP. For photos you keep re-editing, export the master as PNG or keep the original — every lossy re-save compounds quality loss.

PNG stays the right choice for two jobs lossy formats can't do: pixel-exact graphics (logos, screenshots for documentation) and transparency with sharp edges. For everything photographic it is the wrong tool — our corpus averaged 1255 KB per image in PNG against 80 KB in high-quality AVIF.

Limitations — read before quoting

The corpus is synthetic: deterministic generated images spanning five content classes, not photographs. That makes the benchmark fully reproducible and free of licensing problems, but absolute sizes will differ from your images; the relative rankings are what transfer. SSIM is a well-established proxy for perceived quality, but no metric is your eyes — always check the actual output at your chosen setting.

Encoders matter as much as formats: these numbers come from libvips' encoders at default effort. Browsers' built-in canvas encoders (which in-browser tools, including ours, use) typically produce somewhat larger files at the same setting, and a slow AVIF encode at maximum effort produces smaller ones. Resolution was fixed at 1200×800; very small or very large images shift the constants, not the conclusions.