Оптимізація зображень (next/image) у Next.js

Компонент Image з next/image автоматично оптимізує зображення: конвертує у сучасні формати, обирає правильний розмір для пристрою та завантажує зображення з затримкою.

Чому не звичайний img

Звичайний <img> завантажує оригінальне зображення повністю, незалежно від розміру екрану. На мобільному пристрої те саме зображення розміром 2000px завантажується так само, як і на десктопі. Компонент Image вирішує цю проблему.

Основне використання

tsx

import Image from 'next/image'

export default function ProblemCard() {
  return (
    <Image
      src="/images/problem-preview.png"
      alt="Попередній перегляд проблеми на IT Lead"
      width={800}
      height={400}
    />
  )
}

Що робить Image під капотом

Конвертація формату

Автоматично конвертує у WebP або AVIF, якщо браузер їх підтримує. Це зменшує розмір файлу на 30-50%.

Зміна розміру на основі пристрою

Генерує кілька варіантів зображення різного розміру. Браузер завантажує лише відповідний варіант.

Завантаження з затримкою

За замовчуванням зображення завантажуються з затримкою: лише коли вони потрапляють у видиму область. Це прискорює початкове завантаження сторінки.

Запобігання CLS

Резервує місце для зображення перед його завантаженням, запобігаючи Cumulative Layout Shift.

Локальні зображення

Для локальних файлів Next.js автоматично визначає розміри:

tsx

import Image from 'next/image'
import banner from '@/public/images/ITLeadBanner.png'

export default function Hero() {
  return (
    <Image
      src={banner}
      alt="IT Lead"
      placeholder="blur"
    />
  )
}

placeholder="blur" показує розмитий попередній перегляд перед завантаженням. Для локальних зображень розмитий попередній перегляд генерується автоматично.

Заповнення контейнера (fill)

Коли розміри заздалегідь невідомі:

tsx

<div className="relative h-64 w-full">
  <Image
    src={user.avatar}
    alt={user.name}
    fill
    className="object-cover rounded-lg"
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</div>

Властивість fill розтягує зображення, щоб заповнити батьківський контейнер. sizes підказує браузеру, який варіант завантажити.

Властивість priority

Для зображень, що видно одразу:

tsx

<Image
  src="/images/hero.png"
  alt="Герой"
  width={1200}
  height={600}
  priority
/>

priority вимикає завантаження з затримкою та додає підказку preload. Використовуйте лише для LCP зображень (1-2 на сторінку).

Зовнішні зображення

Для зовнішніх URL потрібно налаштувати домени в next.config.js:

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com'
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com'
      }
    ]
  }
}

Безпека:

Завжди вказуйте точні домени в remotePatterns. Відкритий доступ до всіх доменів створює ризик зловживань через API оптимізації зображень.

Корисні ресурси

nextjs.org/docs — Оптимізація зображень
Посилання на API Image

Суміжні теми

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань