Оптимізація зображень для сайту: розмір, WebP та alt

Оберіть зміст, який допомагає читачу

Для інструкції про резервування корисніше показати носій і структуру копії, ніж випадковий пейзаж. Для картки товару важливі реальний вигляд, масштаб і деталі. Обкладинка блогу може бути концептуальною, але повинна підтримувати тему, а не створювати хибне уявлення про результат послуги.

Перевірте зображення в маленькому розмірі: чи видно головний предмет, чи не губляться деталі? Для серії статей доречна спільна палітра й освітлення, проте сюжети мають відрізнятися. Десять однакових ноутбуків не пояснюють десять різних питань.

Розмір у пікселях і вага — різні речі

Ширина визначає кількість пікселів, а вага файлу залежить також від формату, якості та складності сцени. Не варто віддавати багатомегапіксельний оригінал для невеликої картки. Підготуйте версію під фактичний розмір показу та щільність екрана.

Для прикладу, картці й великій обкладинці можуть знадобитися різні файли. Механізми srcset і sizes дозволяють браузеру обрати варіант за умовами показу. При цьому неправильне значення sizes може змусити завантажити завеликий файл, навіть якщо маленька версія вже існує.

Як обирати формат і стиснення

WebP часто доречний для фотографій та ілюстрацій, але розширення саме по собі не гарантує малої ваги. Експортуйте кілька рівнів якості й порівняйте дрібні контури, градієнти та текстури. Для логотипів і простих векторних елементів використовуйте відповідний векторний формат, якщо є якісний оригінал.

Не стискайте важливе фото товару до появи плям: покупець повинен бачити матеріал. У статті дрібні декоративні деталі менш важливі, ніж основний сюжет. Орієнтиром є помітна якість на реальному екрані та час завантаження, а не універсальна вага для всіх картинок.

Що писати в alt

Alt коротко описує зміст або функцію зображення в контексті сторінки. Замість переліку «SEO, просування, купити сайт» доречніше написати «Карта сторінок послуг із переходами до відповідних статей». Для товару назвіть модель і видиму особливість, коли це допомагає відрізнити знімок.

Суто декоративне зображення може мати порожній alt. Якщо картинка є посиланням або кнопкою, важливе її призначення. Не вигадуйте деталей, яких немає на фото, й не додавайте ключові слова до кожного опису механічно.

Перевірка перед публікацією

• Головний предмет не обрізано на телефоні.
• Вказано ширину й висоту, щоб макет не стрибав.
• Нижні зображення завантажуються відкладено там, де це доречно.
• Ключове зображення першого екрана не затримується непотрібним lazy loading.
• Alt описує конкретний сюжет; назва файлу зрозуміла.

Якщо сторінка все одно повільна, перевірте не тільки картинки: причиною може бути сервер або сторонній код. Далі читайте про швидкість і Core Web Vitals та підготовку картки товару.

Практика: підготуйте одне зображення до публікації

Визначте ширину, у якій зображення реально відображається. Для невеликої картки не потрібно завантажувати багатомегабайтний оригінал. Підготуйте кілька розмірів і використовуйте srcset та sizes, щоб браузер міг обрати доречний файл. Після стиснення перевірте дрібні деталі, градієнти й текст: надмірна економія може погіршити читабельність.

Alt пишіть за тим, що зображення додає до матеріалу. Для фото входу корисний опис орієнтира, для схеми — коротке пояснення її змісту. Декоративне зображення може мати порожній alt. Не заповнюйте опис переліком пошукових запитів і не починайте кожен із «картинка». Для складної схеми потрібні також підпис і текстове пояснення поруч.

Задайте ширину й висоту, щоб браузер зарезервував місце. Для зображень нижче першого екрана використовуйте відкладене завантаження, але не застосовуйте його автоматично до головного зображення, яке визначає LCP. Після публікації відкрийте сторінку на телефоні та перевірте фактичні файли, а не лише вихідну картинку в медіатеці.