Optimización de imágenes

Estas reglas identifican malconfiguraciones en el manejo de imágenes de Next.js que aumentan el uso de Vercel Image Optimization o sirven imágenes sin optimizar.

vercel-image-global-unoptimized

Detecta images.unoptimized: true en next.config.

Por qué importa: Esto desactiva Vercel Image Optimization globalmente. Todas las imágenes se sirven tal cual, sin redimensionar, convertir formato o comprimir — aumentando los costos de ancho de banda y perjudicando el rendimiento.

// 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> con fill pero sin atributo sizes.

Por qué importa: Sin sizes, el navegador descarga la imagen más grande disponible independientemente del ancho del viewport. Esto desperdicia ancho de banda y aumenta el uso de 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 images.remotePatterns con patrones pathname demasiado amplios (/** o ausentes).

Por qué importa: Las rutas de imágenes remotas sin restricciones permiten que cualquier URL en el hostname se optimice a través de tu cuenta, potencialmente generando uso inesperado de optimización por contenido generado por usuarios o embeds de terceros.

// 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> con src SVG que no tienen la prop unoptimized.

Por qué importa: Los SVG son gráficos vectoriales y no se benefician del pipeline de Image Optimization. Procesarlos consume cuota de optimización sin ningún beneficio.

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

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