Browse by section

Web Design 日本語

What Image Quality Setting Should You Use? A Benchmark

Most people leave the quality slider at 80 or 90 without thinking about it. Some set it to 100 to “avoid losing anything.”

Quality 100 should never be used. It produces a file roughly three times larger than quality 90 while improving measured quality by about one percent. To find where the payoff actually stops, I encoded images from this blog at every quality step from 30 to 100 and measured both size and quality.

Photographs and screenshots turned out to need completely different settings. More surprisingly, JPEG quality does not increase monotonically on screenshots — raising the slider actually made the image worse at two points.

Sponsored

How the measurement was done

Four photographs and one screenshot from this blog were resized to 1920px on the long edge, then encoded at quality 30 through 100 in steps of 10.

▼Test setup

▶ Encoder: Pillow 12.3.0 (JPEG with optimize and progressive on, WebP at method 6)

▶ Preprocessing: Lanczos resize to 1920px on the long edge

▶ Quality metric: SSIM with an 11×11 Gaussian window, sigma 1.5. 1.000 is a perfect match

▶ Images: a food close-up, an interior, a product shot, a book photo, and a game screenshot

Differences become hard to see above roughly SSIM 0.98, so read the tables below with that threshold in mind.

Format-to-format comparison is covered separately in the JPEG, WebP and AVIF benchmark. This article is about what to do once the format is settled.

Result 1: JPEG quality steps on photographs

Quality 100 costs 2.7 to 3.0 times the file size of quality 90 and returns about 0.01 in SSIM.

quality Food close-up Interior Product shot Books
30 164KB / 0.916 130KB / 0.941 77KB / 0.929 102KB / 0.957
40 198KB / 0.931 156KB / 0.952 96KB / 0.940 121KB / 0.960
50 231KB / 0.942 182KB / 0.960 114KB / 0.948 138KB / 0.970
60 266KB / 0.950 210KB / 0.966 134KB / 0.955 157KB / 0.974
70 320KB / 0.960 252KB / 0.973 166KB / 0.963 187KB / 0.974
80 404KB / 0.971 319KB / 0.980 221KB / 0.972 236KB / 0.984
90 592KB / 0.985 471KB / 0.989 351KB / 0.984 350KB / 0.991
100 1605KB / 0.999 1354KB / 0.999 1018KB / 0.999 1046KB / 0.999

Each cell shows file size / SSIM.

▼What happens from q90 to q100

▶ Food close-up: 592KB to 1605KB (2.71×), SSIM +0.014

▶ Interior: 471KB to 1354KB (2.87×), SSIM +0.010

▶ Product shot: 351KB to 1018KB (2.90×), SSIM +0.015

▶ Books: 350KB to 1046KB (2.99×), SSIM +0.008

Triple the bytes for one percent of quality. No image on the web justifies that trade. Quality 100 pays almost the cost of lossless compression without being lossless.

Sponsored

Result 2: WebP quality steps on photographs

WebP behaves the same way. Quality 100 costs 2.0 to 2.3 times quality 90.

quality Food close-up Interior Product shot Books
30 109KB / 0.907 76KB / 0.929 43KB / 0.916 62KB / 0.963
40 129KB / 0.921 90KB / 0.940 54KB / 0.925 71KB / 0.967
50 150KB / 0.932 104KB / 0.948 65KB / 0.933 79KB / 0.970
60 172KB / 0.940 118KB / 0.954 77KB / 0.941 88KB / 0.973
70 196KB / 0.949 134KB / 0.960 92KB / 0.949 100KB / 0.976
80 261KB / 0.964 179KB / 0.971 129KB / 0.962 126KB / 0.980
90 451KB / 0.983 306KB / 0.984 249KB / 0.980 216KB / 0.988
100 924KB / 0.995 696KB / 0.994 562KB / 0.995 507KB / 0.995

One detail deserves attention: WebP at q80 is lower quality than JPEG at q80. On the food photograph, JPEG scored 0.971 against WebP’s 0.964. Quality numbers mean different things in different formats, so carrying your old JPEG setting straight over to WebP quietly lowers image quality.

For photographs in WebP, set the value 5 to 10 points higher than the JPEG value you were using.

Result 3: the payoff stops around quality 70–80 for photographs

Efficiency holds up to about q80 and falls off sharply beyond it. Photographs belong at 70–80.

Tracking the cost of each 10-point step makes the boundary obvious. This is the food close-up in JPEG.

Step Added bytes SSIM gained
30 → 40 +34KB +0.015
50 → 60 +35KB +0.008
70 → 80 +84KB +0.011
80 → 90 +188KB +0.014
90 → 100 +1013KB +0.014

The same 0.014 improvement costs 188KB between 80 and 90, and 1013KB between 90 and 100. More than five times the price for identical returns.

