How to Compress Images Without Losing Quality
Understand the difference between lossy and lossless compression, and learn which format to reach for in each situation.
6 min read
Advertisement Loading
Advertisement Loading
Loading...
Understand the difference between lossy and lossless compression, and learn which format to reach for in each situation.
Images are usually the heaviest thing on a web page. Cutting image weight is the single highest-leverage performance change most sites can make — it lowers bandwidth costs, improves Core Web Vitals, and makes pages usable on slow connections.
Lossless compression rebuilds the original pixel-for-pixel. PNG and WebP lossless work this way. Expect roughly 20–30% savings.
Lossy compression discards information the eye is unlikely to notice. JPEG, WebP, and AVIF work this way, and routinely achieve 60–80% savings.
The important nuance: lossy compression is generational. Each re-encode discards more data. Always compress from the original, never from an already-compressed copy.
| Format | Best for | Typical saving | | ------ | -------- | -------------- | | AVIF | Photographs, wide browser support in 2026 | 50–70% vs JPEG | | WebP | General purpose, excellent compatibility | 25–35% vs JPEG | | PNG | Screenshots, logos, anything with transparency | baseline | | SVG | Icons, diagrams, logos | smallest, scales freely |
Quality 80 is the usual sweet spot for photographs. Below about 70, artefacts become visible in gradients and flat colour areas. Above 90, file size climbs steeply for almost no perceptible gain.
Test with your own images rather than trusting a single number — a photograph with heavy detail behaves very differently from a flat illustration.
srcset so phones do not download desktop images.Step 2 matters more than people expect. Resizing before compressing usually saves more than any amount of quality tuning.