How to Compress Images Without Losing Quality
Understand the difference between lossy and lossless compression, and learn the right format for the right job.
Image compression is one of those topics where everyone has an opinion and most of the opinions are slightly wrong. Here's a clear-headed look at how it actually works, and how to get smaller files without ugly artefacts.
Lossy vs lossless — the only distinction that matters
Lossless compression (PNG, WebP lossless, AVIF lossless) reduces file size by encoding repeating patterns more efficiently. The decompressed image is bit-for-bit identical to the original. Great for screenshots, logos, and anything with sharp edges or text.
Lossy compression (JPEG, WebP, AVIF) throws away information your eye is unlikely to notice — subtle colour gradations, high-frequency detail in busy areas. The result is much smaller, but the original is gone.
The mistake people make is using lossy compression on images that need crisp edges (screenshots of UI, diagrams), or using lossless on photographs (where the file size penalty is huge for no visible benefit).
Pick the right format
- Photographs → WebP or AVIF at quality 75–85. JPEG if you need universal compatibility.
- Screenshots and UI → PNG, or WebP lossless.
- Illustrations with flat colours → PNG or SVG.
- Animations → WebP or AVIF, not GIF. (GIF is older than most of your colleagues and it shows.)
Quality settings: the 80/20 rule
For JPEG and WebP, quality 80 is almost always the sweet spot. Going from 95 to 80 typically cuts file size in half with no visible difference. Going from 80 to 60 saves another 30% but starts to show artefacts in skies, skin tones, and gradients.
Resize before you compress
The single biggest win is to actually resize the image to the dimensions it'll be displayed at. A 4000×3000 photo compressed to 80% quality is still a 4000×3000 photo. If it's going to render at 800 pixels wide, resize first, then compress.
What about "smart" compression?
Tools that promise to compress images "without any quality loss" are usually doing one of two things: stripping metadata (real but tiny savings), or applying lossy compression you can't see at first glance (real savings, but not actually lossless). Both are fine — just know what you're getting.
A practical workflow
- Resize to the maximum dimensions you'll need.
- Choose the right format for the content type.
- Export at quality 80.
- Compare file size and visual quality. If it looks fine, ship it.
Done thoughtfully, you can typically cut image weight by 70–90% with no perceptible loss — which means faster pages, happier users, and lower bandwidth bills.