How Image Compression Actually Works

You drag a quality slider from 100 to 80 and your image shrinks by 75%. But what actually happens to the pixels? Understanding how compression works helps you make smarter decisions about file size vs. visual quality — and explains why a screenshot compresses completely differently from a photograph.

How JPG compression works

JPG compression happens in four stages, each one designed to exploit a different weakness in human vision:

1. Color space conversion — The image is converted from RGB to YCbCr, separating brightness (Y) from color (Cb, Cr). Human eyes are far more sensitive to brightness changes than color changes, so the color channels can be stored at half resolution with almost no visible difference.
2. Block splitting — The image is divided into 8×8 pixel blocks. Each block is processed independently.
3. DCT (Discrete Cosine Transform) — Each 8×8 block is transformed from spatial data (pixel colors) into frequency data (how much of each “pattern” is present). Low frequencies represent gradual changes, high frequencies represent sharp edges and noise.
4. Quantization — This is where the actual lossy compression happens. High-frequency components are divided by large numbers, rounding them toward zero. The quality slider controls how aggressive this rounding is.

What the quality slider actually does:

Quality 100  →  Minimal quantization, near-lossless
Quality 80   →  High frequencies reduced ~60%, barely visible
Quality 60   →  Noticeable softness around sharp edges
Quality 30   →  Obvious blocking artifacts (8×8 grid visible)
Quality 10   →  Heavy distortion, abstract painting effect

Why screenshots compress differently than photos

JPG is optimized for continuous-tone images — photographs where adjacent pixels have similar colors. Screenshots are the opposite: large flat color areas with razor-sharp text edges.

The problem with sharp edges

When the DCT encounters a sudden jump from white to black (like the edge of a letter), it needs high-frequency components to represent that transition accurately. Quantization crushes those high frequencies, creating visible “ringing” artifacts around the edge — a halo of ghostly color that wasn't in the original.

This is why a screenshot saved as JPG at quality 85 can look noticeably worse than the same screenshot as PNG, despite being a larger file. PNG's lossless DEFLATE algorithm handles flat colors and sharp transitions perfectly.

How PNG compression works

PNG uses a two-step lossless process:

1. Filtering — Before compression, each row of pixels is passed through a filter that predicts pixel values based on neighbors. Instead of storing 200, 200, 200, 200, the filter stores 200, 0, 0, 0 (first value, then differences). Long runs of identical pixels produce long runs of zeros.
2. DEFLATE compression — The filtered data is compressed using the same algorithm behind ZIP files. It finds repeated byte patterns and replaces them with short references.

This is why screenshots with large solid backgrounds compress amazingly well in PNG — the filter step produces massive runs of zeros that DEFLATE squashes to almost nothing. Photographs have almost no repeated patterns after filtering, so PNG files for photos are enormous.

WebP and modern compression

WebP uses a more sophisticated version of block-based prediction. Instead of fixed 8×8 blocks like JPG, WebP uses variable-size blocks (4×4 up to 16×16) and can predict pixel values from neighboring blocks rather than encoding them directly. This produces 25–35% smaller files than JPG at equivalent visual quality.

AVIF takes this further by borrowing techniques from video compression (AV1), including larger block sizes, more prediction modes, and better entropy coding. The downside is encoding speed — creating an AVIF can be 10–20 times slower than creating a WebP.

Practical compression strategies

• Start at quality 80–85 for photographs. Only go higher if you notice visible artifacts in areas you care about.
• Never re-compress a JPG — Each save cycle adds more quantization error. Keep an original lossless copy and export from that.
• Use PNG for anything with text, sharp edges, or transparency. The file will be larger, but the quality will be perfect.
• Resize before compressing — A 4000×3000 photo compressed to quality 90 is always larger than the same photo resized to 1920×1080 at quality 85, and the smaller version looks identical on screen.

Compression is about understanding what information matters and what can be safely discarded. The best compression strategy is the one that matches your content type — not the one with the smallest number on the quality slider.