Пошук уроків, статей та іншого контенту
Розглянете компонент next/image, його синтаксис, основні пропси та відмінності від стандартного HTML-елемента img.
next/imagenext/image — це компонент Next.js для відображення зображень. Він розширює стандартний HTML-елемент <img> і автоматизує частину типових задач:
оптимізує розмір зображення;
створює адаптивні варіанти для різних екранів;
підтримує сучасні формати, якщо їх підтримує браузер;
завантажує зображення із затримкою за потреби;
допомагає уникати зміщення вмісту сторінки під час завантаження;
перевіряє, що для зображення вказані необхідні параметри.
Компонент потрібно імпортувати з next/image:
import Image from "next/image";<Image
src="/images/avatar.jpg"
alt="Портрет користувача"
width={200}
height={200}
/>Основні пропси:
src — шлях або URL зображення;
alt — альтернативний текст;
width — ширина зображення;
height — висота зображення.
На відміну від HTML-елемента <img>, для next/image зазвичай потрібно вказати width і height. Це дає Next.js змогу заздалегідь розрахувати місце для зображення та не зміщувати інші елементи сторінки після його завантаження.
width і height визначають пропорції зображення. Вони не обов’язково означають, що зображення завжди відображатиметься саме в такому фізичному розмірі. Остаточний розмір також може змінюватися за допомогою CSS.
publicФайл, розташований у каталозі public, доступний від кореня сайту.
Наприклад, якщо файл має шлях:
public/images/logo.pngйого можна використати так:
<Image
src="/images/logo.png"
alt="Логотип компанії"
width={240}
height={80}
/>У значенні src не потрібно вказувати public.
Зображення можна імпортувати безпосередньо у файл компонента:
import Image from "next/image";
import avatar from "./avatar.jpg";
export default function Profile() {
return (
<Image
src={avatar}
alt="Портрет користувача"
/>
);
}Під час статичного імпорту Next.js може автоматично отримати розміри зображення. Тому width і height у цьому випадку зазвичай не потрібні.
Такий підхід працює для локальних файлів, наприклад jpg, png, webp або avif, залежно від налаштувань проєкту та підтримки Next.js.
Для зовнішнього URL потрібно передати рядок у src:
<Image
src="https://images.example.com/photo.jpg"
alt="Пейзаж"
width={1200}
height={800}
/>Домен зовнішнього зображення потрібно явно дозволити в конфігурації Next.js. Наприклад:
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: "images.example.com",
},
],
},
};
module.exports = nextConfig;Після зміни next.config.js потрібно перезапустити сервер розробки.
Якщо зовнішній домен не дозволений, Next.js покаже помилку під час обробки зображення.
altПроп alt описує зображення для користувачів, які не можуть його побачити, і для технологій доступності.
<Image
src="/images/product.jpg"
alt="Чорний рюкзак із передньою кишенею"
width={600}
height={400}
/>Альтернативний текст має описувати зміст або призначення зображення, а не просто повідомляти, що це «картинка».
Якщо зображення є декоративним і не додає змісту, використовуйте порожній рядок:
<Image
src="/images/decorative-line.png"
alt=""
width={800}
height={4}
/>Не варто використовувати текст на кшталт alt="image" або alt="photo".
fillІноді потрібно, щоб зображення повністю заповнювало батьківський елемент. Для цього використовується проп fill.
<div className="image-wrapper">
<Image
src="/images/cover.jpg"
alt="Гірський пейзаж"
fill
style={{ objectFit: "cover" }}
/>
</div>Батьківський елемент повинен мати:
позиціонування position: relative;
визначену висоту або співвідношення сторін.
Наприклад:
.image-wrapper {
position: relative;
width: 100%;
height: 320px;
}Без висоти батьківський елемент може мати нульову висоту, і зображення не буде видимим.
fill фактично позиціонує зображення всередині батьківського елемента. Властивість object-fit визначає, як саме зображення вписується в доступний простір:
cover — заповнює весь контейнер, частина зображення може обрізатися;
contain — показує все зображення, але можуть з’явитися вільні області.
sizesКоли зображення адаптивне, браузеру потрібно повідомити, яку ширину воно матиме на різних екранах. Для цього використовується sizes.
<div className="card-image">
<Image
src="/images/article.jpg"
alt="Ноутбук на робочому столі"
fill
sizes="(max-width: 768px) 100vw, 50vw"
style={{ objectFit: "cover" }}
/>
</div>Значення означає:
на екранах до 768px зображення займає всю ширину області перегляду;
на більших екранах зображення займає приблизно половину області перегляду.
Без sizes браузер може вважати, що адаптивне зображення займає всю ширину екрана, і завантажити більший файл, ніж потрібно.
Приклад CSS для цього компонента:
.card-image {
position: relative;
width: 100%;
height: 240px;
}Нижче наведено компонент картки статті. Файл article.jpg має розташовуватися за шляхом public/images/article.jpg.
import Image from "next/image";
export default function ArticleCard() {
return (
<article className="article-card">
<div className="article-card__image">
<Image
src="/images/article.jpg"
alt="Розробник працює за ноутбуком"
fill
sizes="(max-width: 700px) 100vw, 320px"
style={{ objectFit: "cover" }}
/>
</div>
<div className="article-card__content">
<h2>Як працює оптимізація зображень</h2>
<p>
Компонент next/image допомагає завантажувати відповідні зображення
для різних розмірів екрана.
</p>
</div>
</article>
);
}Відповідні стилі:
.article-card {
max-width: 640px;
overflow: hidden;
border: 1px solid #d1d5db;
border-radius: 12px;
}
.article-card__image {
position: relative;
width: 100%;
height: 280px;
}
.article-card__content {
padding: 20px;
}Зображення, які не перебувають одразу у видимій частині сторінки, зазвичай завантажуються із затримкою. Це називається lazy loading.
Такий підхід допомагає:
зменшити обсяг даних під час першого завантаження;
швидше показати основний вміст;
не завантажувати одразу зображення, до яких користувач ще не прокрутив сторінку.
Для головного зображення сторінки або важливого зображення у верхній частині сторінки можна використати priority:
<Image
src="/images/hero.jpg"
alt="Головний банер сайту"
width={1200}
height={600}
priority
/>priority потрібно використовувати лише для кількох справді важливих зображень, а не для всіх зображень на сторінці.
<img><img
src="/images/photo.jpg"
alt="Міський пейзаж"
width="800"
height="500"
/>Браузер напряму завантажує файл, указаний у src. Розробник сам відповідає за:
вибір потрібного розміру зображення;
адаптивність;
оптимізацію формату;
запобігання зміщенню вмісту;
правила відкладеного завантаження.
next/image<Image
src="/images/photo.jpg"
alt="Міський пейзаж"
width={800}
height={500}
/>Next.js може автоматизувати оптимізацію зображення та підготувати відповідний варіант для клієнта.
Основні відмінності:
Image імпортується з next/image;
проп alt є обов’язковим;
для рядкового шляху зазвичай потрібні width і height;
зовнішні джерела потрібно дозволити в конфігурації;
доступні fill, sizes та інші можливості для адаптивних зображень;
Next.js може оптимізувати зображення під час запиту.
next/image не є просто перейменованим <img>. Це компонент React із додатковою логікою, тому його властивості та правила використання відрізняються від HTML-елемента.
width і height<Image
src="/images/photo.jpg"
alt="Фото"
/>Для рядкового локального шляху Next.js не знає розміри зображення. Додайте їх:
<Image
src="/images/photo.jpg"
alt="Фото"
width={800}
height={500}
/>Або використайте статичний імпорт.
<Image
src="https://cdn.example.com/photo.jpg"
alt="Фото"
width={800}
height={500}
/>Якщо домен не вказано в images.remotePatterns, Next.js не дозволить завантажити це зображення.
fill використано без розмірів батьківського елемента<div className="wrapper">
<Image src="/images/photo.jpg" alt="Фото" fill />
</div>Переконайтеся, що контейнер має position: relative і висоту:
.wrapper {
position: relative;
height: 300px;
}sizes для адаптивного зображенняЯкщо використовується fill або CSS змінює ширину зображення, додайте sizes, щоб браузер міг вибрати відповідний файл.
<Image
src="/images/photo.jpg"
alt="Фото"
fill
sizes="100vw"
/>Опис alt="Картинка" не допомагає зрозуміти зміст зображення. Використовуйте конкретний опис або порожній alt="" для декоративного зображення.
next/image — компонент Next.js для оптимізованої роботи із зображеннями.
Компонент імпортується з next/image.
Основні пропси — src, alt, width і height.
Локальні файли можна зберігати в public або підключати через статичний імпорт.
Для зовнішніх URL потрібно налаштувати remotePatterns.
fill дає змогу заповнити батьківський контейнер, але контейнеру потрібні позиціонування та розмір.
sizes допомагає браузеру вибрати відповідний варіант адаптивного зображення.
alt потрібен для доступності.
next/image автоматизує оптимізацію, яку у випадку <img> потрібно налаштовувати самостійно.