Why your “compressed” image came out bigger
Compressing a screenshot as JPEG can double its size. The reason is what each format assumes about the picture you gave it.
You drag a 400 KB screenshot into a compressor, set the quality to 80 percent, and get back a file of 950 KB. Nothing is broken. The tool did exactly what you asked, and the answer is that “compression” is not one thing — it is several different bets about what your picture looks like, and a screenshot loses most of them.
Two families of compression
Image formats split into two camps. Lossless formats like PNG reconstruct the original pixel for pixel. They win by finding repetition: a run of four hundred identical grey pixels is stored once with a count, not four hundred times.
Lossy formats like JPEG throw information away. JPEG chops the image into 8×8 blocks, converts each to frequencies, and discards the high-frequency detail your eye is least likely to miss. For a photograph, where every pixel already differs slightly from its neighbour, this is enormously effective.
Why a screenshot becomes larger as JPEG
A screenshot is mostly flat colour with hard edges — a solid toolbar, a white panel, crisp black text. PNG stores that in almost nothing, because runs of identical pixels compress beautifully.
JPEG sees the same image as a nightmare. A hard black-on-white edge is, in frequency terms, an enormous spike across the whole spectrum. To represent it, JPEG has to keep coefficients it would normally discard. You get two bad outcomes at once: the file grows, and the text develops the grey smearing around letters known as ringing.
So a 400 KB PNG screenshot re-encoded as JPEG can genuinely land at 900 KB and look worse. The compressor did not malfunction. It applied a photographic algorithm to something that is not a photograph.
What to use instead
| Image | Best format | Why |
|---|---|---|
| Photograph | JPEG or WebP | Continuous tone, no hard edges to preserve |
| Screenshot, UI, diagram | WebP or PNG | Flat colour and sharp edges survive intact |
| Logo or icon | SVG if you have it | Vectors scale without any pixels at all |
| Needs transparency | WebP or PNG | JPEG has no alpha channel |
WebP is the useful middle. It has both a lossy and a lossless mode, and its lossless mode beats PNG on most UI imagery while its lossy mode is competitive with JPEG on photographs. Every current browser supports it. If you only remember one rule: WebP unless you have a specific reason not to.
The transparency trap
JPEG has no alpha channel. Convert a PNG with a transparent background to JPEG and something must fill that space. Naive converters fill it with black, which is why logos sometimes arrive with an ugly dark box around them.
Filling with white instead is usually right, but it is still a decision being made on your behalf. If transparency matters, the format has to support it — there is no quality setting that recovers it.
Picking a quality number
For lossy formats, quality is a dial between size and artefacts, and it is not linear. Dropping from 100 to 85 usually removes half the bytes and is invisible. Dropping from 85 to 70 removes much less and starts to show. Below about 50, blocking around edges becomes obvious.
Around 75 to 80 is the usual sweet spot for photographs. For anything with text in it, do not use a lossy format at all — no quality setting makes JPEG good at letterforms.
Check, do not assume
The one habit worth building is comparing the output size to the input before you ship. A compressor that cannot get a file smaller should tell you so rather than quietly hand back something worse.
Our image compressor shows both sizes side by side and picks a sensible starting format from what you dropped in — WebP for PNG input, JPEG for photographs. It runs in your browser, so nothing is uploaded to find out.