Image Optimization

Diese Regeln identifizieren Fehlkonfigurationen in der Next.js-Bildverarbeitung, die die Nutzung von Vercel Image Optimization erhöhen oder nicht optimierte Bilder ausliefern.

vercel-image-global-unoptimized

Erkennt images.unoptimized: true in next.config.

Warum es wichtig ist: Dadurch wird Vercel Image Optimization global deaktiviert. Alle Bilder werden unverändert ausgeliefert, ohne Größenanpassung, Formatkonvertierung oder Kompression — was Bandbreitenkosten erhöht und die Performance verschlechtert.

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

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

nextjs-image-missing-sizes

Erkennt <Image>-Komponenten mit fill aber ohne sizes-Attribut.

Warum es wichtig ist: Ohne sizes lädt der Browser das größte verfügbare Bild unabhängig von der Viewport-Breite. Das verschwendet Bandbreite und erhöht die Image-Optimization-Nutzung.

<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

Erkennt images.remotePatterns-Einträge mit zu breiten pathname-Mustern (/** oder ganz fehlend).

Warum es wichtig ist: Ungeschränkte Remote-Bildpfade erlauben jede URL auf dem Hostnamen zur Optimierung über dein Konto, was unerwartete Optimierungsnutzung durch User-Generated Content oder Third-Party-Embeds verursachen kann.

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

Erkennt <Image>-Komponenten mit SVG-src, die nicht die unoptimized-Prop haben.

Warum es wichtig ist: SVGs sind Vektorgrafiken und profitieren nicht von der Image-Optimization-Pipeline. Sie durch diese zu leiten verschwendet Optimierungs-Quota ohne Nutzen.

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

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