Most images on the web are bigger than they need to be. A photo that looks identical to the eye at 250 KB is often shipped at 2 MB because nobody thought to compress it. The fix is simple, but only if you understand what compression is actually doing.
Lossy vs lossless: the only distinction that really matters
Lossless compression rearranges the data more efficiently without throwing any of it away. The decoded image is pixel-identical to the original. PNG, lossless WEBP, and lossless AVIF all do this. The downside is that lossless compression has a hard limit on how small a file can get.
Lossy compression throws away information your eye is unlikely to notice — subtle colour shifts, fine noise, small variations in flat areas. JPG, lossy WEBP, and lossy AVIF all do this. The upside is dramatically smaller files. The downside is that you cannot get the discarded information back.
Choosing a quality level
Most encoders use a quality scale from 0–100. The marketing names are misleading: "100" is not perfect, and "1" does not always look broken. Use these rules of thumb instead:
| Quality | Looks like | Good for |
|---|---|---|
| 95–100 | Visually indistinguishable from source | Archive masters |
| 80–90 | Imperceptible difference on most photos | Hero images, products |
| 70–80 | Slight softening in fine detail | Blog images, thumbnails |
| 60–70 | Visible artifacts in skies and gradients | Low-priority thumbnails |
| Below 60 | Banding, blockiness, mushy detail | Avoid for anything public |
Default to quality 82 for JPG and WEBP. It is the sweet spot for almost everything. Move up for photography you care about, move down for thumbnails you do not.
Resize before you compress
This is the single biggest mistake people make. A 4000-pixel-wide photo compressed to 70 quality will be much larger than the same image resized to 1600 pixels wide at quality 85 — and the smaller version will look better, because the browser does not have to scale it down at render time.
Decide the largest size the image will ever be displayed at. Multiply by 2 for high-DPI screens. Resize to that size. Then compress.
Format matters as much as quality
- Photos: lossy WEBP or AVIF — both crush JPG at the same quality.
- Screenshots with sharp text: PNG or lossless WEBP. Lossy formats blur text.
- Logos and flat illustrations: SVG when possible, PNG otherwise.
- Animated graphics: WEBP or AVIF (animated). Avoid GIF unless you must.
Common mistakes
- Re-saving the same JPG many times. Each save loses more quality.
- Compressing aggressively at full resolution instead of resizing first.
- Using quality 50 on photography to "save space" — the artifacts ruin the image.
- Compressing a screenshot with JPG and ending up with blurry text. Use PNG instead.
- Compressing icons. They are already tiny; compression saves bytes that do not matter.
A recommended workflow
- Start from the highest-quality source you have, ideally a PNG or original camera file.
- Resize to the largest displayed dimension × 2.
- Pick the right format for the content (photo → WEBP/AVIF, graphic → PNG).
- Compress at quality 80–85.
- Eyeball the result at 100% zoom on a real monitor. If it looks good there, you are done.
Frequently asked questions
What is the best free image compressor?+
Any browser-based compressor that lets you pick quality and target format is fine. The format and quality you choose matter more than the brand of the tool.
Can I compress an image without any quality loss?+
Yes — choose a lossless format (PNG, lossless WEBP, lossless AVIF). You will get smaller files than the original, but not dramatically smaller.
Does compressing a JPG twice make it worse?+
Yes. Each lossy save introduces new artifacts on top of the old ones. Keep an original master if you might re-compress later.
Why does my compressed file end up larger?+
Usually because you compressed a very small image, or because the source was already heavily compressed. Compression has overhead; below a few KB it can backfire.