What quality setting should you use for web images?

Every image compression tool has a quality slider, usually going from 0 to 100. Most people move it to some round number — 80, 85, maybe 90 — and move on. But this slider is literally the most impactful single decision you can make about image file size, and the default is almost always wrong for web use.

What the quality slider actually controls

In lossy formats like JPG, WebP, and AVIF, the quality setting controls how aggressively the encoder throws away information. Specifically, it controls the quantisation strength — how coarsely the frequency components of each image block are rounded.

At quality 100, nothing is quantised: no information is thrown away (though the image is still lossy-transformed, so this is not quite the same as lossless). At quality 1, almost everything is thrown away: you get blocky, blurry, discoloured output.

The trade-off is not linear:

• Going from quality 100 → 90 saves ~50% file size with almost no visible change
• Going from quality 90 → 80 saves another ~20% with minor degradation
• Going from quality 80 → 70 saves another ~15% with more noticeable changes
• Below quality 60, artefacts become hard to ignore
• Below quality 40, the image is clearly damaged

The implication: quality 75 gives you 70% of the file-size savings of quality 50 with a fraction of the visible damage. Quality 90 wastes bytes with no visible benefit.

What different quality levels actually look like

Rough rule of thumb for a JPG photograph at 1500×1000 px:

Quality	File size	Visual appearance
100	~800 KB	Identical to source (effectively lossless)
95	500 KB	Indistinguishable from source at any zoom
85	260 KB	Indistinguishable at normal viewing distance
75	170 KB	Minor softening in fine texture; invisible in most photos
65	120 KB	Slight softening noticeable on close inspection
55	90 KB	Visible softening; acceptable for thumbnails
40	60 KB	Clear artefacts; only for heavily blurred backgrounds
20	35 KB	Obvious blocking and discolouration

Your exact numbers will vary — a photograph with lots of fine detail (foliage, fabric, textures) shows artefacts sooner than a smooth image (portraits against plain backgrounds).

Matching quality to use case

Different images on your website deserve different settings.

Hero photographs and product shots

These are the images your users actually look at. They fill the screen, attract attention, and carry the aesthetic weight of your brand. You want them crisp but not wasteful.

Recommended: quality 80-85. At this range, even detail-obsessed viewers on retina displays won’t see artefacts, and you save 40-60% vs quality 95.

Gallery thumbnails

Small images displayed at 200-400 px wide. Users glance at them and click if interested. Fine detail is mostly invisible at this display size anyway.

Recommended: quality 65-75. Don’t waste bytes making thumbnails sharper than the display size can resolve.

Hero background photographs with an overlay

Images that sit behind text or gradients. Most of the image is obscured or de-emphasised visually. Fine detail is almost never noticed.

Recommended: quality 55-70. The overlay hides minor artefacts. File size matters more than quality here because these are often huge images.

Logos and graphic elements

These shouldn’t be JPG at all — they should be PNG or SVG. If they must be JPG for some reason, quality 90+ is needed to avoid visible ringing around sharp edges. Better: just convert them to PNG.

Screenshots and UI images

If they contain text or sharp edges, JPG will mangle them at any quality. Save as PNG (lossless) or use WebP lossless if the audience supports it.

Images that will be re-edited and re-saved

Every re-save compounds JPG quality loss. If an image is going to be edited by your team multiple times, save the master as PNG (lossless) and only export to JPG at the end, as late as possible.

Perceptual vs numerical quality

Here’s a subtle point: the quality number on the slider does not map to a perceptual scale. JPG quality 80 and WebP quality 80 and AVIF quality 80 look very different from each other, because each encoder interprets the number differently.

Rough translation:

• JPG quality 80 ≈ WebP quality 75 ≈ AVIF quality 65

When switching formats, re-test the slider — don’t just keep the same number.

The “compare two versions” test

The reliable way to pick a quality setting is to do a direct A/B comparison on your actual content.

1. Take a representative image (or several)
2. Export copies at quality 90, 80, 70, 60, 50
3. Open them full-screen side by side with the original
4. Find the lowest quality where you can’t reliably tell them apart
5. Bump up by 5 for safety
6. That’s your setting

For most photographs on most displays, this process ends up at quality 70-80.

Objective quality metrics

If you’re processing a large catalogue and want automated quality gating, objective metrics are useful. Roughly:

• PSNR >= 40 dB — visually indistinguishable for most content
• SSIM >= 0.95 — excellent quality
• VMAF >= 90 — near-transparent quality (Netflix-grade)

These can help you set a per-image quality automatically: encode at progressively lower settings until you hit a threshold, then stop. Tools that do this are sometimes called “content-aware” encoders.

For a typical website, you don’t need this level of sophistication. A blanket quality 75 will serve you well.

How to tune quality in practice

The Image Compressor has a quality slider from 0 to 100 and shows the resulting file size live as you drag it.

Drop in your image, start with the slider at 75, look at the preview — is the quality acceptable? Slide down until you see artefacts, then back up 5 points. Download. No server round-trips means you can iterate fast. Try quality 70 — for most photos you literally cannot tell the difference, but your users get a file that’s 40% smaller.

Quick reference

Image type	Recommended quality
Hero photograph (prominent, viewer is looking at it)	80-85
Regular content photograph	75
Gallery thumbnail	65-75
Background image with overlay	55-70
Blurred / decorative background	40-55
Image that will be re-edited	Keep as PNG until final export
Logo, icon, diagram, screenshot	Don’t use JPG — use PNG

If you remember one number, it’s 75. It’s the right default for the majority of web photographs, and it saves roughly half the file size vs the typical 85-90 default.