Your export dialog gives you a WebP quality slider from 0 to 100, a checkbox for lossless mode, and not much else to go on. Set it too high and you barely save any bytes over your old JPEGs. Set it too low and your hero image looks smudged on a retina display. Most people either leave the default in place or drag the slider to "looks fine" and move on — without ever testing whether a different number would have saved another 30% for free.
WebP is genuinely one of the best format choices you can make for a website, but only if the settings behind it are actually tuned to the image in front of you. The good news is that the right settings aren't a matter of taste — a handful of clear rules cover almost every situation you'll run into.
For most web images, use lossy WebP at quality 75–85 — it's visually close to lossless while cutting file size well below JPEG. Use lossless WebP only for logos, icons, and graphics that need pixel-perfect edges or transparency. Drop to quality 60–70 for large background or hero images where size matters more than fine detail, and go above 85 only for zoomable product photography.
What are WebP settings, actually?
"WebP settings" really means three separate decisions, and mixing them up is where most confusion comes from.
- Compression mode (lossy vs. lossless) — lossy WebP discards imperceptible detail to shrink files aggressively, similar in spirit to JPEG but noticeably more efficient. Lossless WebP preserves every pixel exactly, similar to PNG, and is the only mode that guarantees zero quality loss.
- Quality level (0–100) — only applies in lossy mode. It controls how aggressively detail is discarded. Higher numbers keep more detail and produce larger files; lower numbers shrink files further at the cost of visible softness or blocking in busy areas.
- Alpha / transparency handling — WebP supports a full alpha channel in both modes. Lossy WebP with alpha compresses the transparency mask separately from the color data, which is efficient but can slightly soften transparent edges compared to lossless.
The practical upshot: picking "the best WebP settings" isn't one universal number — it's matching the compression mode to whether the image needs transparency or pixel accuracy, then tuning the quality slider to the content and how the image will actually be viewed.
Why the right settings matter
Getting WebP settings wrong doesn't just waste a few kilobytes — it shows up as visible problems or real performance costs:
- Page speed. Sites already using JPEG or PNG often see 25–35% smaller file sizes just from switching to correctly tuned lossy WebP, directly improving Largest Contentful Paint on mobile.
- Wasted savings. Defaulting to lossless WebP for photographs throws away most of the format's advantage — you end up with a file barely smaller than PNG when a lossy export at quality 80 would have been a fraction of the size.
- Visible artifacts. Pushing quality too low on detailed images introduces blocky compression artifacts, especially around text, fine textures, and high-contrast edges — exactly the areas users notice first.
- Bandwidth and storage costs at scale. Across a large catalog or CDN, a poorly chosen default quality setting multiplies wasted bytes across thousands of images.
Step-by-step: dialing in the best WebP settings
- Decide if the image needs transparency or pixel-perfect edges. Logos, icons, UI screenshots, and line art should default to lossless WebP. Everything else — photos, banners, textures — is a candidate for lossy.
- Start lossy quality at 80. This is the reliable starting point for photographic content: close to visually lossless, with a major size reduction already locked in.
- Adjust down for large, low-detail images. Full-width hero banners, background textures, and blurred or soft-focus images can usually drop to quality 65–70 with no visible difference, since there's less fine detail to lose in the first place.
- Adjust up for images users will zoom into. Product photography with a zoom feature, portfolio images, or anything displayed large and sharp should stay at quality 85–92 to protect fine detail.
- Use lossless mode for anything with text or flat color. Screenshots, diagrams, and UI mockups compress poorly under lossy settings — sharp edges and text turn soft or blocky. Lossless WebP handles this content type efficiently and keeps it crisp.
- Check the alpha channel separately if transparency is involved. If a lossy WebP with transparency shows soft or fuzzy edges around the transparent area, switch that specific image to lossless — the size difference is usually small for icon-sized graphics.
- Compare against the original at real display size. Always judge quality at the size the image will actually render on the page, not zoomed in — compression artifacts that are obvious at 400% zoom are frequently invisible at normal viewing size.
- Batch-test a few quality values before committing to a site-wide default. Export the same representative image at quality 70, 80, and 90, compare file size and visual quality side by side, and pick the lowest value where you can't spot a difference.
Common mistakes that waste quality or file size
1. Using lossless WebP for every image "to be safe"
Lossless mode feels like the cautious choice, but for photographs it throws away most of WebP's advantage — you end up with a file that's barely smaller than a well-compressed PNG, when lossy quality 80 would have cut the size by 60–80% with no visible difference.
2. Leaving quality at the tool's default without checking it
Many export tools default to quality 75 or even lower, tuned for generic use rather than your specific image. A default that's fine for a small thumbnail can look visibly soft on a large hero image. Always verify the default against the actual image and display size.
3. Compressing an already-compressed JPEG into WebP at high quality
Converting a heavily compressed JPEG to WebP at quality 90 doesn't recover the detail the JPEG already discarded — it just re-encodes the existing artifacts, sometimes making them more visible. Best results come from converting a high-quality source image directly to WebP, not from re-compressing a lossy file.
4. Ignoring transparency edge quality on lossy exports
Lossy WebP with an alpha channel can introduce slight softness or halo effects around transparent edges, especially on small icons. If edges look fuzzy, switch that image to lossless — the file size difference for small graphics is usually negligible.
Real-world examples
These are representative results from exporting the same source images as WebP at different settings, compared against their original JPEG or PNG:
The pattern holds consistently: photographic and gradient-heavy content compresses dramatically well under lossy WebP at moderate quality, while flat-color, text-heavy, or transparency-critical content is better served by lossless mode.
WebP quality settings comparison table
A quick reference for which quality range and mode to reach for based on content type.
| Use case | Recommended mode | Quality range |
|---|---|---|
| General web photos | Lossy | 75–85 |
| Full-width hero / background images | Lossy | 60–70 |
| Zoomable product photography | Lossy | 85–92 |
| Logos and icons | Lossless | N/A |
| Screenshots and UI mockups | Lossless | N/A |
| Transparent graphics with soft gradients | Lossy (with alpha) | 80–90 |
| Thumbnails / gallery grids | Lossy | 65–75 |
Convert to WebP with the right settings — free
The Rebrixe Image Converter runs entirely in your browser. Convert JPEG or PNG to WebP with an adjustable quality slider, or export lossless WebP for graphics — your images are never uploaded to a server. No account, no file size limit, no watermarks.