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.