next/image

next/image — это компонент, который автоматически оптимизирует изображения: сжимает, меняет формат, делает lazy loading и многое другое.

Плюсы

• ✅ Lazy loading по умолчанию
• ✅ Автоматическая оптимизация
• ✅ Автоматическое определение размеров
• ✅ Автоматический WebP/AVIF
• ✅ Блокирует место под изображение
• ✅ Автоматическая адаптация под экран

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

1
2
3
4
5
6
7
8
9
10
11
12
import Image from 'next/image';  export default function Avatar() {  return (    <Image      src="/avatar.jpg"           // Путь к изображению      alt="Аватар пользователя"   // Alt текст (обязателен!)      width={100}                 // Ширина в пикселях      height={100}                // Высота в пикселях    />  );}