Compress WebP

JPEG divides an image into 8 × 8 blocks and describes each one with a discrete cosine transform. WebP's lossy mode borrows from video coding instead: it predicts each block from the pixels already decoded above and to the left of it, and then stores only the difference between the prediction and reality.

Because most of an image is fairly predictable from its neighbours, that difference is usually small, and small numbers cost few bits. This is why WebP reaches the same apparent quality as JPEG in roughly a quarter fewer bytes, and why it degrades more gracefully at low quality — it blurs rather than breaking into visible 8 × 8 squares.

WebP also carries an alpha channel and a lossless mode that JPEG has never had, which is what lets one format replace both JPEG and PNG on a web page.

Lossless compression rewrites the file so it takes up less space while every pixel value survives exactly. Decode the result and you get the original back, byte for byte. PNG, GIF and lossless WebP work this way, and so does a ZIP archive.

Lossy compression throws information away on purpose. JPEG converts the image to a frequency representation, then discards the high-frequency detail your eye is least likely to miss. The result cannot be reversed: the discarded detail is gone. That is also why lossy formats reach file sizes lossless ones cannot approach — a photo saved as PNG is routinely five to ten times larger than the same photo saved as JPEG at a sensible quality.

Neither one is better. Photographs, with their smooth gradients and noise, suit lossy encoding. Screenshots, logos, line art, charts and anything with large flat areas and hard edges suit lossless encoding, because lossy encoders produce visible haloes around sharp boundaries.

The quality number in a JPEG or WebP encoder is not a percentage of anything. It is an index into a set of quantisation tables that control how aggressively detail is discarded. The relationship to file size is steep and non-linear.

For a typical 12-megapixel phone photograph the curve looks roughly like this:

• Quality 95–100 — near-original appearance, but the file is often only 20–35% smaller. Rarely worth it for the web.
• Quality 80–90 — the sweet spot for photography you care about. Typically 50–70% smaller with no artefact you would notice at normal viewing distance.
• Quality 70–80 — the sweet spot for ordinary web images. Usually 70–85% smaller. Artefacts appear only if you zoom in on flat sky or skin.
• Quality 50–70 — visible softening and blocking in smooth areas, though thumbnails and background images survive it well.
• Below 50 — obvious blocking, ringing and colour banding. Useful only for placeholders.

Diminishing returns set in fast at the top of the range. Going from quality 100 to quality 90 usually halves the file for no perceptible change; going from 90 to 80 saves far less and costs slightly more. If you only remember one number, use 80.

JPEG has no alpha channel. It cannot store transparency in any form. When a transparent PNG is converted to JPEG the transparent pixels have to become something, and most tools silently fill them with black — which is why a logo exported to JPEG so often arrives with an unwanted dark box around it.

If your image has transparency you have three sensible options: keep it as PNG, use WebP (which supports alpha and is typically 25–35% smaller than PNG for the same image), or flatten it onto a known background colour deliberately rather than letting an encoder choose for you.

PNG's own compression is lossless and works best on images with few distinct colours and large uniform regions. A screenshot of a text document compresses beautifully. A photograph saved as PNG does not, because virtually every pixel differs from its neighbour and there is no redundancy for the algorithm to exploit.

Every time a JPEG is decoded, edited and saved again, the encoder re-runs its quantisation step on data that has already been quantised once. Errors from the previous pass are treated as real detail and get their own new errors layered on top. This is called generation loss, and it accumulates in one direction only.

Saving an already-compressed JPEG at quality 90 does not restore anything — it just spends more bytes preserving the artefacts of the earlier pass. Saving repeatedly at a low quality is what produces the smeared, blotchy look of an image that has been through a dozen chat apps.

Two habits avoid it. First, always compress from the highest-quality original you have, not from a copy that has already been through a compressor. Second, decide on your output size once and do a single pass, rather than nudging the quality down repeatedly and re-saving each time. If you need to try several settings, run each of them against the original file.