How image compression works

The encoder first converts red, green and blue into a different set of three numbers: one for luma (brightness) and two for chroma (color).

This is not compression by itself — it is preparation. Human vision resolves brightness far more finely than color, so once the two are separated the encoder can treat them differently, and spend its bytes where they will be noticed.

With color on its own channels, the encoder can simply store fewer of them. In the standard 4:2:0 arrangement, each color sample covers a 2 × 2 block of pixels — a quarter of the color data for no visible cost on a photograph.

This is the first genuinely lossy step, and it is nearly free. The failure case is worth knowing: saturated colored text or a thin red line will smear and fringe, because there the color detail is the content.

The image is cut into 8 × 8 blocks, and each block is transformed into a set of coefficients describing how much of each wave pattern it contains — from a flat block of uniform color, through gentle gradients, up to fine alternating checkerboards.

This is the discrete cosine transform, and it is completely reversible. Nothing has been lost yet. What it achieves is a reordering of the information: after the transform, the handful of coefficients describing coarse patterns carry nearly all the visual weight, and the many describing fine detail carry very little.

Each coefficient is divided by a value from a quantization table and rounded to a whole number. Coarse patterns are divided by small numbers and survive. Fine patterns are divided by large numbers and round to zero.

That rounding is irreversible, and it is the entire lossy component of JPEG. Zeros cost almost nothing to store, so the more coefficients round to zero, the smaller the file.

The quality setting you choose does exactly one thing: it scales this table. Quality 90 divides gently and keeps most detail; quality 40 divides hard and discards most of it. The number is not a percentage of anything — it is an index into how aggressively this division is done.

What remains is a sparse list of small numbers with long runs of zeros. The encoder reads each block in a zig-zag order, which groups the zeros together, then applies entropy coding — Huffman coding in classic JPEG, arithmetic coding in newer formats — which gives short codes to common values and long codes to rare ones.

This final step is completely lossless. It contributes a substantial part of the size reduction and costs nothing in quality.

WebP and AVIF keep the same broad shape but replace the weakest part. Instead of describing every block independently, they predict each block from the pixels already decoded above and to its left, and encode only the difference between prediction and reality.

Because most of an image is highly predictable from its neighbors, those differences are small, and small numbers cost few bits. That single change is most of why WebP is roughly 25–35% smaller than JPEG at matched quality, and why AVIF goes further still.