How image compression affects quality (with a live demo)
Image compressors usually give you one control: a quality slider. It is worth knowing what that number does, because the right setting depends on the picture and on where it will be seen.
Lossless and lossy compression
Lossless compression (PNG, lossless WebP) finds patterns and stores them more efficiently, like a zip file. Nothing is lost, so the savings are limited. Lossy compression (JPEG, lossy WebP) goes further: it removes information you are unlikely to notice. The quality setting controls how much is removed.
What a JPEG encoder throws away
- Colour detail. Our eyes notice brightness changes more than colour changes, so encoders often store colour at a lower resolution than brightness.
- Fine texture. The image is split into 8 × 8 pixel blocks, and each block is described as a mix of simple wave patterns. Lower quality rounds away more of the fine, high-frequency patterns.
- Precision. The remaining numbers are rounded more coarsely at lower quality, which is where most of the space is saved.
Try it: the same picture at different qualities
The demo below draws a test picture with a smooth gradient, sharp text and fine stripes. Your browser then saves it as a JPEG at several quality settings. The sizes are measured on your device, right now, so they will differ slightly between browsers. You can also try one of your own images; it stays on your device.
Live demo: JPEG quality
Preparing the demo…
Your image is processed only in this browser tab and never uploaded. Large photos are scaled to 800 pixels wide first so the demo stays quick.
What to look for
- Blocking: visible 8 × 8 squares in smooth areas such as skies, usually at low quality.
- Ringing: faint ripples or “mosquito noise” next to sharp edges and text.
- Colour bleeding: strong colours smudging across edges, especially red.
- Banding: smooth gradients turning into visible steps.
Photos hide these artifacts well, because their natural texture masks small errors. Screenshots and text show them immediately. That is why a screenshot often looks worse, and sometimes ends up larger, as a JPEG than as a PNG.
Which quality setting should you use?
| Use | Starting quality | Notes |
|---|---|---|
| Keeping a master copy | Do not use JPEG | Keep the original file, or a PNG. |
| Print or a photo you will edit later | 90–95% | Large files, very few visible artifacts. |
| Website photos | 70–85% | Usually the best balance; check at 100% zoom. |
| Email, chat or a quick preview | 60–75% | Fine on a phone screen. |
| Thumbnails | 50–65% | Small display hides artifacts. |
These are starting points, not rules. Quality numbers are not standardised: 80% in one program is not identical to 80% in another. Judge by eye at the size people will actually see the image.
Resizing beats squeezing
If the image is much larger than it will be displayed, resize it before compressing. File size grows with the number of pixels, and halving both the width and height leaves a quarter of the pixels. A 4000 × 3000 photo shown 1200 pixels wide on a website carries more than ten times the pixels it needs. Resize first, then compress at a comfortable quality.
Avoid repeated compression
Each time a JPEG is opened and saved as a JPEG again, the encoder makes fresh rounding decisions, and errors build up. Keep the original and always export from it. HandyTechHelper’s tools never change your original file; they create a new download.
Tools for this guide
Sources
Written with AI assistance, then checked against how HandyTechHelper’s tools actually behave. Figures from other companies link to their source. Spotted a mistake? Tell us.