Billedoptimering

Disse regler identificerer fejlkonfigurationer i Next.js' billedhåndtering, der øger brugen af Vercel Image Optimization eller serverer uoptimerede billeder.

vercel-image-global-unoptimized

Opdager images.unoptimized: true i next.config.

Hvorfor det er vigtigt: Dette deaktiverer Vercel Image Optimization globalt. Alle billeder serveres som de er, uden størrelsesændring, formatkonvertering eller komprimering — hvilket øger båndbreddeomkostninger og forringer ydeevnen.

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

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

nextjs-image-missing-sizes

Opdager <Image>-komponenter med fill men uden sizes-attribut.

Hvorfor det er vigtigt: Uden sizes downloader browseren det størst tilgængelige billede uanset viewport-bredde. Dette spilder båndbredde og øger brugen af 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

Opdager images.remotePatterns-poster med alt for brede pathname-mønstre (/** eller manglende).

Hvorfor det er vigtigt: Ubegrænsede remote billedstier tillader enhver URL på hostnavnet at blive optimeret via din konto, hvilket potentielt skaber uventet optimeringsforbrug fra brugergenereret indhold eller tredjepartsembeds.

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

Opdager <Image>-komponenter med en SVG src, der ikke har unoptimized-prop'en.

Hvorfor det er vigtigt: SVG'er er vektorgrafik og drager ikke fordel af Image Optimization-pipelinen. At køre dem igennem den spilder optimeringskvoten uden nogen fordel.

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

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