Image Compression Explained: Lossy vs Lossless, How It Works

Updated June 2026 · 7 min read

Every photo you see on the web is compressed. Without compression, a single 12-megapixel photo would be 36 megabytes — one photo per email attachment limit. Compression shrinks that to 2-5MB (or less) while keeping it visually nearly identical. How? Let's look under the hood.

Lossless vs Lossy: The Fundamental Tradeoff

How Lossless Compression Works

Think of lossless compression like shorthand. Instead of writing "blue pixel, blue pixel, blue pixel, blue pixel" (4 data points), you write "4× blue pixel" (2 data points). This is called run-length encoding, and it's the simplest form of lossless compression.

PNG uses a more sophisticated algorithm called DEFLATE, which combines two techniques:

1. LZ77: Finds repeated sequences and replaces them with back-references ("this 50-byte block is identical to one 200 bytes ago")
2. Huffman coding: Assigns shorter codes to frequently-appearing values and longer codes to rare ones (like Morse code: 'e' = dot, 'q' = dash-dash-dot-dash)

The result: PNG files are typically 20-40% smaller than uncompressed, and every single pixel is mathematically identical to the original.

How Lossy Compression Works

Lossy compression goes further by exploiting human visual perception. Your eyes are more sensitive to brightness changes than color changes, and more sensitive to large-scale patterns than fine texture. JPEG exploits this brilliantly:

Step 1: Color Space Conversion

JPEG converts RGB to YCbCr (luminance + two color channels), then typically downsamples the color channels by 2x or 4x. Your eye barely notices because brightness carries most of the detail perception.

Step 2: Discrete Cosine Transform (DCT)

The image is divided into 8×8 pixel blocks. Each block is transformed from the spatial domain (pixel positions) to the frequency domain using DCT — the same math behind MP3 audio compression. The result is a matrix where the top-left values represent broad color changes and the bottom-right represents fine texture.

Step 3: Quantization (Where Data Is Actually Lost)

The frequency values are divided by a quantization table and rounded to integers. High-frequency (fine detail) values often round to zero. This is the only lossy step — and the quality slider in every JPEG compressor controls exactly how aggressively this division happens.

Step 4: Entropy Coding

The resulting sparse matrix (lots of zeros) is then compressed losslessly using Huffman coding, similar to PNG's final step.

Why WebP and AVIF Are Smaller Than JPEG

JPEG's DCT-based approach was invented in 1992. Modern formats use techniques from video codecs:

• WebP uses predictive coding: instead of encoding each block independently, it predicts what a block should look like based on neighboring blocks, then only stores the difference (the "prediction residual"). This is far more efficient than JPEG's independent-block approach.
• AVIF goes further with intra-prediction: it can predict pixel values from 33 different directional modes, choosing whichever produces the smallest residual for each block.

The result: WebP images are 25-35% smaller than equivalent-quality JPEGs. AVIF images are 50% smaller. The tradeoff is encoding speed — WebP takes 2-3x longer to encode than JPEG, and AVIF takes 5-10x longer.

The Bottom Line

For websites, use WebP or AVIF — they produce dramatically smaller files at equivalent quality. For sharing and archiving, JPEG at 80-90% quality remains the universal standard. For screenshots and images with text, use PNG (lossless). The "right" format depends entirely on what you're optimizing for: file size, compatibility, or pixel-perfect accuracy.