All images optimized with next-gen formats and fallbacks

Raw <img> tags serving JPEG or PNG without WebP/AVIF fallbacks transfer 30–80% more bytes than equivalent next-gen formats for the same visual quality, directly inflating page weight past mobile performance thresholds. iso-25010:2011 performance-efficiency.resource-utilisation is the relevant dimension — unoptimized images are the single most common cause of mobile Lighthouse Performance scores below 60. For findability, page weight correlates with Time to First Byte and crawl efficiency: Google's crawler has bandwidth budgets per domain, and heavy pages consume more of that budget per crawl.

Migrate raw <img> tags to next/image in your page and component files. Configure next.config.js to serve AVIF and WebP automatically:

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
  },
}

For images sourced from an external CMS or CDN, add the domain to images.remotePatterns. For any images that cannot use next/image (e.g., in markdown content), pre-convert with npx @squoosh/cli --webp -d output/ input/*.jpg as part of your content pipeline. Confirm the format switch with curl -H "Accept: image/avif" https://yoursite.com/image and inspect the Content-Type response header.

• ID: image-formats

• Severity: low

• What to look for: Count all image references across the codebase. Enumerate how many use next/image (automatic format optimization), <picture> elements with <source> for format variants, or srcset attributes. Count how many use raw <img> tags with only legacy formats (JPEG, PNG, GIF). At least 80% should use modern format delivery.

• Pass criteria: At least 80% of images use next/image, <picture> with WebP/AVIF <source>, or an image CDN that auto-optimizes formats. No single image exceeds 1 MB without optimization. Report: "X of Y images use modern format delivery."

• Fail criteria: Fewer than 80% of images use modern format delivery, or at least 1 image exceeds 1 MB without optimization.

• Skip (N/A) when: No images present in any page component.

• Detail on fail: "5 of 20 images use next/image (25%); remaining 15 are raw <img> with JPEG/PNG only" or "Banner image 5.2 MB uncompressed without optimization".

• Remediation: Use next/image in your components or a tool like Cloudinary to serve next-gen formats with fallbacks:

  import Image from 'next/image'
  
  <Image
    src="/image.webp"
    alt="Description"
    width={800}
    height={600}
    priority
  />