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.
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.
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
ID: performance-core.image-media-optimization.next-gen-formats
Severity: medium
What to look for: Count all relevant instances and enumerate each. Check image serving strategy. Look for <picture> elements with WebP/AVIF <source> tags, or image CDN configuration (next/image, cloudinary, imgix) that auto-converts formats. Examine build output or image delivery pipeline for format negotiation based on browser support.
Pass criteria: Images are served in WebP or AVIF to modern browsers with fallback to JPEG/PNG. Either <picture> elements are used with format sources, or an image optimization service (next/image, CDN) handles format conversion automatically.
Fail criteria: Only JPEG/PNG served regardless of browser support, or WebP/AVIF is available but not served to capable browsers. File sizes are not reduced relative to legacy formats.
Skip (N/A) when: The project has no images or uses only SVG/vector graphics.
Detail on fail: Specify the formats being served. Example: "All JPEGs served without WebP alternative. Modern browsers capable of WebP still download 3x larger JPEG files. No image optimization service detected" or "next/image configured but JPEG still used instead of automatic WebP/AVIF conversion".
Remediation: WebP and AVIF provide 20-35% better compression than JPEG/PNG. Serve them to modern browsers:
Using <picture>:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Image">
</picture>
Or use Next.js Image (auto-converts):
<Image src="/image.jpg" alt="Image" width={600} height={400} />
Or configure an image CDN to auto-optimize:
https://images.example.com/image.jpg?format=auto&w=600