Most images on the web are several times larger than they need to be. Compressing them is the single easiest performance win available, and the amount you can remove before anyone notices is larger than people expect.
Compression exploits the limits of your eyes
Human vision is far more sensitive to changes in brightness than to changes in colour. JPEG encoding uses that directly: it stores brightness at full detail and colour at reduced detail, a step called chroma subsampling. You rarely notice, because your eyes were never going to resolve that colour detail anyway.
It then splits the image into 8x8 pixel blocks and describes each block as a combination of patterns, from smooth gradients to fine detail. The quality setting decides how many of the fine-detail patterns to discard. At high quality it drops almost nothing; at low quality it keeps only the coarsest shapes, which is why heavily compressed images look blocky.
Where the useful range sits
- 90-100%: near-perfect, but files are large and the visual gain over 80% is minimal.
- 75-85%: the sweet spot for photographs. Usually indistinguishable from the original at normal viewing size, often a quarter of the file size.
- 60-75%: acceptable for thumbnails and background images where detail is not the point.
- Below 60%: visible blocking and smeared edges. Only for deliberate effect or very small images.
There is no universally correct number, because it depends on the picture. A photograph of foliage hides artefacts well. A clear blue sky shows banding quickly. A screenshot full of text shows damage almost immediately.
What compresses badly
The blocks-and-patterns approach struggles with sharp edges. Around text, logos and line art, JPEG produces faint shimmering known as ringing or mosquito noise. If your image is mostly text or flat colour, JPEG is the wrong format and no quality setting fixes it. Use PNG or lossless WebP instead.
Generation loss is real and permanent
Lossy compression is not reversible. Saving a JPEG at 80%, opening it, and saving again at 80% does not keep it at 80% quality: it applies the loss twice. Repeat that a few times and the image visibly degrades, which is why images passed around messaging apps end up looking washed out.
The rule that follows is simple and worth taking seriously: always keep the original. Compress a copy for the web, and go back to the original whenever you need a different size or format.
Resize before you compress
This saves more than any quality setting. A 4000-pixel-wide photo displayed in a 800-pixel-wide column is carrying five times more pixels than the page can show. Resizing to roughly twice the display width, which covers high-density screens, then compressing, typically cuts the file by an order of magnitude with no visible change at all.
A workflow that holds up
- Start from the highest-quality original you have.
- Resize to about twice the width it will actually be displayed at.
- Compress at 80% and look at the result at full size.
- If a specific area looks wrong, such as sky or text, raise the quality rather than accepting it.
- Archive the original somewhere; export the compressed copy for use.