Most images on the web are several times larger than they need to be. Not because the picture is detailed, but because it is stored inefficiently. Compression is mostly about removing that waste. Done properly, nobody can tell you did it.
The two kinds of compression
Lossless compression rewrites the file so it stores the same pixels in fewer bytes. Nothing is discarded. PNG and WebP both support it. Typical saving is 10–30%.
Lossy compression throws away detail your eye is bad at noticing — mostly fine colour variation, which human vision resolves far less precisely than brightness. JPEG and WebP do this. Typical saving is 60–90%.
The phrase "without losing quality" almost always means "lossy compression tuned so the loss is invisible", not "lossless". At sensible settings the difference is genuinely undetectable at normal viewing size.
Pick a quality level, not a file size
The single most useful number is the quality setting, usually 1–100. It is not a percentage of anything, and it is not linear.
| Quality | What it is for | Rough size vs original |
|---|---|---|
| 90–100 | Archival, print, further editing | 60–90% |
| 80–85 | Web images. The sweet spot. | 15–30% |
| 70–80 | Thumbnails, dense grids | 10–18% |
| Below 60 | Visible artefacts. Avoid. | 5–10% |
Going from 100 to 85 usually removes over half the file and is invisible. Going from 85 to 70 removes much less and starts to show. Diminishing returns arrive quickly, which is why 80–85 is the default worth reaching for.
Resize first, then compress
This is the step people skip, and it matters more than the quality slider. A 4000 px wide photo displayed in a 800 px column is carrying 25× the pixels it can ever show. No compression setting fixes that; you are compressing detail that will never reach a screen.
Decide the largest size the image will actually be displayed at, double it for high-density screens, and resize to that before compressing. A 1600 px wide image at quality 85 will beat a 4000 px image at quality 60 on both file size and appearance.
Choose the right format
- JPEG — photographs, and anything with smooth gradients. Universally supported.
- PNG — screenshots, logos, line art, and anything needing transparency. Terrible for photographs; a PNG photo is often 5–10× a JPEG of the same picture.
- WebP — roughly 25–35% smaller than JPEG at matching quality, supports transparency, and is supported by every current browser. Usually the best default now.
A common and expensive mistake: exporting photographs as PNG because "PNG is the high-quality one". PNG is lossless, which is a different thing from high quality. For a photograph it mostly means a very large file.
What compression cannot fix
Compression makes an existing image smaller. It cannot add detail that is not there. If a photo is blurry, noisy or low resolution, compressing it harder makes it worse and compressing it gently just preserves the problem. That is an upscaling job, not a compression job.
Compress an image now
Runs in your browser. No signup, no watermark, no upload limit games.
Open Image Compressor Resize firstA workflow that holds up
- Resize to roughly twice the display width.
- Convert to WebP unless you need broad legacy support, in which case JPEG.
- Compress at quality 85.
- Look at the result at full size. If you cannot see a difference, try 80.
- Stop when you can see a difference, and step back one notch.
Frequently asked
Does compressing repeatedly degrade an image?
With lossy formats, yes. Each save discards a little more and the losses accumulate, a bit like photocopying a photocopy. Always compress from the original, never from a previously compressed copy.
Why did my file get bigger after compressing?
Usually because the source was already compressed harder than your chosen setting, or you converted a flat-colour PNG into a JPEG, which is poor at sharp edges and adds data trying to describe them.
Does compression affect SEO?
Indirectly but genuinely. Image weight is usually the largest contributor to Largest Contentful Paint, which is a ranking signal and, more importantly, the thing that decides whether a visitor waits for your page.