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

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

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

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

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

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

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

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

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

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

Що писати в alt

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

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

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

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

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