The short answer
- Resize first, compress second. A 4000 px photo shown at 400 px is wasting 99% of its pixels.
- Compress from the original every time. Re-saving an already-compressed JPEG stacks the damage.
- Match the format to the content — photos to JPG or WebP, screenshots and text to PNG.
Do those three things and you can usually cut 80–95% of the file size without a visible difference. Skip them and even gentle compression looks bad.
Why compressed images look bad
Two different things get blamed on "compression":
Quality loss is what the encoder does — it throws away fine detail your eye is unlikely to miss at normal viewing size. At quality 75–85 this is invisible for photographs. Below 60 it starts to show as blocky patches in flat areas and halos around edges.
Resolution loss is different: you kept the quality high but shrank the image, and now it is soft or pixelated when displayed large. This is not a compression problem, and no quality slider fixes it.
The mistake most people make is fixing the wrong one. If an image looks blurry, you need more pixels, not more quality. If it looks blocky, you need more quality, not more pixels.
Rule 1: Resize before you compress
This is the single biggest win, and it costs nothing in perceived quality. A photo straight from a phone is often 4000 × 3000. A blog post displays it at 800 px wide. Uploading the full size and compressing it to 100 KB means throwing away 97% of the data and still delivering a mushy result at that size.
Instead, cap the width first — 1600 px for a full-width hero, 800 px for an article image, 400 px for a thumbnail. The Image Resizer does this with locked proportions, so nothing stretches.
A 4000 px photo resized to 800 px and saved at quality 85 is often smaller than the same photo compressed to 100 KB at full size — and dramatically sharper.
Rule 2: Pick the format for the content
- Photographs → JPG, or WebP for websites. WebP is typically 25–35% smaller at the same quality.
- Screenshots, charts, text, logos → PNG. JPEG turns sharp edges into muddy halos, which is why text in a compressed JPEG is hard to read.
- Transparency → PNG or WebP. JPG has no alpha channel and will fill transparent areas with white.
- Photographs on a website → WebP beats JPG on every modern browser. Convert first, then compress if you still need to.
Converting format is not the same as compressing: PNG to WebP usually saves 25–30% with no quality setting at all.
Rule 3: Compress once, from the original
JPEG is lossy in a cumulative way. Open a JPEG, save it, open the saved copy, save again — each pass re-encodes the artefacts from the previous one. Three passes at quality 90 look worse than one pass at quality 70.
Keep one untouched original on your device. Every time you need a smaller version, start from that file, not from the last compressed output. This one habit prevents most "why does it look so bad" problems.
Rule 4: Target the size you actually need
"Compress this image" is not a goal. The goal is usually one of these:
- A form that rejects anything over 100 KB → compress to 100 KB
- A stricter portal at 50 KB → compress to 50 KB
- A document scan that must stay readable → compress to 200 KB
- An email attachment → compress to 500 KB
Compressing to a number higher than you need just wastes bandwidth; lower than you need destroys detail for no benefit. Pick the real limit.
How to check the result yourself
Do not judge from memory — compare side by side. Open the original and the compressed copy, put them next to each other at the size they will actually be displayed, and look at:
- Flat areas like skies and walls — that is where blocking appears first.
- Hard edges — text, windows, hair — where halos show.
- Gradients — banding is the earliest visible sign of over-compression.
If you cannot see a difference at 100% zoom on a normal screen, your audience cannot either.
When you should not compress
Compression is the wrong tool when the image is going to print, when it is an archival master, or when it will be edited again later. In those cases keep the original file and compress only the copy you are publishing. Storage is cheap; a lost original is not.