How Image Compression Actually Works: Lossless PNG, JPEG Quantization Tables, and Modern WebP/AVIF Encoding

Why Image Optimization Determines Core Web Vitals

Images account for over 55% of the total byte weight on the average modern web page. For publishers and web applications, unoptimized hero banners, screenshots, and product graphics are the primary culprit behind failed Largest Contentful Paint (LCP) scores and high bounce rates.

To reduce bandwidth without noticeably degrading visual quality, web developers rely on two fundamentally different mathematical paradigms: lossless compression and lossy compression.

Lossless Compression: Preserving Exact Bit-for-Bit Pixel Data

Lossless compression guarantees that when an image is decoded, every single $(R, G, B, A)$ pixel value is mathematically identical to the original raw bitmap. Formats like PNG and lossless WebP achieve this through a two-stage pipeline:

1. Spatial Predictor Filtering

Before compressing raw pixel values, PNG applies one of five byte filters (None, Sub, Up, Average, or Paeth) to every scanline. Instead of recording raw RGB values, the filter calculates the difference (delta) between adjacent pixels. Because neighboring pixels in photographs and graphics usually have similar colors, filtering replaces large numbers with strings of small numbers and zeros.

2. Deflate (LZ77 + Huffman Entropy Coding)

The delta-encoded pixel stream is then compressed using the Deflate algorithm (the same engine powering ZIP and GZIP archives). LZ77 detects repeated sequences of byte patterns, and Huffman coding assigns shorter bit-lengths to frequently occurring values.

Lossless compression is ideal for:

Logos, line art, and typography with sharp edges.
Transparent PNG graphics where smooth alpha blending is essential.
Screenshots of software code and user interfaces.

Lossy Compression: Exploiting Human Visual Perception

While lossless compression typically reduces file sizes by 15% to 40%, lossy compression can achieve 70% to 90% reductions with virtually no visible difference to the human eye. It achieves this by discarding high-frequency visual information that the human ocular system cannot easily perceive.

The JPEG Discrete Cosine Transform (DCT) Pipeline

Color Space Transformation ($RGB \to YCbCr$): The image is split into Luminance ($Y$, brightness) and Chrominance ($Cb, Cr$, color channels). Because human eyes are far more sensitive to variations in brightness than color, the color channels are downsampled (Chroma Subsampling $4:2:0$).
$8 \times 8$ Block Partitioning: The image is divided into small $8 \times 8$ pixel grids.
Discrete Cosine Transform (DCT): Each grid is transformed from the spatial domain into the frequency domain, separating smooth gradient baselines from sharp, high-frequency transitions.
Quantization: High-frequency coefficients are divided by values from a Quantization Table and rounded to the nearest integer. This step permanently zeroes out subtle noise, enabling dramatic file size reduction.
Run-Length & Huffman Encoding: The quantized matrix is scanned in a zig-zag order and packed into the final JPEG stream.

The Next-Gen Advantage: WebP and AVIF

Modern web architectures have largely superseded legacy JPEG and PNG with WebP and AVIF:

Feature / Metric	JPEG	PNG	WebP	AVIF
Compression Mode	Lossy only	Lossless only	Lossy & Lossless	Lossy & Lossless
Alpha Transparency	No	Yes	Yes (both modes)	Yes
Animation Support	No	No (APNG separate)	Yes	Yes
Average Size vs. JPEG	Baseline (100%)	Often larger for photos	25% to 35% smaller	50% smaller
Browser Compatibility	100%	100%	98.5% (Universal)	93% (Modern engines)

How WebP Compresses More Efficiently

WebP is based on the VP8 video keyframe codec. Instead of static $8 \times 8$ DCT blocks, WebP predicts macroblock colors from surrounding pixels (intra-prediction) and encodes only the residual difference. This prevents the harsh blocky artifacts characteristic of low-quality JPEGs.

Best Practices for Web Optimization

Serve Responsive Dimensions: Never serve a $4000 \times 3000\text{ px}$ image into an element rendered at $400 \times 300\text{ px}$. Downscale image dimensions before compression.
Target 80% to 85% Quality: The perceptual difference between 85% and 100% quality is nearly imperceptible to human eyes, yet 100% quality produces a file 3 to 5 times larger.
Use In-Browser Processing for Privacy: Uploading personal photographs, identification documents, or proprietary graphic assets to third-party web servers introduces data leak risks.

Try Mega Toolskit's Image Compressor to optimize PNG, JPEG, and WebP files to strict target sizes directly in your browser with zero server uploads.