Как оптимизировать изображения в Next.js для повышения производительности

Изображения часто составляют 50-70% от общего размера веб-страницы, напрямую влияя на метрики Core Web Vitals, такие как Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS). Неправильная обработка изображений может снизить ваши показатели Lighthouse, увеличить показатель отказов и негативно повлиять на SEO-рейтинг — даже если ваш JavaScript идеально оптимизирован.

Это руководство охватывает оптимизацию изображений в Next.js с использованием встроенного компонента next/image, от базовой реализации до продвинутой интеграции с CDN и стратегий кэширования. Вы узнаете, как доставлять адаптивные, быстро загружающиеся изображения, которые улучшают как метрики производительности, так и пользовательский опыт.

Почему компонент next/image важен для производительности

Компонент next/image — это не просто обёртка вокруг HTML-тега <img> — это автоматизированный конвейер оптимизации, который берёт на себя тяжёлую работу по современной доставке изображений.

Основные функции производительности

Автоматическая конвертация форматов: Next.js предоставляет форматы WebP и AVIF, когда браузеры их поддерживают, уменьшая размер файлов на 25-35% по сравнению с JPEG/PNG без потери качества.

Генерация адаптивных изображений: Компонент создаёт несколько размеров изображений во время сборки или по требованию, гарантируя, что пользователи мобильных устройств не загружают изображения размером для десктопа.

Встроенная ленивая загрузка: Изображения ниже видимой области экрана загружаются только тогда, когда пользователи прокручивают страницу к ним, уменьшая начальный вес страницы и улучшая First Contentful Paint (FCP).

Предотвращение смещения макета: Требуя свойства width и height (или используя свойство fill), компонент резервирует место до загрузки изображений, устраняя проблемы с CLS.

Базовая реализация и основные свойства

Начните с простой реализации, которая покрывает 80% случаев использования:

import Image from 'next/image'

export default function Hero() {
  return (
    <Image
      src="/hero-banner.jpg"
      alt="Product showcase"
      width={1200}
      height={600}
      priority // Load immediately for LCP optimization
    />
  )
}

Когда использовать ключевые свойства

priority: Добавьте это к изображениям в верхней части экрана, которые влияют на LCP. Оно отключает ленивую загрузку и добавляет ссылку для предзагрузки. Используйте экономно — только для 1-2 критических изображений на страницу.

sizes: Необходимо для адаптивных изображений. Сообщает браузеру, какой размер изображения загружать в зависимости от ширины области просмотра:

<Image
  src="/product.jpg"
  alt="Product"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
/>

placeholder=“blur”: Отображает низкокачественный плейсхолдер во время загрузки основного изображения. Для статических импортов Next.js генерирует blurDataURL автоматически:

import heroImage from '@/public/hero.jpg'

<Image
  src={heroImage}
  alt="Hero"
  placeholder="blur"
  // blurDataURL generated automatically for static imports
/>

Настройка удалённых изображений с помощью remotePatterns

Для изображений из внешних источников настройте remotePatterns в next.config.js (старая настройка domains устарела):

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
        pathname: '/images/**',
      },
    ],
  },
}

Эта функция безопасности предотвращает вредоносные запросы изображений, разрешая при этом конкретные внешние источники.

Продвинутая оптимизация с CDN и пользовательскими загрузчиками

Для высоконагруженных приложений интегрируйте специализированные CDN для изображений, такие как Cloudinary или Imgix, используя пользовательские загрузчики:

// lib/imageLoader.js
export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://res.cloudinary.com/demo/image/upload/${params.join(',')}/${src}`
}

// Component usage
<Image
  loader={cloudinaryLoader}
  src="product.jpg"
  alt="Product"
  width={400}
  height={300}
/>

Стратегия кэширования для оптимальной производительности

Next.js по умолчанию устанавливает агрессивные заголовки кэширования:

Cache-Control: public, max-age=31536000, immutable

Для динамического контента переопределите их в next.config.js:

module.exports = {
  async headers() {
    return [
      {
        source: '/_next/image(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, stale-while-revalidate=604800',
          },
        ],
      },
    ]
  },
}

Лучшие практики для продакшена

Измеряйте влияние реальными данными: Используйте Lighthouse и WebPageTest для отслеживания улучшений LCP. Правильно оптимизированное главное изображение может сократить LCP на 1-2 секунды.

Балансируйте качество и размер файла: Установите quality={75} в качестве отправной точки. Тестируйте визуальное качество относительно экономии размера файла — снижение со 100 до 75 часто экономит 40% с минимальным визуальным воздействием.

Обрабатывайте разные типы изображений соответствующим образом: Используйте unoptimized для SVG и уже оптимизированных ресурсов:

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

TypeScript для типобезопасности: Импортируйте изображения для автоматического определения размеров и проверки типов:

import type { StaticImageData } from 'next/image'
import productImage from '@/public/product.jpg'

interface ProductCardProps {
  image: StaticImageData
  alt: string
}

Распространённые проблемы и их решение

Ошибка “Invalid src prop”: Убедитесь, что удалённые домены настроены в remotePatterns или используйте пользовательский загрузчик.

Размытые изображения на дисплеях с высоким разрешением: Проверьте, что исходные изображения как минимум в 2 раза больше размера отображения, и избегайте агрессивных настроек качества ниже 70.

Увеличение времени сборки: Для сайтов с сотнями изображений рассмотрите использование оптимизации по требованию вместо обработки во время сборки или реализуйте пользовательский загрузчик с внешним сервисом.

Заключение

Оптимизация изображений в Next.js через компонент next/image обеспечивает немедленные преимущества производительности при минимальной настройке. Начните с основ — правильного размера, ленивой загрузки и конвертации форматов — затем добавляйте продвинутые техники, такие как интеграция с CDN и пользовательские загрузчики, по мере масштабирования вашего трафика.

Ключ в том, чтобы измерять реальное влияние: правильно оптимизированные изображения могут улучшить LCP на 50%, снизить затраты на трафик на 60% и значительно повысить ваши показатели Core Web Vitals. Сосредоточьтесь сначала на изображениях в верхней части экрана, затем систематически оптимизируйте остальную часть вашего конвейера изображений.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.