Next-gen image formats WebP and AVIF served to modern browsers

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.

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: 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