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.

• ID: marketing-page-speed.infrastructure.image-cdn-pipeline

• Severity: high

• What to look for: An image CDN or optimization pipeline automatically serves images in the right format, size, and quality for each device and browser. Check: (1) next.config.* for images.domains or images.remotePatterns configuration (indicating remote image sources through Next.js Image Optimization), (2) Cloudinary, Imgix, or Bunny.net URLs in image sources, (3) Vercel Image Optimization (built-in with Next.js on Vercel), (4) @unpic/react or similar universal image optimization package, (5) sharp in dependencies (used by Next.js Image Optimization for local builds). Count all instances found and enumerate each.

• Pass criteria: Images are routed through an optimization pipeline that converts to WebP/AVIF and resizes on demand. This is satisfied by: Vercel + Next.js Image (automatic), Cloudinary, Imgix, or Bunny.net. At least 1 implementation must be confirmed.

• Fail criteria: Images are served as static files from public/ without any optimization pipeline. Browser receives full-resolution, original-format images regardless of device.

• Skip (N/A) when: Site has no images.

• Detail on fail: "No image CDN or optimization pipeline detected. Images served from public/ as static files — no format conversion, no responsive resizing. Each visitor downloads the same large file regardless of device."

• Remediation: Enable the image optimization pipeline for your hosting:

  // next.config.ts — Next.js Image Optimization (uses sharp locally)
  const nextConfig = {
    images: {
      // Allow images from your CMS or external sources
      remotePatterns: [
        { protocol: 'https', hostname: 'cms.example.com' }
      ],
      // Vercel Image Optimization handles format conversion automatically
      formats: ['image/avif', 'image/webp'],
    }
  }
  

  For non-Vercel hosting, add the sharp package for local optimization:

  npm install sharp
  

  Or use Cloudinary for hosted optimization:

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