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.
Low because format optimization is a performance multiplier rather than a blocking defect — sites function correctly without it, but every page with unoptimized images pays a measurable performance tax.
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: seo-advanced.technical-seo.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
/>