The short answer
| Image type | Recommended quality | Why |
|---|---|---|
| Photographs (blog, products, portfolio) | 75–82 | Visually lossless at normal sizes; biggest savings |
| Hero / background images | 60–72 | Partially covered by text; softness is acceptable |
| Screenshots and UI | 85–92 | Keeps text edges and flat colours clean |
| Logos, icons, diagrams | 90–95 | Sharp lines matter more than bytes |
| Thumbnails (< 300 px) | 70–78 | Small display size hides artifacts |
| Re-compressing an existing WebP/JPEG | 80–88 | Avoid stacking losses |
Why 80 is the default
WebP's quality parameter is not linear. Between 100 and 85 the file shrinks quickly with essentially no perceptible change, because the encoder mostly drops noise that human vision cannot see. Between 85 and 75 you still shed bytes fast with only tiny, hard-to-spot differences. Below 70 the curve flattens: each step saves fewer bytes and artifacts (smoothed textures, ringing on edges) begin to show. Quality 80 sits at the knee of that curve, which is why Google's own documentation and most CDNs default to it.
Typical results for a 2000 px photograph (5.1 MB original PNG export)
| Quality | File size | Visual result |
|---|---|---|
| 100 | 1.9 MB | Identical |
| 95 | 890 KB | Identical |
| 90 | 610 KB | Identical |
| 85 | 470 KB | Indistinguishable at 100% zoom |
| 80 | 390 KB | Indistinguishable at normal viewing |
| 70 | 300 KB | Very slight softening in fine texture |
| 60 | 245 KB | Softening visible when zoomed |
| 40 | 165 KB | Visible artifacts |
Width matters more than quality
Halving the width of an image removes 75% of its pixels. A 4000 px phone photo displayed in a 1200 px column is wasting more than 90% of its bytes regardless of the quality setting. Always set the maximum width to the largest size the image is actually displayed at (times 2 if you care about Retina screens). This is why the converter exposes both controls side by side.
How to judge quality yourself
- Convert the same image at 90, 80 and 70.
- Open the results at the size they will actually be displayed, not at 300% zoom.
- Look at the hardest areas: skin, sky gradients, fine text, hair.
- Pick the lowest setting where you cannot tell the difference, then add 5 as a safety margin.