Оптимізація зображень

Ці правила виявляють некоректні налаштування обробки зображень у Next.js, що збільшують використання Vercel Image Optimization або віддають неоптимізовані зображення.

vercel-image-global-unoptimized

Виявляє images.unoptimized: true у next.config.

Чому це важливо: Це глобально вимикає 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

Виявляє компоненти <Image> з fill, але без атрибута sizes.

Чому це важливо: Без sizes браузер завантажує найбільше доступне зображення незалежно від ширини viewport. Це витрачає пропускну здатність та збільшує використання 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 (/** або відсутніми).

Чому це важливо: Необмежені шляхи віддалених зображень дозволяють будь-якій 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

Виявляє компоненти <Image> з SVG у src без пропа unoptimized.

Чому це важливо: SVG — це векторна графіка, яка не отримує переваг від конвеєра Image Optimization. Пропускання їх через нього витрачає квоту оптимізації без жодної користі.

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

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