How Image Compression Works

Why image compression matters

Images are typically the largest assets on a web page. A single uncompressed 4K photo from a modern camera can be 20–30 MB. Compressed for the web, that same image might be 200–500 KB — a 50–100× reduction — with no visible quality difference to most viewers.

Smaller images mean faster page loads, lower bandwidth costs, and better Core Web Vitals scores (particularly Largest Contentful Paint). For mobile users on slow connections, well-compressed images are the single highest-impact optimization you can make.

Lossy vs lossless compression

All image compression falls into one of two categories:

How JPEG compression works

JPEG uses a multi-step process that exploits how human vision works:

1. 1. Color space conversion — converts RGB to YCbCr, separating brightness (Y) from color (Cb, Cr). Human eyes are more sensitive to brightness detail than color detail.
2. 2. Chroma subsampling — reduces the resolution of the color channels (Cb, Cr) while keeping the full brightness resolution. This alone cuts file size significantly with minimal perceived quality loss.
3. 3. Discrete Cosine Transform (DCT) — divides the image into 8×8 pixel blocks and converts each block into frequency components. High-frequency detail (sharp edges, fine texture) gets discarded.
4. 4. Quantization — the "quality" setting. Lower quality = more aggressive quantization = smaller file = more visible artifacts (blocky edges, color banding).
5. 5. Huffman coding — lossless compression of the quantized data as the final step.

JPEG quality settings are typically 0–100, but the useful range is 60–85 for web use. Quality 85 is nearly indistinguishable from the original at about 1/5 the file size. Quality below 50 produces visible artifacts.

How PNG compression works

PNG uses lossless compression in two stages:

First, a filter transforms each row of pixels to make them more compressible (e.g., storing the difference between adjacent pixels rather than absolute values — differences tend to be small numbers, which compress well).

Then DEFLATE (the same algorithm used in ZIP files) compresses the filtered data. PNG compression levels (0–9) only affect how hard the DEFLATE algorithm works — they don't lose data. Level 9 takes longer but produces the same or slightly smaller file than level 6.

WebP — the modern alternative

WebP (developed by Google, based on VP8 video compression) supports both lossy and lossless modes and typically outperforms JPEG and PNG:

Which format to use

Frequently asked questions

Does compressing an image reduce its dimensions?

No — compression and resizing are separate operations. Compression reduces file size by encoding the same pixels more efficiently (or discarding detail). Resizing changes the actual pixel dimensions. For web use, both matter: resize to the largest display size you need, then compress.

What quality setting should I use for web images?

For JPEG: 80–85 is the sweet spot — hard to distinguish from 100 but about 5× smaller. For lossy WebP: 75–85. For thumbnails or background images where fine detail doesn't matter: 60–70. Avoid going below 60; the visible artifacts aren't worth the savings.

What happens if I compress a JPEG again?

Each re-compression cycle applies quantization again to already-quantized data, compounding the artifacts. A JPEG at quality 90, re-saved at quality 90, is worse than the original at 80. Always keep your original uncompressed source file and derive compressed versions from it — never work from a previously compressed file.