Пошук уроків, статей та іншого контенту
Автоматичне стиснення, правильний формат і lazy loading зображень без ручної роботи.
Зображення — зазвичай найважчий тип ресурсу на сторінці. Звичайний <img> завантажує файл повного розміру, навіть якщо на екрані він показаний значно меншим, не адаптує формат під браузер користувача (WebP/AVIF менші за JPEG за тієї самої якості) і завантажується одразу, навіть якщо перебуває поза видимою областю екрана.
import Image from "next/image";
function ProductCard({ product }: { product: Product }) {
return (
<Image
src={product.imageUrl}
alt={product.name}
width={400}
height={300}
/>
);
}next/image автоматично: генерує кілька розмірів і віддає найпідходящий під реальний розмір показу й щільність пікселів екрана, конвертує у сучасні формати (WebP/AVIF) там, де браузер їх підтримує, і за замовчуванням лінькво завантажує зображення поза видимою областю екрана (lazy loading).
На відміну від звичайного <img>, Image вимагає width і height (або властивість fill для заповнення батьківського контейнера) — це дозволяє браузеру зарезервувати місце під зображення ще до його завантаження, запобігаючи зсуву вмісту сторінки (layout shift) під час завантаження.
Зображення, що першим потрапляє в поле зору (наприклад, головний банер), варто позначити priority — це вимикає lazy loading саме для нього й підвищує пріоритет його завантаження, покращуючи метрику Largest Contentful Paint:
<Image src={hero.src} alt={hero.alt} width={1200} height={600} priority />Для зображень із доменів поза власним проєктом (наприклад, аватари з S3-сховища) Next.js за замовчуванням відмовляється їх оптимізувати з міркувань безпеки — дозволені домени треба явно перелічити в конфігурації:
// next.config.ts
const nextConfig = {
images: {
remotePatterns: [{ protocol: "https", hostname: "cdn.example.com" }],
},
};Не вказувати width/height (і не використовувати fill) — зображення завантажується без зарезервованого місця, і сторінка «стрибає» під час завантаження.
Ставити priority на всі зображення сторінки — це вимикає lazy loading для всіх них одразу, зводячи нанівець саму оптимізацію; priority має лишатись винятком для 1-2 справді критичних зображень.
Забути додати домен у remotePatterns для зовнішніх зображень — Next.js відмовиться їх рендерити через компонент Image, поки домен не буде явно дозволений.
Компонент Image з next/image автоматично адаптує розмір і формат зображення під конкретний браузер і lazy-завантажує все поза видимою областю екрана. Обов'язкові width/height (або fill) запобігають зсуву вмісту при завантаженні, priority прискорює завантаження найважливішого зображення сторінки, а зовнішні домени потрібно явно дозволити в конфігурації.