Compression7 min read

How Image Compression Works

A plain-language explanation of lossless and lossy compression, and why the same settings behave differently on different pictures.

An uncompressed image is a simple list of colour values, one per pixel. A 4000 by 3000 photo with three bytes per pixel is 36 MB of raw data. Compression is the work of describing that same picture in far fewer bytes.

Lossless compression: finding repetition

Lossless methods store the same information more efficiently. If a row contains four hundred identical white pixels, writing 'white, four hundred times' is shorter than listing them. PNG combines a prediction step, where each pixel is described relative to its neighbours, with general-purpose DEFLATE compression over the result.

Because nothing is discarded, decompressing returns the original exactly. The limit is that photographs contain very little exact repetition, so lossless gains on them are modest.

Lossy compression: discarding what you will not miss

Lossy methods exploit the limits of human vision. Your eye is far more sensitive to brightness than to colour, and far better at seeing large shapes than fine high-frequency detail.

JPEG applies a discrete cosine transform to 8 by 8 blocks, turning pixel values into a set of frequency coefficients. The quality setting decides how coarsely those coefficients are rounded. Coarse rounding turns many of them into zeros, and long runs of zeros compress into almost nothing. It also usually stores colour information at half resolution, a trick called chroma subsampling.

Why artifacts look the way they do

Push the quality down and the 8 by 8 grid becomes visible as blocking. Sharp edges pick up faint echoes, called ringing, because a hard transition needs the high-frequency detail that was just discarded. Smooth gradients turn into visible steps when too few distinct values remain to describe them.

What modern formats changed

WebP and AVIF replace fixed independent blocks with prediction: a block is guessed from its already-decoded neighbours, and only the error is stored. Because most of an image resembles the part next to it, the errors are small and cheap to encode. Block sizes also adapt, so flat areas use large blocks and detailed areas use small ones.

The practical takeaway

Compression settings are not universal. A noisy texture and a flat illustration at quality 70 will produce completely different results, because the encoder is exploiting properties of the content itself. Always judge by looking at the actual output rather than trusting a number.

Try the tools

Everything described in this article can be done here in your browser, free of charge and without uploading files to a server.

Keep reading