The Complete Guide to Modern Image Compression: WebP, AVIF, and MozJPEG Compared

1. The Mathematical Foundation: Lossy vs Lossless

Every raster image is fundamentally a discrete 2D matrix of pixel coordinates, where each pixel is defined by colour channels (typically Red, Green, and Blue, with an optional Alpha transparency channel). In uncompressed 24-bit TrueColor format, a single 4K image (3840 × 2160 pixels) consumes:

3840 * 2160 * 3 bytes = 24,883,200 bytes ≈ 24.88 MB

Serving multi-megabyte uncompressed images over HTTP/2 or HTTP/3 results in catastrophic network latency and mobile data depletion. Image compression algorithms bridge this gap using two distinct paradigms:

• Lossless Compression (PNG, Lossless WebP): Exploits statistical redundancy without modifying a single pixel value. Algorithms like DEFLATE (LZ77 + Huffman coding) identify repeated byte sequences and replace them with shorter bit tokens. Perfect for vector exports, charts, line art, and typography.
• Lossy Compression (JPEG, WebP, AVIF): Exploits psychoacoustic and psychovisual limits of the human eye. By permanently discarding high-frequency spatial color information that our visual cortex cannot distinguish, file size reductions of 80% to 95% are achieved with virtually zero perceived degradation.

2. Discrete Cosine Transform (DCT) & Quantization

At the core of classical JPEG and modern video codecs lies the Discrete Cosine Transform (DCT). An image channel is partitioned into 8×8 pixel blocks. The DCT transforms these 64 spatial intensity values into 64 frequency domain coefficients:

The top-left coefficient represents the DC component (the average luminance/color of the entire 8×8 block), while the remaining 63 are AC components representing increasingly rapid spatial oscillations (fine textures, high-contrast edges, noise).

3. Chroma Subsampling and Human Visual Perception

The human retina contains approximately 120 million rod cells (sensitive to luminance/brightness) and only 6 to 7 million cone cells (sensitive to color/chrominance). Image codecs leverage this by transforming RGB into the YCbCr color space:

• Y: Luma (Luminance / Brightness component)
• Cb: Blue-difference chroma
• Cr: Red-difference chroma

By applying 4:2:0 Chroma Subsampling, horizontal and vertical color resolution is halved, immediately shedding 50% of raw data before any mathematical compression even begins. In photographic imagery, this reduction is virtually imperceptible to human observers.

4. WebP vs AVIF vs MozJPEG: Architecture Deep Dive

5. Real-World Compression & Quality Benchmarks

When evaluated using Structural Similarity Index Measure (SSIM) and Peak Signal-to-Noise Ratio (PSNR), modern AVIF consistently achieves perceptual parity with standard JPEG at less than half the file footprint. For an average e-commerce product photograph:

• Original High-Res PNG: 4.2 MB
• Standard JPEG (Quality 85): 420 KB
• MozJPEG (Quality 80): 310 KB
• WebP (Quality 80): 245 KB
• AVIF (Quality 70): 140 KB

6. Client-Side Browser Compression with Canvas & Wasm

With modern HTML5 Canvas APIs, you do not need to send private images to remote servers for compression. The browser can decode any image to a raw bitmap and re-encode it directly on the client's GPU:

async function compressImageInBrowser(file, quality = 0.85, format = 'image/webp') {
  const bitmap = await createImageBitmap(file);
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0);
  const blob = await canvas.convertToBlob({ type: format, quality: quality });
  return blob;
}

This client-side zero-upload workflow ensures absolute user privacy, zero server processing costs, and near-instantaneous bulk processing speeds.