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

Отдаём картинки правильного размера и формата автоматически — без ручной возни.

next/image — встроенный компонент Image, который автоматически ресайзит, сжимает, отдаёт современный формат (WebP/AVIF) и лениво грузит изображения, заметно ускоряя загрузку страницы.

Чем плох обычный <img>

С тегом <img> браузер качает картинку «как есть»: исходный размер и формат. На мобильном это лишние мегабайты, прыжки вёрстки при загрузке и медленный первый экран. next/image решает это автоматически.

Базовое использование

Импортируем Image и указываем размеры — они обязательны, чтобы зарезервировать место и избежать «прыжка» вёрстки:

import Image from "next/image";

export default function Avatar() {
  return (
    <Image
      src="/avatar.png"
      alt="Аватар пользователя"
      width={96}
      height={96}
    />
  );
}

Что делает компонент

Оптимизация	Эффект
Ресайз под устройство	Мобайлу — маленькая версия, десктопу — большая
Современный формат	WebP/AVIF вместо тяжёлого JPEG/PNG
Ленивая загрузка	Картинки вне экрана грузятся при прокрутке
Резерв места	Нет «прыжка» вёрстки при появлении картинки

Внешние картинки

Если источник — чужой домен, его нужно явно разрешить в next.config.js, иначе Next.js откажется оптимизировать (это защита от произвольных URL):

{
  "images": {
    "remotePatterns": [
      { "protocol": "https", "hostname": "cdn.example.com" }
    ]
  }
}

Оценим экономию трафика

Прикинем, сколько весит картинка в исходном PNG и в оптимизированном WebP нужного размера:

const originalKb = 800;        // большой PNG
const resizedFactor = 0.25;    // ресайз под карточку
const webpFactor = 0.4;        // WebP компактнее

const optimized = Math.round(originalKb * resizedFactor * webpFactor);
console.log("Было, КБ:", originalKb);
console.log("Стало, КБ:", optimized);

Вывод:

Было, КБ: 800
Стало, КБ: 80

Итог

next/image сам ресайзит, сжимает и лениво грузит картинки.
width и height обязательны — резервируют место и убирают «прыжок» вёрстки.
Внешние домены картинок разрешают в next.config.js через remotePatterns.