# How Image Compression Actually Works

[Home](/)

[Guides](/#guides)

PixSquish Guides · Published July 2026 · Reviewed August 2026

![A printed image half covered by translucent mosaic tiles that pixelate the picture beneath](https://pixsquish.com/wp-content/themes/pixsquish/assets/img/article-compression.webp)

Every image tool has a quality slider, and almost nobody knows what it actually moves. Here is the mental model, minus the math.

## Lossless: same pixels, cleverer bookkeeping

Lossless compression (PNG, lossless WebP) is pure bookkeeping: instead of writing “blue, blue, blue” two hundred times, the file says “200× blue”. Decompressing restores every pixel exactly. The catch: photographs barely have runs of identical pixels — sensor noise makes neighbouring pixels slightly different — so lossless barely helps them. It shines on screenshots, flat design and text.

## Lossy: throw away what eyes ignore

Lossy compression (JPEG, WebP, AVIF) exploits two blind spots in human vision: we are bad at seeing **fine detail in busy textures**, and worse at seeing **color changes** than brightness changes. The encoder splits the image into blocks, converts them to frequencies, and rounds the high frequencies — fine detail — toward zero. Rounded-off zeros compress beautifully. That rounding is the “loss”: it never comes back.

## What the quality slider does

The slider sets how aggressive that rounding is. The relationship is not linear:

- **100 → 85:** file shrinks dramatically, differences are practically invisible.

- **85 → 70:** still fine for most photos; sharp-eyed viewers spot softness in detail.

- **Below ~60:** block edges and smudged “mosquito noise” around contours appear.

That is why **75–85 is the standard advice**: it sits right after the cliff where file size drops fastest, and right before artifacts become visible.

## When compression backfires

- **Re-compressing a compressed image** stacks rounding on rounding. Generation two looks fine; generation five looks like a fax. Keep an original.

- **Compressing tiny files** can make them bigger — container overhead outweighs savings.

- **Text and UI in lossy formats** grows fuzzy halos. Screenshots want PNG.

## Trust your eyes

Numbers lie about perception; pixels don’t. Our [compressor](/compress/) shows a live before/after slider of the exact output file — drag quality down until you see the difference, step back up one notch, done. Locally, in your browser, with nothing uploaded. Choosing the container to compress into? That’s the [format guide](/articles/webp-vs-avif-vs-jpeg/).

## Standards and references

- [JPEG standard, ITU-T T.81](https://www.w3.org/Graphics/JPEG/itu-t81.pdf)

- [PNG specification, third edition](https://www.w3.org/TR/png-3/)

- [WebP compression techniques](https://developers.google.com/speed/webp/docs/compression)