Image Optimization

These rules identify misconfigurations in Next.js image handling that increase Vercel Image Optimization usage or serve unoptimized images.

vercel-image-global-unoptimized

Detects images.unoptimized: true in next.config.

Why it matters: This disables Vercel Image Optimization globally. All images are served as-is, without resizing, format conversion, or compression — increasing bandwidth costs and hurting performance.

// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com" }],
  },
};

nextjs-image-missing-sizes

Detects <Image> components with fill but no sizes attribute.

Why it matters: Without sizes, the browser downloads the largest available image regardless of viewport width. This wastes bandwidth and increases Image Optimization usage.

<Image src="/hero.jpg" alt="Hero" fill />

<Image src="/hero.jpg" alt="Hero" fill sizes="(max-width: 768px) 100vw, 50vw" />

vercel-image-remote-pattern-too-broad

Detects images.remotePatterns entries with overly broad pathname patterns (/** or missing entirely).

Why it matters: Unrestricted remote image paths allow any URL on the hostname to be optimized through your account, potentially driving unexpected optimization usage from user-generated content or third-party embeds.

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com", pathname: "/**" }],
  },
};

// next.config.js
module.exports = {
  images: {
    remotePatterns: [{ hostname: "cdn.example.com", pathname: "/avatars/**" }],
  },
};

vercel-image-svg-without-unoptimized

Detects <Image> components with an SVG src that don't have the unoptimized prop.

Why it matters: SVGs are vector graphics and don't benefit from the Image Optimization pipeline. Running them through it wastes optimization quota without any benefit.

<Image src="/logo.svg" alt="Logo" width={100} height={40} />

<Image src="/logo.svg" alt="Logo" width={100} height={40} unoptimized />