The Complete Engineering Guide to Image Compression

An uncompressed 24-bit TrueColor image consists of three 8-bit bytes per pixel representing Red, Green, and Blue intensities. A single 4K image (3840 x 2160 pixels) contains approximately 8.29 million pixels, requiring 24.8 megabytes of raw memory before compression.

Digital image compression exploits two primary forms of redundancy: spatial redundancy (correlation between adjacent pixels) and psycho-visual redundancy (details the human eye cannot perceive).

Lossy image codecs achieve dramatic file size reduction through a multi-stage pipeline: Color Space Transformation (RGB to YCbCr), Chroma Subsampling (4:4:4 to 4:2:0), 2D Discrete Cosine Transform (DCT) or intra-frame directional prediction, Quantization, and Entropy Coding (Huffman or Arithmetic).

Quantization is the lossy step: high-frequency coefficients representing minute color transitions are divided by large quantization matrix factors and rounded to zero, resulting in long runs of zeros that compress tightly with run-length encoding.

Lossless compression (used in PNG and Lossless WebP) guarantees 100% mathematical fidelity. Algorithms like DEFLATE combine LZ77 sliding window dictionary substitution with canonical Huffman encoding.

Before compression, PNG scanlines are passed through predictive filters (None, Sub, Up, Average, Paeth) that subtract adjacent byte values. This transforms raw image bytes into small difference deltas that cluster near zero, drastically improving entropy compression ratios.

Optimizing images directly impacts Google Core Web Vitals, specifically Largest Contentful Paint (LCP). Large uncompressed hero images are the #1 cause of failing LCP scores.

Deploying modern next-gen formats (WebP and AVIF), pre-sizing images with responsive srcset attributes, and setting explicit width and height attributes to avoid Cumulative Layout Shift (CLS) are essential best practices.