PNG vs JPEG vs WebP: the file sizes we actually measured

Every format comparison you read online quotes the same rough figure: WebP is about 30% smaller than JPEG. We wanted our own numbers, so we encoded seven images to all three formats through the same code our tools use and measured every byte. The real answer varies far more than 30% — from 12% to 70% depending entirely on what is in the picture.

The measurements

Each source image was decoded once, then encoded to PNG (lossless), JPEG at quality 80, and WebP at quality 80. The encoding runs in headless Chromium through the browser’s own canvas encoder — the identical path used when you export from the converter, so these are the sizes you would actually get.

Why the spread is so wide

JPEG and WebP both work by throwing away detail your eye is bad at noticing, but they disagree about how. JPEG divides the image into 8×8 blocks and simplifies each one. That is efficient for photographs, where neighbouring pixels are already similar, and wasteful for images with large areas of identical colour, because it keeps paying the per-block cost for regions that could be described in a sentence.

WebP has a smarter toolkit: it can predict a block from its neighbours and store only the difference. On our flat graphic, that dropped the file from 23 KB to 7 KB. On the Mount Rushmore photograph — rock texture edge to edge, where almost nothing is predictable — WebP’s advantage narrowed to 12%, because there simply is not much redundancy left to exploit.

The screenshot result is the one worth remembering

Our synthetic UI screenshot is the only image where lossless PNG (41 KB) came out dramatically smaller than JPEG at quality 80 (150 KB). JPEG was 4× larger than the lossless option, and it looked worse: JPEG’s block-based approach produces visible grey fuzz around small text, the artefact usually called mosquito noise.

This is the single most common format mistake we see. Saving a screenshot, a chart, a diagram or a receipt as JPEG gives you a bigger file and smeared text. If your image contains text or hard edges, PNG or WebP is almost always both smaller and sharper.

Transparency narrows the field to two

JPEG has no alpha channel at all. When you convert a transparent image to JPEG, something has to fill the gap — our tools flatten onto white, which is why a logo exported to JPEG arrives with a white box around it. In the table above, the transparent graphic’s JPEG figure (17 KB) is really measuring a different, flattened image.

For anything that needs to sit on a coloured background, the real choice is PNG (25 KB) versus WebP (6 KB). WebP supports alpha and was substantially smaller here.

PNG is not a compression format

It is worth being blunt about this, because the PNG column surprises people. PNG is lossless: it stores every pixel exactly. On photographs that is enormously expensive — our landscape shot was 2.2 MB as PNG against 186 KB as JPEG, roughly 12× the size for a difference nobody can see at normal viewing distance.

PNG earns its place on graphics, screenshots and anything needing transparency, where its run-length-style compression genuinely suits the content. Using it for photographs is the second most common format mistake.

So which should you pick?

Photographs for the web: WebP. It was smaller than JPEG on every photograph we tested, and every current browser supports it. Keep JPEG for things that leave the web — email attachments, print shops, older desktop software, anything where you cannot control what opens the file.

Screenshots, diagrams, charts, text: PNG or WebP, never JPEG. Our screenshot was 4× smaller as PNG.

Logos and anything transparent: WebP if size matters, PNG if you need maximum compatibility with older tools.

You can try any of these against your own image in the converter — it shows the resulting file size before you download — or run a whole folder through bulk convert. Once you have picked a format, the quality setting is the other half of the file-size question.

How we measured this

Seven images, four of them real photographs from Wikimedia Commons and three generated by our benchmark script so that flat-graphic and screenshot content is exactly reproducible. Each was decoded once and re-encoded to each format in headless Chromium, using the same canvas.toBlob() call the site’s tools use. The script is scripts/benchmark.mjs in our repository, and the figures on this page are rendered directly from its JSON output rather than typed by hand.

One caveat worth stating: these are Chromium’s encoders. A different encoder — MozJPEG, or Squoosh’s WebP settings — will produce different absolute numbers. The relative pattern, which format suits which content, holds regardless.