A standard 24-megapixel photograph taken on an iPhone or Sony mirrorless camera measures 6,000×4,000 pixels. At 3 bytes per pixel (Red, Green, Blue), that uncompressed raw image data requires 72 Megabytes of storage for a single frame.
Yet when exported as a JPEG or WebP, that file shrinks to a mere 3.5 Megabytes—a 95% reduction—while looking virtually identical to the naked eye. How does this mathematical sorcery work? In this deep dive, we walk through the four stages of modern perceptual compression.
🗜️ Compress Images 100% In-Browser
Crate Compress Image optimizes JPG, PNG, and WebP files using native canvas algorithms. Inspect live side-by-side before/after sliders with zero cloud uploads.
Compress Images Now→Stage 1: Exploiting Biology (YCbCr & Chroma Subsampling)
Human eyes contain roughly 120 million rod cells (which detect lightness and contrast) but only 6 million cone cells (which perceive color). In other words, humans are 20 times more sensitive to brightness than to color.
Compression encoders convert RGB pixels into YCbCr:
- Y (Luma): Pure greyscale brightness information (kept at 100% full resolution).
- Cb / Cr (Chroma): Blue-difference and red-difference color channels.
In standard 4:2:0 chroma subsampling, the encoder discards 75% of the color samples, averaging color across 2×2 pixel blocks. Your brain never even notices the missing color data.
Stage 2: Discrete Cosine Transform (DCT)
Next, the image is sliced into 8×8 pixel blocks. The Discrete Cosine Transform (DCT) converts these spatial pixel values into frequency domain coefficients.
Instead of storing 64 individual color values, DCT breaks the block down into a sum of basic mathematical sine/cosine waves: low frequencies represent smooth gradual color washes (like sky), while high frequencies represent sharp tiny edges (like grass blades).
Stage 3: Quantization (Where the Magic Happens)
Quantization is the only “lossy” step in the entire pipeline. The encoder divides high-frequency coefficients by a quality scale table and rounds them to the nearest whole integer.
Tiny high-frequency color variations that human eyes cannot perceive get rounded down to pure zeroes. At quality 85%, over 80% of the numbers in an 8×8 block become identical strings of zeroes.
Stage 4: Huffman Entropy Coding
Finally, the strings of zeroes are arranged in a zig-zag scan pattern and compressed using lossless Huffman Coding and run-length encoding (RLE). Frequent patterns are assigned tiny 2-bit symbols, while rare patterns get longer symbols, producing an ultra-compact binary file that downloads in milliseconds.