Lossy vs Lossless Compression in Plain English
Lossless compression makes a file smaller without changing anything: when you open it again, every pixel is exactly as it was. Lossy compression makes a file much smaller by permanently throwing away detail that you're unlikely to notice. PNG is lossless, JPEG is lossy, and WebP can be either.
For everyday use: photos are usually fine with lossy compression, while screenshots, logos and anything with sharp text are better kept lossless. The rest of this guide explains why, and what the quality slider in a compression tool actually does.
An analogy: packing a suitcase
Lossless compression is like packing a suitcase more neatly. You fold everything, roll the socks, fill the gaps. The case is smaller, but when you unpack, every item is still there.
Lossy compression is like deciding you don't really need five T-shirts and taking three. The case is much smaller still, but two T-shirts are gone for good. If you chose sensibly, you won't miss them. If you went too far, you'll notice on day four.
How lossless compression works
Lossless methods look for patterns and describe them more efficiently. A row of 500 identical white pixels in a screenshot doesn't need to be stored as 500 separate values; it can be stored as "white, 500 times". When the file is opened, the pattern is expanded back to exactly the original.
This works very well on images with large flat areas and repeated colours: screenshots, diagrams, charts, logos and text. It works poorly on photos, where neighbouring pixels are almost never identical. That's why a photo saved as PNG is often bigger than the same photo as JPEG.
ZIP files use the same idea for documents. You'd never want a ZIP to change a single letter of your contract, so it's always lossless.
How lossy compression works
Lossy methods are built around how people see. Our eyes notice changes in brightness more than small changes in colour, and we don't notice fine variations in busy areas such as leaves, gravel or fabric. JPEG and lossy WebP simplify exactly those parts.
The result is a file that can be a fraction of the size of the original. Mozilla's documentation describes photographs and other continuous-tone images as usually tolerating lossy compression well, because the discarded detail is harder to see.
The trade-off appears when you push too far, or use lossy compression on the wrong kind of image:
- Blocky patches in smooth areas such as a blue sky or skin
- Smudges and halos around sharp edges and text, often called artefacts
- Colour banding, where a smooth gradient turns into visible stripes
On a screenshot or a logo, these show up much sooner, because sharp edges against flat colour are exactly what lossy compression handles worst.
Which formats are which
| Format | Type | Good for |
|---|
| JPEG | Lossy | Photos for email, upload forms, printing |
| PNG | Lossless | Screenshots, logos, diagrams, images with transparency |
| WebP | Lossy or lossless | Images on your own website |
| GIF | Lossless, but limited to 256 colours | Simple animations |
| ZIP | Lossless | Any files you need to keep exact |
GIF is a slightly odd case: it doesn't lose detail when compressing, but it can only store 256 colours, so a photo has to be reduced to that palette first. That reduction is where the quality goes.
What the quality slider does
When you save as JPEG or lossy WebP, the quality setting decides how much detail gets thrown away. Higher quality keeps more detail and makes a bigger file; lower quality keeps less and makes a smaller one.
In Image Compress, the Quality slider runs from 10% to 100% and starts at 80%:
- Around 80%: for most photos you won't see a difference from the original, and the file drops a lot. A good default.
- 60% to 70%: often still fine for a phone screen or an email.
- Below that: you may start to see blocky patches in skies and smooth skin.
The quality percentage isn't a percentage of anything you can measure. It's a setting on the encoder's scale, and the same number can look slightly different between programs. Judge by the preview, not the number.
Why PNG ignores the slider
If you choose PNG in Image Compress, the quality slider does nothing. That's not a bug. PNG is lossless, so there's no detail to throw away and nothing for the slider to control. To make a PNG smaller, reduce its dimensions with Max width, or switch to WebP, which keeps transparency and is usually smaller.
If you convert a photo to PNG, the result is often bigger than the JPEG you started with. Image Compress shows this by turning the Saved box red. In that case, keep the photo as JPEG or WebP.
Lossy damage adds up
Each time you open a JPEG, edit it and save it again as JPEG, the encoder throws away a little more detail. One save is fine. Ten rounds of editing, saving and re-sending can leave a photo visibly worse.
So keep your original photo, and always make compressed copies from it rather than compressing the compressed copy. If you need to edit a picture many times, work in a lossless format and export a JPEG or WebP once you're done.
A quick way to choose
- It's a photo and it's going by email, to a form or onto a website: lossy (JPEG or WebP) at around 80%.
- It has text, sharp lines or flat colours: lossless (PNG, or lossless WebP).
- It needs a transparent background: PNG, or WebP if the place you're using it accepts it.
- It's the master copy you'll edit again: keep it lossless or untouched.
Try it with one of your own photos in Image Compress: drag the slider from 80% down to 40% and watch the preview and the compressed size. The point where you start to see damage is your lower limit for that kind of picture.
KhanTools — Free Online Web Tools
Free browser-based tools for images and PDFs. No uploads. 100% private.
Blog ·
About ·
Privacy Policy ·
Terms of Service ·
Contact
JavaScript is required to use KhanTools. Please enable JavaScript in your browser.