Пошук уроків, статей та іншого контенту
Визначите правильні розміри зображень і оберете формати WebP та AVIF для швидшого завантаження.
Розмір зображення має два значення:
розміри в пікселях — наприклад, 1200 × 800;
розмір файлу — наприклад, 180 КБ.
Ці значення пов’язані, але не є однаковими. Зображення 2400 × 1600 може займати кілька мегабайтів, хоча на сторінці воно відображається лише в розмірі 600 × 400.
Надто велике зображення:
довше завантажується;
споживає більше мобільного трафіку;
займає більше пам’яті;
може сповільнити відображення сторінки.
Водночас не варто зменшувати зображення сильніше, ніж потрібно. Якщо картинка відображається у ширині 800 px, файл шириною 200 px буде розмитим.
Спочатку визначте найбільший розмір, у якому зображення реально відображатиметься.
Наприклад:
картка товару має ширину до 320 px;
зображення в ній може мати розмір приблизно 640 × 480, якщо потрібна висока якість на екранах із високою щільністю пікселів;
банер на всю ширину екрана може потребувати ширини
1200–2000 pxДля звичайного зображення потрібно зберігати пропорції. Якщо вихідне зображення має пропорцію 3:2, то можливі такі розміри:
600 × 400;
900 × 600;
1200 × 800.
Не слід змінювати ширину й висоту незалежно, інакше об’єкт на зображенні буде розтягнутий.
Оберіть зображення, яке:
має правильне співвідношення сторін;
не набагато більше за найбільший розмір на сторінці;
стискається у відповідний сучасний формат;
має достатню якість після стиснення.
Image у Next.jsУ Next.js для зображень зазвичай використовують компонент Image з пакета next/image.
Він допомагає:
генерувати потрібні розміри зображення;
не завантажувати надто великий файл;
відкладати завантаження зображень поза видимою областю;
зарезервувати місце під зображення;
автоматично віддавати сучасний формат, якщо це налаштовано.
Якщо зображення має відомий розмір, передайте width і height:
import Image from "next/image";
export default function ProductCard() {
return (
<article>
<Image
src="/images/headphones.jpg"
alt="Чорні бездротові навушники"
width={640}
height={480}
/>
<h2>Бездротові навушники</h2>
<p>Комфортне прослуховування музики щодня.</p>
</article>
);
}У цьому прикладі файл має бути розташований за адресою:
public/images/headphones.jpgЗначення width і height описують пропорції та початкові розміри зображення. Вони не обов’язково означають, що зображення завжди буде показане саме в такій ширині через CSS.
Якщо зображення має займати всю ширину контейнера, можна використати CSS:
import Image from "next/image";
export default function ArticleImage() {
return (
<Image
src="/images/mountains.jpg"
alt="Гори на тлі блакитного неба"
width={1600}
height={1067}
style={{
width: "100%",
height: "auto",
}}
/>
);
}Властивість height: "auto" зберігає пропорції зображення під час зміни його ширини.
sizesКоли зображення адаптивне, браузеру корисно повідомити, яку ширину воно матиме на різних екранах. Для цього використовується sizes.
import Image from "next/image";
export default function FeaturedArticle() {
return (
<Image
src="/images/forest.jpg"
alt="Лісова стежка"
width={1600}
height={1067}
sizes="(max-width: 768px) 100vw, 50vw"
style={{
width: "100%",
height: "auto",
}}
/>
);
}Значення:
100vw — зображення займає всю ширину вікна на екранах до 768 px;
50vw — на більших екранах зображення займає приблизно половину ширини вікна.
Next.js використовує sizes, щоб вибрати відповідний варіант зображення. Без цього браузер може завантажити більший файл, ніж потрібно.
fillІноді розмір зображення визначається не самим зображенням, а контейнером. У такому випадку можна використати fill.
Батьківський елемент повинен мати:
position: relative;
визначену висоту або співвідношення сторін.
import Image from "next/image";
export default function Hero() {
return (
<section
style={{
position: "relative",
aspectRatio: "16 / 9",
overflow: "hidden",
}}
>
<Image
src="/images/city.jpg"
alt="Місто ввечері"
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
</section>
);
}objectFit: "cover" заповнює весь контейнер, але може обрізати частину зображення.
fill зручний для:
обкладинок;
банерів;
фонових зображень карток;
зображень із різною висотою контейнера.
Якщо важливо показати все зображення без обрізання, використовуйте objectFit: "contain".
Формат впливає на якість і розмір файлу.
JPEG добре підходить для:
фотографій;
зображень із великою кількістю кольорів;
пейзажів;
портретів.
JPEG не підтримує прозорість. При сильному стисненні на ньому можуть з’являтися артефакти.
PNG підходить для:
зображень із прозорістю;
скриншотів;
графіки з чіткими межами;
зображень із невеликою кількістю кольорів.
Для фотографій PNG часто створює занадто великий файл.
WebP зазвичай дає менший файл, ніж JPEG або PNG за подібної якості. Він підтримує:
фотографії;
прозорість;
стиснення без втрат і з втратами.
WebP є хорошим стандартним вибором для більшості зображень у вебзастосунку.
AVIF часто створює ще менший файл, ніж WebP, за схожої якості. Він особливо корисний для фотографій і великих зображень.
Недолік AVIF — довше кодування зображення під час оптимізації. Тому його можна використовувати як пріоритетний формат, залишивши WebP запасним варіантом.
Формати, які може генерувати оптимізатор next/image, задаються у файлі next.config.mjs.
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
// Спочатку намагаємося віддати AVIF, а потім WebP.
formats: ["image/avif", "image/webp"],
},
};
export default nextConfig;Після цього перезапустіть сервер розробки:
npm run devКоли браузер запитує зображення через next/image, Next.js враховує підтримувані формати, які передав браузер у HTTP-запиті:
сучасний браузер може отримати AVIF;
браузер без підтримки AVIF може отримати WebP;
якщо потрібний формат не підтримується, використовується доступний запасний варіант.
Порядок форматів має значення: у цьому прикладі AVIF є пріоритетним, а WebP — запасним.
Структура файлів:
app/
page.jsx
public/
images/
product.jpg
next.config.mjsФайл next.config.mjs:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
// Налаштовуємо сучасні формати для оптимізованих зображень.
formats: ["image/avif", "image/webp"],
},
};
export default nextConfig;Файл app/page.jsx:
import Image from "next/image";
export default function HomePage() {
return (
<main>
<h1>Нова колекція</h1>
<section
style={{
maxWidth: "640px",
}}
>
<Image
src="/images/product.jpg"
alt="Сучасний рюкзак для міста"
width={1200}
height={800}
sizes="(max-width: 640px) 100vw, 640px"
style={{
width: "100%",
height: "auto",
}}
/>
</section>
</main>
);
}У цьому прикладі:
вихідне зображення має пропорцію 3:2;
максимальна ширина контейнера — 640 px;
на вузьких екранах зображення займає всю ширину;
на широких екранах воно не перевищує 640 px;
Next.js генерує оптимізовані варіанти;
браузер може отримати AVIF або WebP залежно від підтримки.
Для більшості випадків можна використовувати такі правила:
фотографії зберігайте у JPEG, WebP або AVIF;
графіку з прозорістю — у PNG, WebP або AVIF;
для великих фотографій перевіряйте AVIF і WebP;
не використовуйте зображення ширше, ніж потрібно дизайну;
зберігайте правильні пропорції;
для адаптивних зображень додавайте sizes;
для зображень із відомими пропорціями передавайте width і height.
Завантаження фотографії 5000 × 3000 для картки шириною 300 px створює зайве навантаження.
Краще підготувати відповідний розмір і використовувати оптимізацію Next.js.
altАтрибут alt потрібен для доступності та випадків, коли зображення не завантажилося.
Для змістовного зображення пишіть конкретний опис:
<Image
src="/images/book.jpg"
alt="Відкрита книга на дерев'яному столі"
width={800}
height={533}
/>Якщо зображення лише декоративне, використовуйте порожній опис:
<Image
src="/images/decoration.jpg"
alt=""
width={800}
height={200}
/>Якщо реальне зображення має пропорцію 4:3, а в width і height вказано 16:9, браузер або стилі можуть створити неправильне співвідношення сторін.
Значення width і height повинні відповідати пропорції вихідного зображення.
fill без розміру контейнераЯкщо контейнер не має висоти або співвідношення сторін, зображення з fill може не відобразитися очікуваним чином.
Задайте контейнеру aspectRatio, фіксовану висоту або інший спосіб визначити його розмір.
sizes для адаптивного зображенняКоли зображення змінює ширину залежно від екрана, sizes допомагає браузеру вибрати відповідний файл і не завантажувати зайві пікселі.
Розмір у пікселях і розмір файлу — це різні характеристики.
Зображення має бути достатньо великим для найбільшого розміру відображення, але не більшим без потреби.
width і height допомагають зберегти пропорції та зарезервувати місце на сторінці.
fill використовується, коли зображення має заповнювати контейнер.
sizes описує очікувану ширину адаптивного зображення.
WebP є універсальним сучасним форматом.
AVIF часто дає ще менший файл, тому його можна налаштувати як пріоритетний формат.
Next.js може автоматично віддавати AVIF або WebP залежно від можливостей браузера.