WebP vs JPEG
Smaller files or universal compatibility? A practical comparison of the two formats that carry most of the photos on the web.
The short answer
Use WebP for anything displayed on a website or in an app you control. Use JPEG when the file will be handed to someone else — a client, a printer, a marketplace upload form, an older piece of software — and you cannot be certain what will open it.
Every browser released in the last several years displays WebP, so "will it work?" is rarely the deciding question on the web any more. The awkward cases are desktop applications, print workflows and upload forms that still reject anything that is not a JPEG.
How they compare
| WebP | JPEG | |
|---|---|---|
| File size at equal quality | 25–35% smaller | Baseline |
| Transparency | Yes (alpha channel) | No |
| Lossless mode | Yes | No |
| Animation | Yes | No |
| Browser support | Universal on current browsers | Universal, everywhere, always |
| Desktop app support | Patchy outside browsers | Effectively total |
| Best for | Web delivery, app assets | Sharing, print, uploads, archives |
Where the size saving comes from
JPEG was standardised in 1992 and divides the image into 8×8 blocks. WebP borrows from video compression: it predicts each block from its neighbours and only stores the difference. On photographs with large smooth areas — skies, skin, walls — that prediction is very accurate, which is why the savings there are largest.
The corollary is that savings shrink on busy, high-detail images. A dense forest scene or a noisy low-light photo may only come out 10–15% smaller. Always compare the actual before and after sizes rather than assuming a fixed percentage.
Quality settings are not interchangeable
A quality value of 80 does not mean the same thing in both encoders. WebP at 80 generally looks like JPEG at 85–90. If you convert a JPEG at quality 80 into a WebP at quality 80, you are usually gaining more size reduction than you realise — and occasionally losing more detail than you intended.
Sensible starting points
- Photographs for the web: WebP quality 75–82.
- Product shots and anything where detail matters: WebP quality 85–90.
- Screenshots, UI graphics and flat colour: lossless WebP, which often beats PNG.
- JPEG when you need it: quality 80–85 for the web, 90+ for print or further editing.
Serving both, properly
You do not have to choose one format for your whole site. The <picture> element lets the browser pick, falling back automatically when a format is unsupported:
- Generate a WebP and a JPEG version at each width you need.
- List the WebP source first inside a <picture> element and the JPEG second.
- Put the JPEG in the <img> tag as the final fallback, with width, height and alt text.
- Let the browser choose — it takes the first source it understands.
Our website image optimizer does all of this in one pass: it produces the responsive widths in both formats and writes a <picture> snippet whose filenames match the files you download.
Do not re-encode without a reason
Both formats are lossy, and each round trip discards a little more detail. Converting a JPEG to WebP and back to JPEG leaves you with a worse image than you started with and no size benefit. Convert once, from the highest-quality original you have, and keep that original.