How Much Can You Compress an Image Before It Shows?
The quality number is not a percentage of anything. What the artefacts look like, where they appear first, and how to find your own limit.
· 3 min read
Almost every guide lands on the same number: about 80. It is good advice and it is worth understanding why, because the number is not a percentage of quality, of file size, or of anything else. It is a position on a curve whose shape is what actually matters.
The curve, and why 80 sits where it does
Between 100 and roughly 85, file size falls steeply and almost nothing visible changes — the encoder is discarding detail the eye was never going to resolve. Between 85 and about 65 it keeps falling while damage accumulates slowly. Below 60 the size barely improves any further and the damage becomes obvious.
So the interesting region is narrow, and 80 sits inside it with room on both sides. Above that you are paying for invisibility; below it you are saving very little in exchange for something people can see.
What the damage actually looks like
Knowing the names makes the artefacts much easier to spot, and spotting them is the only way to judge a setting honestly.
- Blocking — the image dissolves into 8×8 squares, first visible in skies, walls and other large flat areas.
- Ringing — faint echoes hugging sharp edges, worst around text and thin lines against a plain background.
- Banding — smooth gradients break into visible steps, because the subtle values between them were the cheapest thing to discard.
- Colour bleed — saturated edges, particularly reds, smear slightly, because colour is stored at lower resolution than brightness.
That last one is not a defect but a design decision. Lossy formats store brightness at full resolution and colour at half or a quarter, because human vision is far more sensitive to the first. It is invisible on a photograph and immediately obvious on red text, which is one reason text should not be stored as a lossy image at all.
Different images have different limits
A busy photograph — foliage, crowds, texture — hides artefacts extremely well, because there is no smooth area for blocking to show against. The same setting applied to a portrait against a plain backdrop, or to a screenshot, produces something obviously degraded.
There is no correct quality setting, only a correct setting for this image. Judge the one in front of you.
Generation loss
Every lossy save discards a little more, and the artefacts of the previous save become detail the next one carefully preserves. Open, edit and re-save a JPEG a few times and the damage compounds visibly, which is the same effect as photocopying a photocopy.
Keep the original. Edit from it, and export a compressed copy each time rather than re-compressing yesterday's export. If an image has to go through several stages, keep it lossless until the last one.
Dimensions beat quality, usually by a lot
Before dragging quality down into the visible-damage region, check the size. Halving the width and height removes three quarters of the pixels, and it costs nothing at all if the image was never displayed larger than that. Compression can then stay in the comfortable range.
A 4000-pixel photograph at quality 60 will usually look worse and weigh more than the same photograph resized to 1600 at quality 85. Reach for the dimensions first.
How to judge it properly
Look at the result at the size it will be displayed, not at a thumbnail and not zoomed to 400 per cent. A shrunken preview hides exactly the artefacts you are trying to detect, and heavy magnification shows damage nobody will ever encounter. Then check the areas artefacts prefer: skies, shadows, skin, and any edge where dark meets light.
Frequently asked questions
- What quality setting should I use?
- Around 80 for photographs is the usual starting point, then adjust for the image in front of you. Busy, textured images tolerate far more compression than portraits, gradients or anything containing text.
- Why did compressing my image barely make it smaller?
- It was probably already compressed. A JPEG that came off a camera or out of another tool has already discarded what a second pass would have taken, so re-encoding it mostly adds damage rather than saving space.
- Is there a way to reduce file size without losing anything?
- Yes, up to a point. Lossless formats and lossless optimisation strip metadata and repack the data without touching pixels, and resizing an image you were displaying smaller anyway costs nothing visible. Beyond that, saving space means discarding something.
Related reading
- 3 min read
camelCase, snake_case or kebab-case: Which Goes Where
Naming conventions are not preferences. Each language and format has one the tooling expects, and going against it costs more than it looks.
- 3 min read
encodeURI or encodeURIComponent? One Rule That Works
The two differ by eleven characters, and picking wrong either breaks the URL or corrupts the value. Here is the rule, and the plus-sign trap.
- 3 min read
Favicon Sizes You Actually Need
Generators offer dozens of sizes and almost nobody needs them all. Which files earn their place, which link tags matter, and why 16px decides it.
- 3 min read
PNG, JPEG or WebP: Which One, and Why
Three formats, one decision, and it hinges on what the image contains rather than on which format is newest. A rule and its exceptions.