Otimização de Imagem

Essas regras identificam configurações incorretas no tratamento de imagens do Next.js que aumentam o uso da Vercel Image Optimization ou servem imagens não otimizadas.

vercel-image-global-unoptimized

Detecta images.unoptimized: true em next.config.

Por que importa: Isso desabilita a Vercel Image Optimization globalmente. Todas as imagens são servidas como estão, sem redimensionamento, conversão de formato ou compressão — aumentando custos de largura de banda e prejudicando a performance.

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

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

nextjs-image-missing-sizes

Detecta componentes <Image> com fill mas sem atributo sizes.

Por que importa: Sem sizes, o navegador baixa a maior imagem disponível independentemente da largura da viewport. Isso desperdiça largura de banda e aumenta o uso da 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

Detecta entradas em images.remotePatterns com padrões pathname muito amplos (/** ou ausentes).

Por que importa: Caminhos remotos de imagens sem restrição permitem que qualquer URL no hostname seja otimizada pela sua conta, potencialmente gerando uso inesperado de otimização por conteúdo gerado por usuários ou embeds de terceiros.

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

Detecta componentes <Image> com src SVG que não têm a prop unoptimized.

Por que importa: SVGs são gráficos vetoriais e não se beneficiam do pipeline de Image Optimization. Processá-los por ele desperdiça cota de otimização sem benefício algum.

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

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