How to compress images without losing too much quality

Most people reach for the quality slider immediately, which is the third-best lever. Resizing to the size the image will actually be seen at, and picking a format that suits the content, both cost nothing visible — and either can beat any quality setting outright.

Only once those two are settled is a quality number a real trade rather than compensation for shipping the wrong file. If your constraint is a specific file size rather than a look, that is a different problem and worth reading first. The rest of this guide is about the quality number itself.

Lossy encoders discard fine detail before broad detail, so damage appears in a reliable sequence as you lower the number:

• Banding in smooth gradients. Skies, studio backdrops and soft shadows break into visible steps. Usually the first thing to go.
• Ringing at hard edges. A faint halo beside high-contrast boundaries — most obvious around text and thin graphics.
• Colour bleeding. Saturated reds and oranges smear slightly, because colour is stored at lower resolution than brightness.
• Blocking. The eight-pixel grid becomes visible across the whole frame. By this point everyone can see it.

Why that order happens is covered in how image compression works.

The JPG compressor starts at 75 and the WebP converter at 82, because WebP at a given number tends to hold detail a little better than JPG at the same number.

Compression difficulty is not about how “good” a photo is; it is about how much fine, unpredictable detail it contains and how much smooth gradient it has to keep clean.

• Gradients and clear skies — very little detail, so the encoder allocates few bits, and every one of them shows as a step.
• Night shots and deep shadows — noise in dark areas is expensive to encode and turns blotchy when it is not.
• Fine repeating texture — fabric weave, foliage, hair. Detail here is the first thing rounded away, and it turns to mush.
• Screenshots and text overlays — hard edges everywhere, which is the case lossy compression handles worst.

1. Keep the originals untouched, in their own folder.
2. Resize the copies to the largest dimension you will actually display or submit.
3. Compress the whole set with one setting, so the result is consistent rather than a range of qualities.
4. Check the worst two or three at full size. If they hold, ship; if not, step the quality up and re-run from the resized copies.

Both the JPG and PNG compressors run a whole folder at once and show the before and after size per file, so you can see where the saving came from rather than trusting a total.

When the target is a number, not a look

If a form insists on 200 KB, do not hunt for it by hand. The KB/MB reducer searches quality automatically and only falls back to downscaling when quality alone cannot get there — the approach is explained here.

• View at 100%, not zoomed in. Artefacts you can only find at 400% will never be seen by anyone.
• Look at the sky, or any large soft area, before you look at the subject. That is where banding shows first.
• Flip between the original and the compressed copy in the same position on screen. Side-by-side comparison hides differences that same-position flipping makes obvious.
• Check on a phone as well as a monitor if that is where it will be seen. Small and bright is a different test from large and dim.