Image Compression Explained: Lossy vs Lossless, How It Works

Updated June 2026 · 7 min read

I spent a weekend in 2025 trying to understand why WebP files were so much smaller than JPEGs. I ended up reading the WebP spec, the JPEG whitepaper from 1992, and half a dozen signal processing articles. Here's what I learned, in terms that don't require an EE degree.

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.

What I Actually Use

For the WebP2PNG converter itself, I use WebP at quality 80 for everything. It's the sweet spot I found after compressing the same 50 test images at every quality level from 10 to 100 — files are 70-85% smaller than the original JPEG, and I can't tell the difference in a blind comparison. For the blog screenshots, I use PNG because text compression artifacts are genuinely distracting. For anything I'm archiving long-term, I keep the original format — compression is lossy by definition, and disk space is cheaper than re-shooting a photo.

Written by Alex Chen — Frontend Engineer. building web apps for 10+ years. Built WebP2PNG when tired of converters that upload your files. More about me →