Performance
Modern image formats (WebP / AVIF)
WebP saves ~25–35% vs JPEG; AVIF saves ~50%. Either is supported by every browser that matters in 2026. Serving JPEG/PNG by default in 2026 is a self-inflicted byte tax.
What it is
WebP (Google, lossy + lossless, 2010) and AVIF (AV1-based, lossy + lossless, 2019) are next-generation raster image formats. Distinct from HTTP-level compression — these compress the image data itself. Both have universal browser support; AVIF has better ratios but encoder cost; WebP is the safe default. JPEG XL exists, has notably better quality, but Chrome dropped it and Safari shipped it — cross-browser support remains spotty.
Why it matters
Images are typically 50–70% of homepage weight. Cutting that in half with format conversion alone moves LCP, mobile data costs, and bounce rate measurably. Most CDNs (Cloudflare Polish, Fastly Image Optimizer, Cloudinary, imgix) do the conversion automatically — if yours doesn't, that's the signal to switch.
Who it applies to
Every site serving images — which is most.
How WQI scores it
Web Quality Index considers this standard satisfied when the supporting factor passes.
| # | Factor | Status |
|---|---|---|
| 32 | Image optimization (WebP/AVIF) | planned |
0 of 1 supporting factors are currently collected. Sites where the remaining 1 haven't been measured will show as partial or unknown on this standard until the data lands.
Related standards
- See also
- Compression , CWV , LCP , Resource hints
Other references
- guidance web.dev — Use WebP images
- guidance MDN — AVIF
Examples
<picture>
<source srcset="/hero.avif" type="image/avif" />
<source srcset="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1280" height="720" />
</picture>First match wins. Always include width and height to avoid CLS while the image loads.