Image Compression Explained
Compression is the single biggest win for page speed. Understand lossy vs lossless and quality settings to shrink images without visible damage.
Why compression matters
Images are usually the heaviest part of a web page. Shrinking them improves LCP, reduces bandwidth and makes mobile visitors stay. It is the highest-return performance task most sites can do.
Compress images free with the image compressor.
Lossy vs lossless
- Lossless — no pixels change; modest savings (PNG optimisation, some WebP).
- Lossy — some detail is discarded for much smaller files (JPEG, WebP, AVIF).
For photos, lossy wins. For screenshots, diagrams and logos, lossless (or PNG/WebP lossless) preserves crisp edges.
The quality dial
| Quality | Result |
|---|---|
| 90–100 | Near-original, large files |
| 75–85 | Web sweet spot, no visible loss |
| 60–70 | Noticeable on gradients/text |
| < 50 | Clearly damaged |
Test on real images: smooth skies and text suffer first.
Resize before you compress
A 4000px photo shown at 800px wastes bytes. Resize to the actual display size (×2 for retina), then compress. Use the image resizer.
Pick the right format
- JPEG — photos, no transparency.
- PNG — screenshots, logos, transparency (lossless).
- WebP — modern all-rounder, ~25–35% smaller than JPEG.
- AVIF — best compression today, growing support.
Convert between them with the image converter.
Practical workflow
- Crop to the composition you need.
- Resize to display dimensions (×2 max).
- Choose the format (WebP/AVIF where supported).
- Compress at quality 75–85.
- Compare before/after visually.
- Serve responsively with
srcset.
Common mistakes
- Serving full-resolution originals.
- Compressing but never resizing.
- Using PNG for photos.
- Setting quality too low and shipping artifacts.
- Forgetting to test on a real mobile connection.
Shrink your images
Drop your files into the free compressor — it runs in your browser, so nothing is uploaded.