File formats
How to Compress a PNG Without Losing Quality (And Why It Is a Different Problem)
PNG compression is not like JPG compression. The trade-off is different, and for some images there is no trade-off at all.
Zahid Sheeraz5 min readThere is a question that comes up whenever someone tries to shrink a PNG, and it is the wrong question: "how do I compress this without losing quality?" For half of the PNGs on the web, the answer is that the question is malformed, because the PNG itself is the problem.
The two kinds of PNG
A PNG of a photograph. A photograph has continuous tone, soft gradients, and almost no repetition. PNG is lossless, so it stores every pixel exactly. There is nothing to compress except repetition, and a photograph has almost none. The file is enormous - 5 to 10 times the size of the same image as a JPG - and every byte of that is wasted.
A PNG of a graphic. A screenshot, a logo, a diagram, a chart, a piece of UI. Hard edges, flat areas of colour, text. PNG is exactly right for this, and the file is small because the format is efficient at exactly this kind of image.
The first case is a format mistake, not a compression problem. No amount of lossless compression will turn a 3 MB photo-PNG into a 40 KB file. The fix is to convert it to JPG or WebP, which throw away the detail the eye is bad at noticing and shrink the file by 90%.
What lossless compression actually does
A PNG file is already compressed. The compression is lossless, and it is good at its job. Squeezing more out of it means finding the small inefficiencies the original encoder left behind.
The honest numbers:
- 10 to 30% smaller, and that is the ceiling for most files.
- Sometimes nothing at all. A PNG that was already saved well has no slack to find.
- The pixels are identical before and after. Nothing is lost, because nothing is thrown away.
So "compress a PNG without losing quality" is a real operation and a real result, but the result is a 20% reduction on a file that may be five times too big in the first place. It is worth doing. It is not the answer people are looking for.
The real lever: reducing the colour count
For simple graphics - icons, logos, diagrams, screenshots of flat UI - the biggest win is not better compression. It is fewer colours.
A PNG of a 16-colour icon stored as 24-bit RGB has 16 million possible colours and uses 3 bytes per pixel. Stored as an 8-bit palette, it has 256 possible colours and uses 1 byte per pixel. The file is roughly a third of the size, and the image is identical, because it never had more than 16 colours to begin with.
The catch is that this only works on images that genuinely have few colours. A photograph has millions; reducing it to 256 colours turns it into a poster. A logo with a gradient has hundreds; reducing it to 256 is fine. A screenshot of a web page has dozens; reducing it to 256 is free.
The rule: reduce the colour count on graphics, never on photographs.
What "quality" means for a PNG
For a JPG, quality is a setting: 85%, 70%, 50%. Lower quality, smaller file, more loss. Everyone understands the trade-off.
For a PNG there is no quality setting in the same sense, because there is no loss to trade. What you can trade is:
- Colour count (above) - lossy in the sense that colours are merged, but invisible if the image was simple.
- Alpha precision - a 24-bit alpha channel is smoother than an 8-bit one, and a few kilobytes bigger.
- Interlacing - makes the image load progressively, at a cost in size.
- Metadata - EXIF, ICC profiles and the rest can add tens of kilobytes to a small file.
The first two are the ones worth thinking about. The last two are usually free wins.
What the tool does
The Compress Images tool shows you the before and after size side by side, so you can see what you gained before you download. That matters because the gain varies enormously by image: a PNG of a flat UI might drop 40%, and a PNG of a photograph might drop 5%.
It also has a maximum width option, which resizes while compressing. That is often the bigger win than the compression itself - a 4000-pixel-wide image on a page that displays at 800 pixels is four times the data it needs to be, and resizing fixes that regardless of format.
The honest trade-off, stated plainly
| Your image | Best move | Why |
|---|---|---|
| A photograph saved as PNG | Convert to JPG or WebP | The format is the problem, not the compression |
| A screenshot or a UI capture | Lossless compress | 10-30% smaller, nothing lost |
| A logo or icon | Reduce colours, then compress | A few colours is a few bytes |
| A diagram or chart | Lossless compress | Flat colours compress well |
| A PNG you are about to email | Convert to JPG | The recipient can open it; PNGs in email are often huge |
| Anything for a web page | Convert to WebP | Smaller than both at the same look |
A short checklist
- Is it a photograph? Do not compress it as a PNG - convert it to WebP or JPG first.
- Is it a graphic? Lossless compression is worth doing; 10-30% is realistic.
- Does it have fewer than 256 colours? Reduce the colour count first - that is where the big win is.
- Is it wider than it needs to be? Resize it at the same time - that saves more than the compression.
- Check the size before and after. The gain varies by image and the tool shows it.
- Keep the original. The compressed copy is a new file, and you may need the source.
- Look at the result at full size before you publish it.
- It runs in your browser and keeps no copy of your image.