Skip to content
JFIF.IO
Image Compression

How Image Compression Works: Lossy vs Lossless Explained

From run-length encoding to discrete cosine transforms and AV1 prediction: a clear, non-mathematical tour of how image formats make pictures small.

By JFIF.IO TeamPublished 3 min read

How Image Compression Works: Lossy vs Lossless Explained

An uncompressed 12-megapixel photo takes 36 MB: three bytes (red, green, blue) for each of 12 million pixels. The same photo as a JPEG is typically 2–4 MB, as an AVIF well under 1 MB. How?

Every image format combines the same few ideas in different ways.

Two families

  • Lossless compression reproduces the original pixels exactly. It removes redundancy — information that can be predicted from what came before. PNG, GIF (for images with ≤256 colours), lossless WebP and lossless AVIF are lossless.
  • Lossy compression also removes irrelevance — detail people are unlikely to notice. JPEG, lossy WebP, AVIF and HEIC are lossy. The quality setting controls how aggressive this is.

Idea 1: prediction

Neighbouring pixels are usually similar. Instead of storing each pixel, store the difference from a prediction based on its neighbours. In smooth areas the differences are close to zero, and small numbers compress extremely well.

PNG applies one of five simple predictors to each row of pixels (called filters: None, Sub, Up, Average and Paeth). WebP and AVIF predict whole blocks from the edges of already decoded blocks, choosing from many directional modes.

Idea 2: entropy coding

Once the data is mostly small, repetitive numbers, an entropy coder stores frequent values with short codes and rare values with longer codes.

  • Huffman coding (JPEG, PNG’s DEFLATE) assigns each symbol a whole number of bits.
  • Arithmetic coding (WebP, AVIF, HEIC) can use fractions of a bit per symbol, which is more efficient.

Dictionary methods such as LZ77 (used in PNG’s DEFLATE) and LZW (GIF) additionally replace repeated sequences with references to earlier occurrences.

Idea 3: transform and quantise (lossy only)

Lossy codecs convert blocks of pixels into frequencies with a transform — the discrete cosine transform (DCT) in JPEG, a family of DCT-like and asymmetric transforms in WebP and AVIF. The result says “this block is mostly a smooth gradient, with a little fine detail”.

Then comes quantisation: each frequency coefficient is divided by a step size and rounded. Fine detail (high frequencies) gets large step sizes and often rounds to zero. This is the only step where information is truly thrown away, and the quality setting controls the step sizes.

Idea 4: colour subsampling (lossy only)

Human vision is much sharper for brightness than for colour. Lossy formats convert RGB to one brightness channel (Y) and two colour channels (Cb, Cr), then usually store the colour channels at half resolution in each direction (4:2:0). That alone halves the raw data before any other compression.

Putting it together

Format Prediction Transform Quantisation Entropy coding
PNG Row filters — — (lossless) DEFLATE (LZ77 + Huffman)
JPEG DC only 8×8 DCT Yes Huffman
WebP (lossy) Block prediction 4×4 DCT-like Yes Arithmetic
AVIF Rich intra prediction Several, up to 64×64 Yes Adaptive arithmetic

Newer formats are smaller mainly because they predict better, transform more flexibly and code more efficiently — then clean up artefacts with in-loop filters.

What this means in practice

  • Photos are full of fine, random detail: lossy formats win by a mile.
  • Graphics and text have flat areas and hard edges: lossless formats (or palette reduction) stay sharp and are often smaller.
  • Re-saving lossy files repeats quantisation and loses a bit more each time — edit in lossless formats and export once.
  • Metadata is not compressed image data at all; removing it is a free win.

To see the trade-offs yourself, run the same image through Compress Image and compare formats and quality settings — the exact sizes are shown for every result.