How Image Compression Works (Lossy vs Lossless)

2026-04-06·7 min read·✓ Tested 2026-04-06

Understanding how image compression works helps you make better decisions about formats, quality settings, and when to re-compress. Here's a clear explanation without the math.

Two Types of Compression

Lossless compression reduces file size without removing any data. Decompress the file and you get back the exact original. Used by PNG, GIF (for non-animated), and lossless WebP.

Lossy compression removes data that the human visual system is unlikely to notice. You can't get back the original — quality is permanently reduced. Used by JPEG, lossy WebP, AVIF.

How JPEG Compression Works

JPEG uses three key steps:

1. Color space conversion: Converts RGB to YCbCr (separating brightness from color). Human eyes are more sensitive to brightness than color, so color info gets compressed more.
2. DCT (Discrete Cosine Transform): Divides the image into 8×8 pixel blocks and transforms each into frequency components. Low-frequency info (smooth gradients) gets preserved; high-frequency info (fine detail) gets discarded.
3. Quantization: The quality setting controls how aggressively high-frequency components are discarded. Quality 80 = less discarded = bigger file. Quality 40 = more discarded = smaller file.

How PNG Compression Works

PNG is lossless. It uses two techniques:

1. Delta filters: Instead of storing each pixel's color, stores the difference from a neighboring pixel. Large areas of similar color produce very small differences.
2. DEFLATE compression: Like ZIP compression applied to the filtered pixel data. Finds repeating patterns and represents them efficiently.

Why You Shouldn't Re-Compress JPEG

Every time you save a JPEG, it loses more quality. If you compress a JPEG to 80% quality, then compress that output again to 80%, you get roughly 64% quality (0.8 × 0.8). Always start from the original uncompressed source.

What WebP Does Differently

WebP uses a more advanced prediction algorithm than JPEG. Instead of 8×8 DCT blocks, it uses variable block sizes (4×4 to 16×16) and predicts each block's values from neighboring blocks. This is more efficient, especially for images with large areas of similar color.

FAQ

What does the JPEG quality setting actually control?

The quality setting controls the quantization table — how aggressively high-frequency image detail is discarded. Quality 100 = almost no loss. Quality 60 = significant loss but visually acceptable.

Why do screenshots compress better as PNG than JPEG?

Screenshots have lots of large flat areas of exactly the same color (UI backgrounds, solid fills). JPEG's DCT algorithm creates blurry artifacts on these. PNG's delta filter + DEFLATE handles them perfectly.

Is WebP truly lossless?

WebP supports both modes. Lossy WebP uses a prediction-based algorithm similar to VP8 video compression. Lossless WebP uses spatial prediction and entropy coding to achieve true lossless compression.