What Is JPEG Compression?
Created in 1992 by the Joint Photographic Experts Group (formalized as ISO/IEC 10918-1), JPEG was designed to solve a fundamental problem: uncompressed digital photographs are far too large for practical transmission and storage. A standard 24-bit 12-megapixel photograph requires over 36 megabytes of raw memory.
JPEG compresses photographic imagery by eliminating visual redundancies. Unlike lossless algorithms (like ZIP or PNG) that must reproduce every single bit identically, JPEG accepts slight, imperceptible data loss to achieve massive 80% to 95% reductions in file size.
The Five Stages of the JPEG Compression Pipeline
Every JPEG encoder processes pixel data through a sequential mathematical pipeline:
Stage 1: Color Space Transformation (RGB to YCbCr)
Computer screens display images in Red, Green, and Blue (RGB). JPEG first converts these channels into Y (Luminance or brightness), Cb (Blue-difference chrominance), and Cr (Red-difference chrominance). This separates structural brightness from color information.
Stage 2: Chroma Subsampling (4:2:0)
Because human eyes have far more rods (sensitive to luminance) than cones (sensitive to color), the encoder halves the spatial resolution of the Cb and Cr color channels horizontally and vertically. This instantly reduces the raw data load by 50% with almost no visible difference.
Stage 3: 8×8 Block Partitioning & Discrete Cosine Transform (DCT)
The image is divided into 8×8 pixel grids. For each block, a 2D Discrete Cosine Transform converts 64 spatial brightness values into 64 mathematical frequency coefficients. The top-left value (DC coefficient) represents overall block brightness, while the remaining 63 values (AC coefficients) represent increasingly fine details and edges.
Stage 4: Quantization (Where Loss Occurs)
This is the only truly lossy step in the JPEG process. Each of the 64 frequency coefficients is divided by a value from a predefined quantization table and rounded to the nearest integer. Because human vision cannot detect subtle high-frequency oscillations, high-frequency divisors are large, causing most fine coefficients to round cleanly to zero.
Stage 5: Zig-Zag Scanning & Huffman Entropy Coding
The quantized matrix is read in a diagonal zig-zag pattern, grouping the long strings of zeros together. Run-Length Encoding (RLE) followed by lossless Huffman coding replaces frequent symbols with short binary bit sequences, producing the final compact JPEG byte stream.
Modern Encoders: MozJPEG and Trellis Quantization
Standard JPEG algorithms round numbers in a rigid mathematical fashion. Modern encoders like MozJPEG (used inside CompressJPEG via WebAssembly) implement sophisticated optimization algorithms:
- • Trellis Quantization:Evaluates rate-distortion curves to decide whether rounding a coefficient up or down produces a smaller file without hurting perceptual quality.
- • Optimized Huffman Tables:Custom-calculates binary code lengths specifically for your individual image rather than relying on generic standard tables.
- • Progressive Scan Scripts:Arranges frequency bands so images render cleanly on mobile networks, saving up to 10%–15% more bytes than traditional encoders.
JPEG vs. WebP vs. AVIF: How They Compare
| Format | Compression Type | Compatibility | Best Used For |
|---|---|---|---|
| JPEG / JPG | Lossy (DCT) | 100% Universal (all devices) | Photography, online forms, email attachments, universal sharing |
| WebP | Lossy & Lossless (VP8) | 97%+ Modern browsers | Modern website publishing, web apps, transparent images |
| AVIF | Lossy & Lossless (AV1) | 93%+ Modern browsers | Maximum web compression where encode speed is not critical |