Магазин виглядав чудово: великі соковиті фото товарів, банер на весь екран, галерея в кожній картці. А потім прийшла аналітика — половина відвідувачів із телефонів закривали сторінку, не дочекавшись завантаження. Причина була не в дизайні. Головне фото важило вісім мегабайтів, і на мобільному інтернеті воно вантажилося кілька секунд, протягом яких людина бачила порожній екран.
Зображення — найважча частина майже будь-якого сайту. Вони ж — і одна з найбільших недооцінених можливостей: правильні картинки прискорюють сайт, піднімають його в пошуку й приводять трафік із пошуку за фото. Розберемо все по порядку.
Чому саме зображення тягнуть швидкість униз
Якщо відкрити будь-яку сторінку й подивитися, з чого складається її вага, у більшості випадків левову частку займуть саме картинки — важче за код, шрифти й усе інше разом.
Проблема типова: фото заливають прямо з телефона чи фотоапарата. Такий файл важить кілька мегабайтів і має розмір у кілька тисяч пікселів. На сайті він показується у блоці шириною, скажімо, 600 пікселів — але браузер усе одно тягне повний оригінал, а потім зменшує його на льоту. Користувач платить за це очікуванням.
Швидкість — це вже давно не тільки про комфорт. Це фактор ранжування: повільні сторінки Google опускає, а люди з них тікають. Загальну картину ми розбирали в матеріалі про те, як пришвидшити сайт — оптимізація зображень там найперший і найдешевший крок.
Вага й розміри: головне джерело економії
Два прості принципи прибирають більшу частину зайвої ваги.
- Правильний розмір. Зображення має бути таким, яким його реально показують, а не оригіналом на кілька тисяч пікселів. Якщо картинка займає блок 600 пікселів, немає сенсу вантажити 4000.
- Стиснення. Навіть після зменшення файл можна стиснути ще, майже без видимої втрати якості. Око не бачить різниці, а вага падає в рази.
Окремо — про ретину. Екрани телефонів і сучасних ноутбуків мають підвищену щільність пікселів, тож картинку віддають приблизно вдвічі більшою за видимий розмір, щоб вона не була розмитою. Але «вдвічі більшу» — не означає «оригінал 4000 пікселів». Це керована величина, а не привід вантажити все у максимальній якості.
Найрозумніше рішення — коли сайт сам готує кілька версій кожного зображення під різні екрани й віддає потрібну: маленьку на телефон, більшу на десктоп. Тоді ніхто не тягне зайвого, а картинка завжди чітка.
Формати: WebP і AVIF замість старих JPEG
Роками стандартом були JPEG для фото й PNG для графіки з прозорістю. Обидва працюють, але важать більше, ніж потрібно за сучасними мірками.
- WebP стискає на 25-35 відсотків краще за JPEG при тій самій якості, підтримується практично всіма браузерами й давно перевірений.
- AVIF іде ще далі — економія іноді сягає половини ваги, — але він новіший і трохи вимогливіший до підготовки.
Правильний підхід — не вибирати щось одне назавжди, а віддавати сучасний формат браузерам, які його розуміють, із запасним JPEG для решти. На практиці це робить сам сайт автоматично: ви завантажуєте звичайне фото, а система сама конвертує його в потрібні формати. Руками нічого перегортати не треба — це налаштовується один раз.
Alt-текст і назви файлів: те, що бачить пошук
Пошук не «дивиться» на картинку так, як людина. Він орієнтується на текст навколо неї — і насамперед на два поля.
- Alt-текст — опис того, що на зображенні. Він потрібен для доступності (його читають програми для незрячих) і для пошуку за картинками. Пишіть по суті: «червоні бігові кросівки збоку», а не «купити кросівки дешево Київ недорого». Напхані ключі виглядають як спам і радше шкодять.
- Назва файлу — ще один сигнал. «chervoni-krosivky.webp» каже пошуку більше, ніж «IMG_20240513.webp». Осмислені назви важливі особливо для товарних фото.
У магазині це працює прямо: картинки товарів із коректними alt і назвами потрапляють у пошук за фото, а він приводить покупців, які шукають візуально. Про предметний бік товарної зйомки ми писали в матеріалі про фото товарів для інтернет-магазину, а загальний фундамент — у гайді про інтернет-магазин з нуля.
Lazy-loading і порядок завантаження
Навіть ідеально стиснуті картинки не варто вантажити всі одразу. Тут допомагає lazy-loading — відкладене завантаження: браузер тягне зображення не наперед, а коли користувач домотав до нього.
Для довгих сторінок і каталогів із десятками фото це дає відчутний виграш: перший екран зʼявляється швидко, бо не вантажиться те, чого ще не видно.
Але є важливий виняток. Головне зображення вгорі сторінки — банер, велике фото товару — треба показати миттєво. Відкладати його шкідливо: саме воно формує перше враження про швидкість. Тож правило таке: верхнє фото вантажимо одразу, усе нижче — ліниво.
Це особливо помітно на мобільних, де інтернет повільніший і кожна зайва секунда відчутна. Загальний підхід до мобільних ми розбирали в матеріалі про адаптивний дизайн і мобільну версію.
Коротко
Зображення — найважча частина сайту й водночас найдешевша можливість його прискорити. Головні втрати трапляються, коли фото заливають прямо з камери: багатомегабайтний файл на кілька тисяч пікселів вантажиться там, де достатньо зменшеної й стиснутої копії. Правильний розмір і стиснення прибирають більшу частину зайвої ваги.
Сучасні формати WebP і AVIF стискають краще за старі JPEG, і найрозумніше — віддавати їх автоматично тим браузерам, які розуміють. Alt-текст і осмислені назви файлів роблять картинки видимими для пошуку й приводять трафік із пошуку за фото. А lazy-loading прискорює довгі сторінки — за одним винятком: головне верхнє зображення завжди вантажимо одразу.
Ми в Obliko налаштовуємо обробку зображень так, щоб вона працювала сама: завантажене фото автоматично стискається, конвертується в сучасні формати й готується під різні екрани. Напишіть, на чому побудований ваш сайт і чи скаржаться відвідувачі на швидкість, — підкажемо, де ховається зайва вага.
Що таке alt-текст і навіщо він потрібен?
Alt — це текстовий опис зображення, який бачить пошук і читають програми для незрячих, коли картинка не завантажилась. Для SEO він пояснює, що на фото, і допомагає потрапити в пошук за картинками, який теж приводить покупців. Пишіть по суті: не «IMG_1024», а «червоні бігові кросівки збоку». Не треба напихати ключові слова — це виглядає як спам і радше шкодить. Один точний опис у кілька слів працює краще за перелік усіх запитів, за якими ви хочете знайтися.
Який формат зображень кращий — WebP чи AVIF?
Обидва стискають краще за старі JPEG і PNG при тій самій якості: WebP економить приблизно 25-35 відсотків ваги, AVIF — ще більше, іноді вдвічі. AVIF новіший і трохи важчий у генерації, WebP підтримується практично всюди й давно перевірений. Розумний підхід — віддавати сучасний формат браузерам, які його розуміють, і залишати запасний JPEG для решти. На практиці цим займається сам сайт автоматично, тож вам не треба конвертувати кожне фото руками.
Чому важливо стискати зображення перед завантаженням?
Бо фото з телефона чи фотоапарата важить кілька мегабайтів і має розмір у кілька тисяч пікселів — набагато більше, ніж потрібно для сайту. Якщо залити його як є, браузер тягне повний файл, а показує зменшену копію: користувач чекає, а трафік витрачається намарно. На мобільному з повільним інтернетом це втрачені секунди й втрачені покупці. Стиснення й правильний розмір зменшують вагу в рази без помітної втрати якості — це найдешевший спосіб пришвидшити сайт.
Що таке lazy-loading і чи потрібен він завжди?
Lazy-loading — це відкладене завантаження: браузер тягне картинку не одразу, а коли користувач до неї домотав. Для довгих сторінок і каталогів із десятками фото це сильно прискорює першу появу екрана, бо не вантажиться те, чого ще не видно. Але для головного зображення вгорі сторінки він шкідливий — його треба показати миттєво, а відкладення сповільнює саме те, що людина бачить першим. Тому верхнє фото вантажать одразу, а все нижче — ліниво.
Потрібен сайт або застосунок?
Розробляємо під ключ — від дизайну до запуску. Порахуємо ваш проєкт безкоштовно.