JPEG, PNG and WebP, and when each one wins

There is one question that decides this, and it is not about quality settings:

Does the image have large areas of identical flat colour, or is every pixel slightly different from its neighbour?

Screenshots, logos, diagrams, charts and line art are the first kind. Photographs are the second. The two compress by completely different mechanisms, and picking the wrong one costs a factor of five to ten in file size.

Why the two kinds behave so differently

PNG compresses by finding repetition. It looks for runs of identical pixels and for rows that resemble the row above, and encodes the differences. Give it a screenshot with a solid white background and it is devastatingly effective — thousands of identical pixels collapse to almost nothing.

Give it a photograph and it finds nothing. No two pixels in a photo of a face are identical, because sensor noise guarantees variation everywhere. PNG dutifully stores all of it, losslessly, and produces a file three to ten times larger than the equivalent JPEG.

JPEG compresses by discarding detail you cannot see. It describes 8×8 blocks as frequency patterns and throws away precision in the fine ones. On a photograph this is close to magic. On a screenshot it is a disaster: sharp black-on-white text edges are the highest-frequency content there is, so JPEG produces grey fringing and coloured halos around every letter — and it is still bigger than the PNG would have been.

The table

Image	Best format	Why	Typical size
Phone photo, 12MP	JPEG or WebP	Photographic noise everywhere; nothing to repeat	300KB–1MB
Screenshot of text	PNG or WebP lossless	Vast flat areas; sharp edges must stay sharp	40–200KB
Logo, icon, line art	PNG or WebP lossless	Few colours, hard edges, usually transparency	2–50KB
Chart or diagram	PNG or WebP lossless	Flat fills and thin lines	10–80KB
Photo needing transparency	WebP	JPEG has no alpha channel at all	200KB–800KB
Scanned document	JPEG, or a PDF	Depends on whether it is text or a photo of paper	varies

Where WebP fits

WebP has two completely separate modes, and most comparisons confuse them.

Lossy WebP competes with JPEG and usually wins by 25–35% at matched visual quality. It also supports transparency, which JPEG cannot do at all.

Lossless WebP competes with PNG and usually wins by around 25%.

So WebP is close to a straight upgrade on both. The reasons not to use it are narrowing but real:

• Some upload forms reject it. An exam portal's validator written in 2014 accepts JPEG and PNG and nothing else. If a form demands JPEG, the fact that WebP is technically better is irrelevant.
• Some desktop software still handles it awkwardly, particularly older versions of Office and some print workflows.

Browser support is no longer a reason — every current browser has handled WebP for years.

The transparency trap

This is the most common expensive mistake, and it is subtle.

JPEG has no alpha channel. If you save a transparent PNG as JPEG, the transparency does not degrade — it is replaced with solid white or black, permanently. A logo with a transparent background becomes a logo in a white box, and no amount of re-saving brings it back.

That makes format conversion for a possibly-transparent image a one-way decision with a destructive failure mode. The safe default is: if it might have transparency, use WebP, not JPEG.

Detecting transparency properly means inspecting every pixel's alpha value, which is a real cost on a large image. Deciding by format instead — treating any PNG as possibly transparent and sending it to WebP — is cheap and never destroys anything. The trade-off is that a fully opaque PNG gets WebP where JPEG might have been a few kilobytes smaller, which is the right way round to be wrong.

What this means for hitting a byte target

Here is the part that surprises people: PNG cannot be aimed at a file size.

PNG is lossless. There is no quality dial, so its size is whatever the image's content dictates. You cannot ask for a 100KB PNG — you can only resize the image, re-encode, and see what comes out, then resize again.

JPEG and lossy WebP both have a quality parameter, which means a tool can bisect: encode, weigh the result, adjust, repeat. That is how you land at 98KB against a 100KB limit rather than at 40KB or 140KB.

So if a form has given you a number:

• Photograph → JPEG at a bisected quality. Straightforward.
• Screenshot or logo → try lossless PNG or WebP first. If it already fits, you are done with no loss at all. If it does not, you are choosing between resizing it and accepting lossy encoding on sharp edges.
• Needs transparency → WebP, lossy if a number must be hit.

Compress an image to 100KB, to 200KB or to 500KB measures the real output at each step rather than estimating, and the image compressor takes any target above 5KB. Format selection happens automatically on the rule above — a PNG becomes WebP so transparency survives, a JPEG stays JPEG.

A note on the formats people ask about next

AVIF beats WebP by a further 20% or so and has good browser support now, but encoding is slow and upload-form support is effectively zero. Worth it for your own website, not for a file you have to hand to someone else.

HEIC is what your iPhone is probably producing. It is efficient and almost nothing accepts it, which is why a phone photo so often needs converting before it can be uploaded.

GIF should not be used for still images under any circumstances. It is limited to 256 colours and is larger than PNG for the same content. Its only remaining use is animation, where WebP also beats it.

FAQ

Is WebP better than JPEG?

Usually yes, by 25–35% at the same visual quality, and it supports transparency which JPEG cannot. The reason to still use JPEG is compatibility: some upload forms and older desktop software reject WebP outright. If a form specifies JPEG, use JPEG — a smaller file in a format the validator refuses is not smaller, it is rejected.

Why is my PNG so much bigger than my JPEG?

Because PNG is lossless and photographs have no repetition to exploit. PNG compresses by finding runs of identical pixels and similarities between rows, which works brilliantly on flat graphics and not at all on photographic sensor noise. A 12-megapixel photo saved as PNG is routinely 5–15MB where the JPEG is 3MB, with no visible difference.

Should I convert PNG to JPEG to save space?

Only if the image is a photograph and has no transparency. If it has large flat areas — a screenshot, a chart, a logo — JPEG will produce a larger file and add visible fringing around the edges. And if it has any transparency, converting to JPEG replaces it with solid white permanently. For a possibly-transparent image, WebP is the safe choice.

Which format do online forms accept?

JPEG is accepted essentially everywhere and is the safe default for photographs. PNG is accepted nearly everywhere. WebP is increasingly accepted but is still refused by a fair number of government and exam portals, so do not assume it. Always check the stated format requirement, and make sure the file extension matches the actual format — some validators check the extension and some check the file header, and a mismatch fails one or the other.