Next-gen image formats WebP and AVIF served to modern browsers
Why it matters
WebP provides 25–34% smaller file sizes than JPEG at equivalent visual quality; AVIF provides 50% smaller sizes. Serving legacy JPEG or PNG to browsers that support modern formats wastes bandwidth on every image request (ISO-25010 resource-utilisation). A page with ten product images at 200 KB each becomes a page with ten images at 130 KB each in WebP — a 700 KB savings per page load that directly reduces LCP, speeds up the gallery render, and cuts mobile data costs for users.
Severity rationale
Medium because serving only JPEG/PNG wastes 25–50% of image transfer bytes on modern browsers that support WebP or AVIF, with compounding impact on image-heavy pages.
Remediation
Serve WebP or AVIF to capable browsers using <picture> with a JPEG/PNG fallback:
<picture>
<source srcset="/images/product.avif" type="image/avif">
<source srcset="/images/product.webp" type="image/webp">
<img src="/images/product.jpg" alt="Product" width="600" height="400">
</picture>
With Next.js, format conversion is automatic — next/image serves WebP or AVIF to supported browsers without any extra configuration:
<Image src="/images/product.jpg" alt="Product" width={600} height={400} />
For images outside next/image, configure an image CDN (Cloudinary, Imgix, or Vercel's built-in optimizer) to negotiate format via Accept header:
https://res.cloudinary.com/demo/image/upload/f_auto/product.jpg
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Performance Core Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- iso-25010:2011 · performance-efficiency.resource-utilization — Resource Utilisation
Taxons
History
- 2026-04-18·v1.0.0·Initial import from performance-core·automated