Image Optimization

これらのルールは、Next.jsの画像処理の設定ミスにより、Vercel Image Optimization の使用量が増えたり、最適化されていない画像が配信されるケースを特定します。

vercel-image-global-unoptimized

next.config 内の images.unoptimized: true を検出します。

Why it matters: これにより Vercel Image Optimization がグローバルで無効化されます。リサイズ、フォーマット変換、圧縮なしでそのまま配信され、帯域幅コストが増え、パフォーマンスも低下します。

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

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

nextjs-image-missing-sizes

fill を持つ <Image> コンポーネントで sizes 属性がないものを検出します。

Why it matters: sizes がないと、ブラウザはビューポート幅に関係なく最大サイズの画像をダウンロードします。帯域幅の無駄と Image Optimization の使用量増加につながります。

<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

images.remotePatterns で pathname パターンが広すぎるエントリ（/** または未指定）を検出します。

Why it matters: 制限のないリモート画像パスは、そのホスト名上の任意のURLをアカウント経由で最適化可能にし、ユーザー生成コンテンツやサードパーティ埋め込みによる予期しない最適化使用を招く可能性があります。

// 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

SVGの src を持つ <Image> コンポーネントで unoptimized プロップがないものを検出します。

Why it matters: SVGはベクターグラフィックであり、Image Optimization パイプラインの恩恵を受けません。パイプラインを通すと最適化クォータを消費するだけで効果がありません。

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

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