Image Compression Explained: Lossy, Lossless, and WebP

Compression feels like a magic trick. The same photograph, ninety percent smaller, and you cannot see the difference. The trick is not that information was compressed cleverly — it is that most of the information was never useful to you in the first place.

Two different jobs

Lossless compression rewrites data so it takes less space and can be restored exactly. It works by finding redundancy: a run of 400 identical pixels becomes a note saying "400 of these". Decompress and you get back the original file, byte for byte. PNG works this way, as do ZIP and GIF.

Lossy compression throws information away permanently and keeps the parts your eye relies on. Decompress and you get something that looks like the original but is not. JPEG works this way, as does WebP in its lossy mode.

Neither is better. They answer different questions. Lossless asks "how small can this get with nothing lost?" Lossy asks "how small can this get before anyone notices?" — and the answer to the second is dramatically smaller, because human vision is easy to fool in specific, predictable ways.

What lossy compression exploits

Three facts about eyes, in rough order of how much they buy.

You see brightness far better than colour. The retina carries many more rods than colour-sensitive cones. JPEG separates an image into luminance (brightness) and chrominance (colour), then stores colour at half or a quarter of the resolution. Half the colour data disappears and almost nobody sees it.

You do not notice fine detail in busy areas. The image is cut into 8×8 blocks and each is converted into a set of frequency components — broad gradients versus fine texture. High-frequency components get rounded off aggressively. In a field of grass this is invisible; the grass was noise to you anyway.

You judge edges more than surfaces. Compression preserves sharp transitions and spends less on the flat regions between them.

The quality slider controls how hard the rounding is. This is why the same setting behaves so differently on different images: a photo of foliage has enormous high-frequency content to discard, while a screenshot of text is almost entirely sharp edges — exactly what the algorithm is worst at.

Why your logo looks terrible as a JPEG

Take a flat-colour logo with hard edges and save it as a JPEG. Grey smudges appear around every boundary.

That is ringing. A hard edge is, in frequency terms, a sum of many high-frequency components. Round those off and the edge cannot reconstruct cleanly; it overshoots and oscillates. The same rounding that is invisible in grass is glaring against flat white.

Flat colour is also exactly where lossless compression shines — a large uniform region is pure redundancy. So the rule is not about importance, it is about content:

• Photographs, gradients, texture → lossy. Enormous savings, no visible cost.
• Logos, icons, screenshots, line art, anything with text → lossless. Smaller and sharper than the lossy version.
• Anything needing transparency → PNG or WebP. JPEG has no alpha channel at all.

Where WebP fits

WebP does both. In lossy mode it typically produces files 25–35% smaller than JPEG at comparable visual quality, because it predicts each block from its neighbours before encoding the difference — a technique borrowed from video compression, where consecutive frames are mostly similar. In lossless mode it generally beats PNG. It supports transparency in both modes, which PNG can do and JPEG cannot.

Support is no longer a consideration; every current browser handles it. The remaining reasons to reach for JPEG are a service that specifically demands it, or a workflow with software old enough not to recognise it.

A practical routine

1. Resize before you compress. This is the biggest saving available and the one most often skipped. A 4000-pixel-wide photo displayed in an 800-pixel column is carrying 25 times the pixels it needs. Dropping the dimensions first means every later step operates on a fraction of the data — resizing then compressing beats compressing alone by a wide margin.
2. Pick the format from the content, using the rule above.
3. Start at quality 80 and go down, not up. Around 80 the loss is invisible on photographs. Compare at 100% zoom, not fitted to the screen, and look at flat areas and edges — that is where artefacts appear first.
4. Check the number, then check the image. If a step saved 4% it was not worth the quality cost; revert it.

A compressor that runs in the browser makes this loop fast, and has a side benefit worth knowing: because the picture is redrawn onto a canvas before being re-encoded, the output carries only pixels. EXIF metadata — camera model, timestamp, GPS coordinates — does not survive the round trip. That is usually welcome before publishing a photo, and occasionally a surprise if you were relying on it.

The one-way door

Lossy compression is not reversible, and it accumulates. Every save discards more information, so a JPEG edited and re-saved five times has been degraded five times even if the quality setting never changed. The damage is invisible per step and obvious by the end.

Keep an original. Edit from it, export a compressed copy, and never let the compressed copy become the master. That single habit prevents the most common way images quietly deteriorate over a project's life.