Shipping WebP: Quality, Coverage, and the Road to AVIF
One quality setting per source format, the 3% browser gap, zero CDN changes, and the milestone plan to add AVIF behind a picture fallback.
One quality setting does not fit all sources
We ran the full experiment suite at two quality settings: q80 and q95. Both data sets point to the same conclusion. A single global q value is not the best option. The reason: the same q means different things for different source types.
A lossy source (JPEG, GIF) holds limited detail. At q95 the encoder spends bytes on detail the original does not have. The savings drop hard, and the size ladder (an automatic step-down to keep the output smaller than the input) triggers often.
A lossless source (PNG) is quality-sensitive. At q95 the savings stay large because the original has full detail to compress.
The numbers make this concrete:
| Conversion | Recommended q | Size reduction (p50) | SSIM (p50) | Why |
|---|---|---|---|---|
| JPEG → WebP | q80 | 47.1% | 0.979 | At q95 savings drop to 13.5%. The size ladder triggers on 9 of 25 files. |
| GIF → WebP | q80 | 51.0% | 0.980 | At q95 savings drop to 10.7%. The size ladder triggers on 10 of 25 files. |
| PNG → WebP | q95 | 71.3% | 0.994 | At q80 savings rise to 82.9% but SSIM drops to 0.982. PNG deserves the extra quality. |
Rule of thumb: q80 for lossy sources, q95 for lossless. Detect the source format at upload, then pick the quality.
The q (quality setting) is the encoder knob from 0 to 100. A higher value keeps more detail and produces a larger file. SSIM (Structural Similarity) measures visual closeness on a 0-to-1 scale. Above 0.95, most people see no difference.
The 3% coverage gap
Hard replacement means serving only .webp with no fallback. A browser that does not support WebP shows a broken image. That impression is lost.
Who is in the 3% gap (caniuse global estimate):
- IE 11. End of support was June 2022, but some enterprise environments still run it.
- Safari 13 and older. iOS and macOS devices from before 2019.
Before launch, read the user-agent distribution from your own traffic. The real gap for your audience can be far below the global 3%. Most ad traffic today runs on modern Chrome and Safari, where WebP has full support.
What changes to go live
The change is small. Only the image conversion service needs a new export branch.
Three steps:
- Add WebP output to the conversion service. Today the export function has no WebP or AVIF branch and falls through to JPEG. Add the WebP case.
- libvips supports animated WebP natively. No extra tool is needed. (Animated AVIF needs a separate ffmpeg path. See Part 01 for the pitfall.)
- Set the quality per source type. q80 for JPEG and GIF. q95 for PNG. Detect the source format at upload time.
The CDN, load balancer, and object storage routing all stay untouched. The .webp file goes into the same storage bucket, and the CDN serves it the same way it serves a .jpg. No property changes, no routing rules, no cache invalidation.
Next milestones: the road to AVIF
WebP is milestone 1 (M1). The benchmark data supports two more steps. Each step builds on the one before it.
M2: <picture> fallback + conditional AVIF
The <picture> element lists formats in order. The browser picks the first one it supports.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>This pattern has three benefits:
- Coverage gap drops to 0. Every browser gets a format it can decode.
- AVIF goes to capable devices only. Chrome 85+, Firefox 93+, Safari 16.4+ get the smaller AVIF. The rest get WebP or the original.
- No broken images. The fallback is automatic and invisible to the user.
AVIF compresses more than WebP (see Part 02), but its decode cost is higher. Serving it only to devices that support it is the safe approach.
M3: CDN format negotiation
The CDN reads the Accept header from the browser and picks the best format. The markup stays as a plain <img> tag. The CDN property is managed as infrastructure-as-code, so adding the negotiation rule is a settings change.
This is the cleanest long-term solution, but it requires CDN-level changes. M1 and M2 come first.
Related: Back to the Image Format Benchmark overview, or read Part 01: GIF to Animated WebP and Part 02: WebP vs AVIF.
References:
- https://caniuse.com/webp (WebP browser support, 97%)
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture (MDN picture element)
- https://web.dev/articles/serve-images-webp (web.dev serving WebP)