How image compression works

An uncompressed image is a grid of pixels, each holding a red, green and blue value — usually one byte each. A 4000 × 3000 photograph is twelve million pixels, so around 36 MB before anything clever happens.

Nobody ships 36 MB. Compression closes that gap in one of two ways: finding structure that lets the same information be written more briefly, or deciding some of the information is not worth keeping.

Lossless compression is bookkeeping. Instead of storing two hundred identical white pixels, store “white, two hundred times”. Instead of storing each row from scratch, store how it differs from the row above. Reverse the bookkeeping and you get the original back exactly.

This is what PNG does, and it explains PNG's personality perfectly. A screenshot of an interface is full of repetition — flat panels, repeated borders, long runs of one colour — so it compresses enormously. A photograph of leaves has almost no exact repetition, so it barely compresses at all.

Lossy compression takes the other route. JPG, and lossy WebP, work roughly like this:

• Separate brightness from colour, because human vision is far more sensitive to changes in brightness than in hue — so colour can be stored at lower resolution than brightness without looking wrong.
• Break the image into small blocks and describe each block as a sum of patterns, from broad gradients up to fine detail.
• Round off the fine-detail patterns aggressively and the broad ones gently, then store the result — which is now much shorter, because a great many of the rounded values became zero.

Nothing is retrieved on the way back. The decoder rebuilds an image that resembles the original closely enough, and the difference is what people mean by artefacts.

The quality number is not a percentage of anything, and it is not comparable between encoders. It controls how aggressively those rounding steps are applied. Lower quality rounds harder, more values collapse to zero, the file gets shorter, and the rebuilt image drifts further from the original.

Because the rounding hits fine detail first, damage appears in a predictable order: faint blocking in smooth gradients such as skies, then ringing around hard edges and text, then visible eight-pixel blocks across the whole frame.

The JPG compressor defaults to 75, which is comfortably inside the band where the damage is hard to see on a photograph. There is more on choosing a number in compressing without losing too much quality.

Open a JPG, change nothing, save it again: the encoder compresses an image that already contains artefacts, and treats those artefacts as detail worth encoding. Repeat that a few times and the errors compound. This is generation loss, and it is why a picture that has been through several rounds of upload and download looks tired even though nobody edited it.

• Keep an original — camera file, layered document, master export.
• Make edits against the original, not against a delivered JPG.
• Compress once, at the end, at the size you are actually going to use.

Does lossless re-saving cost anything?

No. Saving a PNG ten times gives you the same pixels ten times. Only lossy formats accumulate damage.

Because PNG cannot round away detail, its size is driven by how much genuine variety the image contains. The effective control is the colour count: reduce an image from millions of colours to a few hundred chosen well, and the lossless step suddenly has far more repetition to work with.

That reduction is a real change to the pixels, so it is only free when the image did not need those colours — logos, icons, flat illustration and UI exports usually do not. Photographs do, which is why PNG compression is the wrong tool for them and converting to WebP is often the better answer.

• Match the format to the content, not to habit — the reasoning is in JPG vs PNG vs WebP.
• Resize before you compress. Halving the dimensions removes three quarters of the pixels, which no quality setting can match for free.
• Judge quality at the size the image will be seen, not zoomed to 400%.
• When a form demands an exact file size, let the KB/MB reducer search for the setting instead of guessing at it repeatedly.