How to compress an image without losing quality
"Without losing quality" usually means "without anyone being able to tell". That is very achievable — the trick is knowing which lever to pull first.
Last reviewed 2026-01-15
1. Fix the dimensions first
The single biggest saving comes from not shipping more pixels than are displayed. An image shown at 800 px wide gains nothing from being 4000 px wide, and halving each dimension removes about three quarters of the data.
2. Then tune quality
JPEG and WebP quality around 0.8–0.85 is the sweet spot for photographs: large savings, no visible difference at normal viewing distance. Below about 0.7 you start seeing blocking near sharp edges and haloing around text.
3. Then pick the format
WebP for the web. JPG when compatibility outside browsers matters. PNG only when you genuinely need lossless output or transparency with hard edges.
Avoid repeated re-encoding
Every lossy save discards a bit more. Keep an original and export from it, rather than compressing an already-compressed export a second and third time.
FAQ
Frequently asked questions
- Is there truly lossless compression?
- Yes — PNG and WebP lossless preserve every pixel exactly. They just can't shrink photographs anywhere near as much as lossy encoding.
- What quality setting should I use?
- Start at 0.85 and lower it until you can see a difference, then step back up one notch.
Related tools
- Compress an imageShrink JPG, PNG and WebP files in your browser. Adjust quality, see the estimated size before you download.
- Reduce image file sizeReduce image file size to meet an upload limit. Adjust dimensions, quality and format with a live size estimate.
- Convert an image to WebPTurn JPG or PNG files into WebP in your browser to cut page weight. Adjustable quality, no upload required.
Related guides
Sources
- MDN Web Docs — HTMLCanvasElement.toBlob()
- web.dev — image optimisation guidance