How Image Compression Works: JPEG DCT, PNG Deflate, and Modern Codecs

Every image you see on the web has been compressed. A raw photograph from a modern camera is 20-50 megabytes—far too large for web delivery. Compression algorithms shrink these files by 90% or more while preserving visual quality. But how do they actually work? Understanding the science behind image compression helps you make better decisions about formats, quality settings, and optimization strategies.

Two Categories of Compression

Lossless Compression

The original data can be perfectly reconstructed. Every single pixel is preserved exactly. File sizes are reduced by finding and eliminating redundancy—repeated patterns, predictable sequences. PNG, GIF, and WebP (lossless mode) use this approach.

Lossy Compression

Some data is permanently discarded to achieve much smaller files. The trick is throwing away information humans can't easily perceive. JPEG, WebP (lossy), and AVIF exploit limitations in human vision to remove data you'd never notice is missing.

JPEG Compression: DCT in Detail

JPEG uses the Discrete Cosine Transform (DCT), one of the most elegant algorithms in computer science. Here's the step-by-step process:

Step 1: Color Space Conversion

Convert RGB to YCbCr—separating brightness (Y) from color information (Cb, Cr). Human vision is far more sensitive to brightness changes than color changes, so we can compress color channels more aggressively.

Step 2: Chroma Subsampling

Reduce the resolution of color channels. The most common scheme (4:2:0) keeps brightness at full resolution but halves the color resolution in both dimensions—cutting color data by 75%. You rarely notice the difference because your eyes prioritize luminance detail.

Step 3: Block Splitting

Divide the image into 8×8 pixel blocks. Each block is processed independently. This is why JPEG artifacts appear as 8×8 squares at low quality.

Step 4: Discrete Cosine Transform

Each 8×8 block of pixel values is transformed into 8×8 frequency coefficients. The top-left coefficient represents the average brightness; coefficients further from the corner represent higher frequencies (finer detail). This doesn't compress anything yet—it just reorganizes the data.

8×8 pixel block → DCT → 8×8 frequency coefficients

[Low freq]  →  →  →  [High freq]
    ↓                      ↓
    ↓         64 coefficients
    ↓                      ↓
[High freq] →  →  → [Highest freq]

Step 5: Quantization (Where Compression Happens)

Divide each frequency coefficient by a corresponding value from a quantization table, then round to the nearest integer. High-frequency coefficients (fine detail) are divided by larger numbers, often rounding to zero. This is the lossy step—those zeroed-out high frequencies are gone forever.

The quality slider in image editors controls these quantization values. Quality 100 = minimal quantization (large file). Quality 10 = aggressive quantization (tiny file, visible artifacts).

Step 6: Entropy Coding

The quantized coefficients (now mostly zeros for high frequencies) are compressed with Huffman coding or arithmetic coding. Runs of zeros compress extremely well, which is why the DCT+quantization approach works so efficiently.

PNG Compression: Deflate Algorithm

PNG uses a completely different approach—lossless compression based on the Deflate algorithm (same as ZIP files).

Step 1: Filtering

Before compression, PNG applies a filter to each row of pixels. Instead of storing absolute pixel values, it stores the difference from a prediction. Five filter types are available:

• None: Raw pixel values
• Sub: Difference from left neighbor
• Up: Difference from above neighbor
• Average: Difference from average of left and above
• Paeth: Difference from Paeth predictor (closest of left, above, upper-left)

For smooth gradients, the Sub filter produces lots of zeros (each pixel is similar to its neighbor), which compresses beautifully.

Step 2: Deflate (LZ77 + Huffman)

The filtered data is compressed with Deflate, which combines two techniques:

• LZ77: Finds repeated byte sequences and replaces them with back-references ("copy 12 bytes from 340 positions ago")
• Huffman coding: Assigns shorter bit sequences to more common values

Why PNG Files Vary So Much in Size

PNG compression efficiency depends heavily on image content:

• Flat colors: Compress extremely well (lots of repetition)
• Gradients: Compress well with proper filtering
• Photographs: Compress poorly (too much unique detail)
• Random noise: Barely compresses at all

WebP: Hybrid Approach

WebP combines ideas from video compression (VP8 codec) with image-specific optimizations:

• Lossy WebP: Uses block prediction (similar to video inter-frame prediction) instead of DCT alone. Predicts each block from surrounding blocks, then compresses the residual. 25-35% smaller than JPEG at equivalent quality.
• Lossless WebP: Uses spatial prediction, color cache, and entropy coding. 26% smaller than PNG on average.

AVIF: Next-Generation Compression

Based on AV1 video codec, AVIF brings video-grade compression to still images:

• Flexible block sizes: 4×4 to 64×64 (vs JPEG's fixed 8×8)
• Directional prediction: 56 prediction modes adapt to edge directions
• Advanced transform: Multiple transform types (DCT, ADST, identity) selected per block
• In-loop filtering: Reduces artifacts before they accumulate
• Film grain synthesis: Removes grain before compression, re-adds on decode

The result: 50% smaller files than JPEG at the same perceived quality. The trade-off is dramatically slower encoding.

Comparison of Compression Approaches

Practical Quality Settings

JPEG Quality

• 95-100: Near-lossless. Large files. Only for archival.
• 80-90: Excellent quality. Small visible differences. Good default.
• 60-80: Good quality. Noticeable if compared side-by-side.
• 30-60: Visible artifacts. Thumbnails or previews only.

PNG Compression Level

PNG quality is always lossless—the compression level (1-9) only affects encoding speed vs file size. Level 6 is the best balance. Level 9 saves maybe 2-5% more but takes much longer.

WebP Quality

WebP quality 75-80 typically matches JPEG quality 85-90 visually, at 25-35% smaller file size. For lossless, use effort level 4-6 for the best speed/size trade-off.

Understanding Compression Artifacts

JPEG Artifacts

• Blocking: Visible 8×8 pixel grid at low quality
• Ringing: Halos around sharp edges (Gibbs phenomenon)
• Mosquito noise: Shimmering artifacts near high-contrast edges
• Color bleeding: Color smearing due to chroma subsampling

WebP/AVIF Artifacts

Modern codecs produce different artifacts—typically smoother blurring rather than blocky JPEG squares. At low quality, WebP can show smearing, while AVIF tends toward a watercolor-like softening.

Optimization Strategy

The best approach for web images in 2026:

1. Right-size first: Resize to display dimensions before compressing
2. Choose the right format: AVIF → WebP → JPEG, with fallbacks
3. Find the quality sweet spot: Usually 75-85 for lossy formats
4. Use responsive images: Serve different sizes for different screens
5. Lazy load: Only load images when they enter the viewport
6. Consider CDN optimization: Services like Cloudflare or Imgix auto-optimize

Compress Your Images

Want to see compression in action? Our free Image Compressor lets you compress images with adjustable quality settings, preview the results, and compare file sizes. See exactly how much you can save—all processing happens locally in your browser.