WebP vs JPEG: What the Format Switch Actually Saves
Same 20 images as Study 01, same browser encoders, quality 50–90 plus lossless. WebP turns out to dominate completely for some content types — and barely matter for others.
The Question
"Convert to WebP, it's smaller" is possibly the most-repeated advice in image optimization. But how much smaller, at which quality, and for what kind of image? A format switch competes for your attention with simply lowering the JPEG quality slider — if WebP at Q70 is the same size as JPEG at Q55, the "savings" are mostly the slider, not the format.
This study measures WebP against JPEG under identical conditions and asks:
- How much smaller is WebP than JPEG at the same quality setting?
- Where does that advantage hold, and where does it disappear?
- What does lossless WebP do against PNG — for every content type?
Method
Test set: the exact same 20 images as Study 01 — 10 photographs (1600×1200), 4 UI screenshots (1600×1000), 3 text documents (1240×1754), 3 flat illustrations (1600×1200). The JPEG numbers below are the Study 01 measurements, re-used untouched.
Encoder: canvas.toBlob('image/webp', q) in Chromium 151.0.7922.34 on Windows 10 — the browser's native WebP encoder, the same one behind our Format Conversion tool. Quality 0.50–0.90 for lossy, plus quality 1.0, which Chrome implements as lossless WebP. We verified the lossless claim at the pixel level: re-decoding the q=1 output and comparing every RGBA byte against the source bitmap produced zero differences on both test images we checked.
Fidelity metric: SSIM (grayscale, 11×11 Gaussian window, σ = 1.5) against the decoded source — identical to Study 01, so numbers are directly comparable.
Raw data: per-image results in r2-results.json.
Results 1: Photographs — the Slider Matters More Than the Format
| Quality | WebP | WebP SSIM | JPEG | JPEG SSIM | WebP / JPEG |
|---|---|---|---|---|---|
| 50 | 90 KB | 0.9491 | 149 KB | 0.9588 | 0.60× |
| 60 | 102 KB | 0.9549 | 172 KB | 0.9827 | 0.59× |
| 70 | 115 KB | 0.9606 | 191 KB | 0.9954 | 0.60× |
| 80 | 150 KB | 0.9714 | 207 KB | 0.9958 | 0.73× |
| 90 | 240 KB | 0.9870 | 241 KB | 0.9978 | 1.00× |
At the same slider value WebP files are ~60% of the JPEG size — but the SSIM column shows those aren't equal-quality files. WebP simply spends its bits differently: the honest comparison is at matched fidelity:
- WebP Q60 (102 KB, SSIM 0.955) ≈ JPEG Q50 (149 KB, SSIM 0.959) → the real format saving is about 31%, not 40%.
- At the top end the advantage vanishes entirely: WebP Q90 and JPEG Q90 weigh the same (240 vs 241 KB). For near-lossless photos, the format doesn't matter.
Here's the same crop at quality 50 — reference, JPEG, WebP:
One more data point: lossless WebP for photos averaged 1,293 KB — a 47% cut from the 2,434 KB lossless-PNG equivalent (measured in Study 01's supplementary run), but far heavier than any lossy option. Use it only when every bit of quality matters.
Results 2: Screenshots — WebP Wins on Both Axes, Everywhere
| Quality | WebP | WebP SSIM | JPEG | JPEG SSIM | WebP / JPEG |
|---|---|---|---|---|---|
| 50 | 40 KB | 0.9948 | 65 KB | 0.9877 | 0.62× |
| 70 | 46 KB | 0.9967 | 83 KB | 0.9918 | 0.56× |
| 90 | 73 KB | 0.9988 | 133 KB | 0.9976 | 0.55× |
(Full Q50–90 table in the raw data.) This is the clearest result of the study: for UI screenshots WebP dominates JPEG at every quality level — smaller and structurally more faithful, with no trade-off to weigh. The reason is WebP's predictive lossless-style block coding handling flat surfaces and sharp edges much better than JPEG's DCT.
A surprising counter-finding, though: lossless WebP came out larger than the source PNG for screenshots — 259 KB vs 123 KB on average, on PNGs that had been optimized by the screenshot tool. Chrome's lossless WebP is not guaranteed to beat an already-optimized PNG for complex UI content; verify before switching your screenshot pipeline. (For text documents the same comparison flipped the other way — see below.)
Results 3 & 4: Documents and Flat Art — This Is Where WebP Shines
Study 01 showed JPEG losing to PNG for text and flat art at every quality. WebP flips that verdict:
| Content | Source PNG | Best JPEG (Q90) | Lossless WebP | Lossy WebP Q50–90 |
|---|---|---|---|---|
| Text documents | 317 KB | 619 KB (1.95×) | 87 KB (0.27×) | 250–381 KB, SSIM ≥ 0.998 |
| Flat illustrations | 24 KB | 106 KB (4.36×) | 19 KB (0.78×) | 26–43 KB, SSIM ≥ 0.988 |
- Text documents: lossless WebP is the runaway winner — 3.6× smaller than PNG, pixel-identical, and 7× smaller than the best JPEG (which also wasn't lossless). If you archive scanned or rendered text pages as images, lossless WebP is the format our data points to.
- Flat illustrations: lossless WebP beats PNG by 22%, and even lossy WebP Q50 (26 KB) undercuts every JPEG encoding while scoring higher SSIM than any JPEG below Q90. Remember Study 01's finding that JPEG Q70 was both bigger and more artifacted than Q50 on this content — WebP has no such trap zone in our measurements.
Conclusions
| Your image is… | What our data says to do |
|---|---|
| A photo for the web | WebP Q60–70 gives the same fidelity as JPEG Q50–60 for ~30% less. But if you need maximum quality (Q90+), JPEG costs the same — and remains the safer pick for software compatibility outside browsers. |
| A screenshot / UI capture | Lossy WebP, unambiguously: smaller and more faithful than JPEG at every level tested. But keep PNG if your PNG is already well-optimized — lossless WebP can be larger. |
| A text document / scan | Lossless WebP — the study's biggest single win: 3.6× smaller than PNG, pixel-identical. JPEG remains the worst option at any quality. |
| Flat illustration / graphics | Lossless WebP (0.78× PNG) or lossy WebP Q50+ (0.4× JPEG size, higher SSIM). Avoid JPEG for this content entirely. |
The one-sentence version: "Convert to WebP" is excellent advice for screenshots, documents and graphics, decent advice (at matched fidelity) for photos, and worthless advice near quality 90 — where we measured zero difference.
A practical caveat our data can't capture: WebP is universally supported in every current browser, but not everywhere else — some desktop software, email clients and older systems still can't read it. For web delivery it's safe; for files you email to your accountant, JPEG remains the lingua franca.
Limitations
- Same caveat as Study 01: SSIM is a proxy for perception, and 20 images expose patterns rather than prove universes.
- We tested Chrome's encoders only. Other browsers' WebP encoders may tune differently (decoding is standardized, encoding is not).
- AVIF and JPEG-XL were not tested — they need a different code path than canvas and deserve their own study.
Convert Your Own Images
Our format conversion tool uses the same browser encoder this study measured — no uploads, results in seconds: