How Image Compression Actually Works (And Why Results Vary So Much)

Two images of identical dimensions, compressed at identical settings, can differ tenfold in output size. That is not a bug in the tool — it is a direct consequence of how compression works.

Lossless: finding redundancy

Lossless compression rewrites the data so it takes fewer bytes, with no information discarded. PNG does this in two stages: a filter step that stores each pixel as a difference from its neighbor, then DEFLATE compression on the result.

The filter step is why PNG excels at flat color. A row of 500 identical pixels becomes 500 zeros after filtering, and 500 zeros compress to almost nothing. A row of 500 slightly-different pixels from a photograph filters to 500 small-but-random values, which barely compress at all.

There is no quality setting because there is no quality loss. The only knob is how hard the encoder searches for patterns, which trades CPU time for a few percent of size.

Lossy: discarding what the eye misses

JPEG and WebP lossy mode work on perception rather than redundancy:

Convert RGB to luminance plus two color channels
Subsample the color channels — human vision resolves brightness detail far better than color detail, so color is often stored at half resolution
Split into 8x8 blocks and transform each into frequency components
Quantize — divide the high-frequency coefficients and round, throwing away fine detail
Losslessly compress what remains

The quality parameter controls step 4. Lower quality means coarser rounding, more coefficients collapsing to zero, smaller files, and eventually visible 8x8 blocking.

Why the ratio swings so wildly

Compression exploits similarity between neighboring pixels. So the output size tracks how much fine detail the image contains:

Screenshots and flat graphics — enormous uniform regions, compress dramatically
Portraits with soft backgrounds — smooth gradients, compress well
Foliage, gravel, fabric texture, film grain — high-frequency detail everywhere, compress poorly
Images already compressed once — the redundancy was removed on the first pass; re-encoding mostly adds artifacts rather than saving bytes

This is also why "compress to exactly 200 KB" requires trial and error: the encoder cannot know the resulting size without actually encoding, so tools binary-search the quality value.

Resolution beats quality

The single biggest win is usually not the quality slider — it is dimensions. Serving a 4000px-wide photo into a 800px-wide container wastes roughly 96% of the pixels. Halving both dimensions cuts pixel count to a quarter before compression even starts.

Order of operations that works:

Resize to the largest size you will actually display (times 2 for high-DPI screens)
Crop away content that carries no information
Then compress, and compare quality settings at 100% zoom

Browser-based vs server-side

Compressing in the browser uses the Canvas API and the browser's own encoder. Practical implications:

Privacy. The file never leaves the device. For client work, unreleased designs, or anything containing personal information, this matters more than a few percent of file size.

Metadata is dropped. Decoding to a canvas and re-encoding discards EXIF, including orientation and color profile. Usually desirable for web delivery, occasionally not — check that portrait photos did not rotate.

Encoder quality varies. Browser JPEG encoders are good but not as tuned as MozJPEG; browser WebP is solid. Expect within a few percent of a dedicated tool, not identical output.

Very large files are limited by memory. A canvas holds the full uncompressed bitmap — a 50-megapixel image needs roughly 200 MB of RAM. Tools cap dimensions for this reason.

Try it

Image Compressor — adjustable quality with a side-by-side original vs compressed preview and the exact size saved
Format Converter — sometimes changing format beats compressing harder
Image Cropper — remove pixels you do not need before compressing

Related reading: PNG vs JPEG vs WebP covers which format to compress into in the first place.