How image compression works

Published September 7, 2026

Why an uncompressed image is huge

An image is a grid of pixels, and each pixel stores a colour as numbers — typically 3 bytes for red, green and blue. A 4000 x 3000 photo is 12 million pixels, so the raw data is about 36MB before anything clever happens. Compression is what turns that into a file you can actually send.

Lossless compression: smaller, pixel for pixel identical

Lossless methods find patterns and repetition and describe them compactly. Instead of storing '200 blue pixels in a row' as 200 separate values, it stores 'blue, 200 times'. When you open the file, the original is reconstructed exactly.

• PNG is the common lossless format. Great for flat graphics, screenshots of text and logos, where long runs of identical colour compress well.
• It struggles with photos, because photographic detail has few exact repeats, so there is little to pack.
• You can save and re-save a PNG forever without it degrading.

Lossy compression: smaller by leaving things out

Lossy formats like JPG and WebP exploit the limits of human vision. We notice changes in brightness far more than fine changes in colour, and we rarely notice small variations across a smooth area. So the encoder:

1. 1Breaks the image into small blocks.
2. 2Describes each block as a combination of simple patterns, from broad gradients to fine texture.
3. 3Keeps the patterns your eye relies on and throws away the subtle ones, especially in colour.
4. 4Stores what remains, which is now far smaller.

The discarded detail is gone for good. That is the trade: dramatically smaller files in exchange for detail that is, at normal viewing sizes, usually invisible.

What the quality slider actually does

The quality setting (0 to 100, or 0 to 1) tells the encoder how much to keep. Higher quality keeps more of the fine patterns and produces a bigger file; lower quality keeps fewer and produces a smaller one.

95-100

Near-transparent quality, large files. Rarely worth it for web use.

80-90

The practical range. Clean to the eye, files a fraction of the size.

60-75

Visible softening on close inspection, still fine for small or fast-scrolling images.

Below 50

Blocky patches and colour banding start to show.

Generation loss: why you should compress once

Every time you open a JPG and save it again as a JPG, it is re-compressed, and the artefacts from the previous save get baked in and compressed again. After several rounds the image visibly deteriorates. Keep a lossless master if you can, and always compress from the highest-quality copy you have — not from one you already compressed.

Rules of thumb

• Photos and anything with gradients: lossy (JPG or WebP), quality around 80-85%.
• Flat graphics, logos, screenshots of text: lossless (PNG).
• Need it as small as possible for the web and you control the display: WebP.
• Compress from the original, once. Do not stack lossy saves.
• Resize to the size you actually need before compressing — fewer pixels is the biggest saving of all.