How to compress images without losing quality
What image compression actually does, which quality setting to use, and why your PNG sometimes gets bigger instead of smaller.
"Compress without losing quality" is one of those phrases that sounds like a contradiction, and half the time it is. It is worth knowing which half you are in, because the right answer is completely different depending on the file.
Two kinds of compression
Lossless compression finds a more efficient way to describe exactly the same pixels. Nothing is discarded — you can decompress and get a byte-for-byte identical image back. PNG works this way. So does ZIP.
Lossy compression throws information away, choosing detail your eye is least likely to miss. JPEG and WebP work this way. This is where the big savings live: a photo can often drop 80% of its file size before the difference becomes visible at normal viewing size.
The important consequence is that lossless compression has a hard floor. Once a PNG is efficiently encoded, no tool can make it meaningfully smaller while keeping it a PNG. Anyone promising otherwise is either converting it to a lossy format or rounding down the colours.
The quality slider, decoded
JPEG and WebP quality is a number from 1 to 100, but it is not a percentage of anything meaningful. It maps to how aggressively the encoder rounds off detail. In practice:
| Quality | What it looks like | Use it for |
|---|---|---|
| 95–100 | Indistinguishable, files barely smaller | Master copies you will edit again |
| 80–90 | Effectively identical at normal viewing size | Almost everything |
| 60–75 | Slight softening in fine detail and gradients | Web images where size matters |
| Below 50 | Visible blocking and colour banding | Thumbnails, or nothing |
If you take one number away: 85 is the default you want. It is the point where most encoders have removed the genuinely redundant information and have not yet started on detail you would notice.
Why your PNG got bigger
This surprises people regularly. You run a PNG through a compressor and the result is larger than the original.
The reason is that PNG encoders vary in how hard they work. A well-optimised PNG from a design tool may already be near the theoretical minimum, and re-encoding it with a general-purpose encoder — like the one built into a browser — can easily produce a worse result.
If a PNG needs to be smaller, the answer is usually not "compress the PNG harder". It is one of:
- Convert it to WebP. For screenshots, illustrations and anything with flat colour, WebP routinely beats PNG by 40–60% while staying lossless.
- Convert it to JPEG, if it is a photograph and does not need transparency.
- Resize it. Which brings us to the thing most people skip.
Resizing beats compressing
Here is the part that matters more than any quality slider: file size scales with pixel count, and most images are far larger than they are ever displayed.
A 4000 × 3000 photo from a phone is 12 megapixels. Displayed in a 800-pixel-wide column on a web page, roughly 96% of those pixels are thrown away by the browser at render time — after being downloaded in full.
Resizing that image to 1600 pixels wide before compressing it will cut the file size by around 84% on its own, before the quality setting has done anything. Then compress at 85 and you have a file that is a fraction of the original with no visible difference at the size it is actually shown.
The rule of thumb: resize first, compress second. Doing it the other way round wastes the compression pass.
Choosing a target width
- Full-width hero images: 1920 px is plenty; 2560 px if you are catering to large displays.
- Content images in an article: 1200–1600 px.
- Thumbnails and avatars: 400 px, or twice the display size for sharp rendering on high-density screens.
- Email attachments: 1600 px keeps it under most size limits while staying good enough to print at postcard size.
Metadata is free savings
Every photo carries EXIF data — camera model, lens, exposure settings, often GPS coordinates. It is usually a few dozen kilobytes, which is trivial for a large photo but significant for a small one.
Re-encoding an image drops that metadata automatically, which is a size saving and, more importantly, a privacy one. If you are publishing photos taken at home, stripping the coordinates matters more than the kilobytes.
A practical workflow
- Resize to the largest size the image will actually be displayed at.
- Choose the format: WebP for the web, JPEG for compatibility, PNG only when you need lossless or transparency.
- Compress at quality 85 and look at the result.
- If it is still too big, drop to 70 before you drop the dimensions further — softness is usually less noticeable than a smaller image.
That is it. Two settings, in the right order, and no plugin required.