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

Эти правила выявляют ошибки конфигурации обработки изображений в 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 браузер загружает самое большое доступное изображение независимо от ширины экрана. Это тратит трафик и увеличивает использование 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 />