How image compression works: lossy, lossless, and the quality slider

Compression is the art of storing the same picture in fewer bytes. There are two fundamentally different ways of doing it, and mixing them up is where most confusion begins.

Lossless: nothing is thrown away

Lossless compression finds redundancy and encodes it more efficiently. PNG, for example, predicts each pixel from the ones above and to the left, stores only the difference, and then runs DEFLATE over the result. Decode it and you get back the exact original pixel values, bit for bit.

The catch is that the amount of redundancy in a photograph is small. A gradient sky has no repeated runs and poor prediction accuracy, so lossless compression can only do so much. Typical savings on photographic content are modest, often 10–30%.

Lossless shines on synthetic images: screenshots, diagrams, logos, anything with large uniform regions.

Lossy: throw away what you will not miss

Lossy compression exploits the limits of human vision. JPEG's approach, still the clearest example:

1. Convert colour space. Separate brightness (luma) from colour (chroma), because the eye is much more sensitive to the former.
2. Subsample chroma. Typically store colour at half resolution in each direction, a 75% reduction in colour data that is nearly invisible on photographic content.
3. Transform in 8×8 blocks. Each block is converted from pixel values into frequency coefficients: a few coefficients describe the broad tone of the block, many describe fine detail.
4. Quantise. Divide those coefficients by a table of numbers and round. Fine-detail coefficients get divided by larger numbers, so most of them round to zero. This is the lossy step, and this is what the quality slider controls.
5. Entropy-code the remaining values losslessly.

What the quality number really means

The quality slider scales the quantisation table. Lower quality means larger divisors, means more coefficients rounded to zero, means fewer bytes and less detail.

It is not a percentage of anything, and, this trips people up constantly, it is not comparable between encoders. Quality 80 in one library does not mean quality 80 in another. Different software uses different tables.

What is broadly true across encoders:

• 90–100: near-transparent quality, files much larger than necessary. Worth it for a master copy, wasteful for the web.
• 75–85: the practical sweet spot. Most people cannot see the difference from the original at normal viewing size, and the file is a fraction of the size.
• 60–75: visible on close inspection, fine for thumbnails and secondary images.
• Below 50: blocking and colour banding become obvious, particularly in smooth gradients like skies and skin.

If you need one number: 80. Then check the result on the content you actually have, a photo with fine texture tolerates more compression than one with large smooth areas, where banding shows up first.

Generation loss is real

Every lossy save re-runs quantisation on data that has already been quantised. The errors compound. Open a JPEG, crop it, save it, open it again, adjust it, save it again, after a few rounds you get visible blocking that no amount of care recovers.

Practical rules:

• Keep an untouched original. Edit from it every time, rather than from your last export.
• Do all your edits, then compress once at the end. Never compress as an intermediate step.
• Never re-compress a file someone sent you if you can ask for the original.

Lossless formats do not have this problem. You can open and re-save a PNG a thousand times with no degradation.

Where the bytes actually go

For most photographs, size is dominated by resolution before it is dominated by quality. A 4000×3000 image at quality 60 will usually be larger and look worse than the same image resized to 1600×1200 at quality 85.

The general order of operations for getting a file small:

1. Resize to the dimensions you will actually display. This is the biggest lever by a wide margin.
2. Choose the right format for the content type.
3. Then set quality, starting around 80 and checking the result.
4. Strip metadata if you do not need it, EXIF blocks can carry hundreds of kilobytes of embedded thumbnails and colour profiles.

Compressing without uploading

Canvas encoding in the browser handles all of this natively, JPEG, PNG and WebP encoding are built into every modern browser. NextTool's image compressor uses exactly that, so a folder of family photos or unreleased product shots is processed on your machine and never transmitted.

For a batch, bulk resizing before compressing usually gets you further than any quality setting alone.