Images use modern formats (WebP, AVIF) or Next/Image component

Serving legacy JPEG or PNG images without optimization adds hundreds of kilobytes to every page load that could be eliminated with no visual quality loss. WebP typically cuts image weight by 25–34% over JPEG, and AVIF by 50% over JPEG at equivalent quality — directly affecting Largest Contentful Paint (LCP), a Core Web Vitals metric Google uses for search ranking. On mobile connections, unoptimized images are the single largest contributor to slow page loads and high bounce rates. ISO 25010 performance-efficiency.resource-utilization classifies this as a resource waste that degrades end-user experience at scale.

Replace plain <img> tags with the Next.js Image component, or convert image files to WebP/AVIF and use <picture> elements for format fallback. For bulk conversion, run ImageMagick's convert input.jpg -quality 82 output.webp or pipe through a CI step. In Next.js:

import Image from 'next/image'

// Replaces: <img src="/hero.jpg" alt="Hero" />
<Image src="/hero.webp" alt="Hero" width={1200} height={630} priority />

// Or use <picture> for non-Next.js stacks
<picture>
  <source srcSet="/hero.avif" type="image/avif" />
  <source srcSet="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" alt="Hero" width={1200} height={630} />
</picture>