▼Suggested values for photographs

① Photos in post bodies: JPEG 75–80 / WebP 80–85

② Featured images and hero shots: JPEG 85 / WebP up to 90

③ Thumbnails and small displays: JPEG 60–70 / WebP 70

④ Quality 100: never

Sponsored

Result 4: screenshots need completely different settings

A screenshot reaches SSIM 0.984 at WebP quality 30. Setting it to 80 out of habit wastes 1.7 times the bytes.

The same measurement on a game screenshot, in WebP:

quality File size SSIM
30 59KB 0.984
40 68KB 0.988
50 75KB 0.992
60 80KB 0.994
70 86KB 0.994
80 101KB 0.997
90 134KB 0.999
100 204KB 1.000

Photographs scored 0.907 to 0.963 at quality 30. The screenshot scored 0.984. Images built from flat colour and straight lines simply do not fall apart at low quality.

For a site that publishes screenshots heavily, splitting this setting away from the photograph setting noticeably reduces total page weight.

Result 5: JPEG quality is not monotonic on screenshots

Raising JPEG quality on a screenshot lowered measured quality at two separate points. That alone rules JPEG out for UI images.

The screenshot encoded in JPEG at 5-point steps:

quality Size SSIM
30 91.0KB 0.9654
35 97.4KB 0.9682
40 103.0KB 0.9531 ← drops
45 109.8KB 0.9741
50 115.3KB 0.9740
55 122.1KB 0.9760
60 128.9KB 0.9779
65 136.8KB 0.9808
70 147.4KB 0.9649 ← drops
75 158.1KB 0.9866
80 173.3KB 0.9877
85 195.5KB 0.9919
90 229.4KB 0.9954

At q40 and q70 the file grew while SSIM fell. q35 (0.9682) beat q40 (0.9531), and q65 (0.9808) beat q70 (0.9649).

To isolate the cause, the same encodes were repeated with chroma subsampling fixed at 4:4:4. The dips appeared in exactly the same places (0.9544 at q40, 0.9658 at q70). Chroma is not responsible; the luminance quantisation tables are.

JPEG maps the quality value onto a scaling factor for its quantisation tables, and at certain values the high-frequency coefficients that carry text edges get quantised more coarsely. On photographs this hides in the noise. On images full of hard edges, it shows up in the measurement.

▼What follows from this

▶ Do not use JPEG for screenshots or diagrams. Raising quality is not guaranteed to help

▶ WebP improved monotonically on the same source. UI images should be WebP

▶ If JPEG is unavoidable, stay at q75 or above to clear the dip at q70

Quick reference

Splitting settings by “photograph or interface” covers almost every case.

Image type Format quality Long edge
Photos in post bodies WebP 80–85 1920px
Featured images WebP 85–90 display size
Screenshots WebP 40–60 native
Diagrams and illustrations WebP 50–70 native
Social OGP images WebP / PNG 80 1200×630

Screenshots are listed at native size because downscaling a UI image makes its text unreadable. Photographs survive resizing; interfaces do not. Reduce UI images through format and quality, never through resizing.

Trying it yourself

The batch image converter on this blog takes a quality value from 1 to 100 and converts multiple files at once. Nothing is uploaded; the work happens inside the browser.

▼The three presets, read against this measurement

▶ WebP q80, 1920px: for photographs. Matches the conclusion above

▶ JPEG q70, 1280px: prioritises size, but lands exactly on the q70 dip for UI images

▶ Keep format, q92: prioritises quality, though 92 is more than needed. Around 85 is enough

When converting screenshots, skip the presets and pull quality down to 40–60. If your images behave like the ones measured here, the file will be roughly half the size with no visible change.

Related reading

▶ JPEG, WebP and AVIF measured at matched quality — which format to pick in the first place

▶ Handling WebP files comfortably on a Mac — opening WebP on macOS

▶ Building an image compression GUI in Python — automating the same job on the desktop

Summary

Three conclusions came out of the measurement.

▼Conclusions

① Never use quality 100. Around 3× the bytes of q90 for a one percent gain

② Photographs belong at 70–80. Past that, efficiency collapses

③ Screenshots need only 30–60. Treating them like photographs wastes bytes

The genuinely unexpected finding was JPEG’s non-monotonic behaviour. On screenshots there are quality values where turning the slider up makes the image measurably worse. The assumption that a higher quality setting always produces a better result does not hold for text-heavy images.

Stop treating photographs and interface images with the same settings. That is what this measurement really amounts to.

Measurements were produced with the Pillow 12.3.0 encoders. Other encoders such as cwebp or mozjpeg will shift the numbers, including where the dips occur. SSIM approximates perceived quality and does not perfectly match what the eye sees.