Image CDN or optimization pipeline is configured

Serving images as static files from public/ without an optimisation pipeline means every visitor — regardless of device, screen resolution, or browser — downloads the same full-resolution, original-format file. A desktop hero image at 2400×1600 sent to a mobile user at 375px width wastes 85–90% of the downloaded pixels. ISO-25010 resource-utilisation explicitly covers this kind of inefficiency: transferring significantly more data than the client can use. An image CDN or optimisation pipeline automatically serves WebP to browsers that support it (95%+), resizes to the requested display size, and compresses to the optimal quality — typically reducing hero image payload by 60–80% compared to an unoptimised JPEG.

Enable Next.js Image Optimization by using the <Image> component — on Vercel this is fully automatic and requires no additional configuration.

// next.config.ts — configure remote image sources if using a CMS
const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'cms.example.com' }
    ],
    formats: ['image/avif', 'image/webp'], // serve modern formats when supported
  }
}

For local builds without Vercel, install sharp to enable optimisation:

npm install sharp

For non-Next.js projects or CMS-driven images, use Cloudinary URL transformation:

<img
  src="https://res.cloudinary.com/account/image/upload/f_auto,q_auto,w_800/hero.jpg"
  alt="Hero"
/>

f_auto selects WebP/AVIF automatically; q_auto picks the optimal compression quality; w_800 resizes to the display width.