Ми пропонуємо

NEW CASE
Antana

Створюємо цифрові рішення, які працюють на бізнес

Стати клієнтомСтати клієнтом
Зателефонуйте нам +38 (066) 35-14-529

Зробімо перший крок до вашого сайту — напишіть нам

Закрити
Інструменти

Аудит зображень

SEO та маркетинг

Може зацікавити

Атрибути alt, ваги файлів, формат і відкладене завантаження.

Що перевіряє аудит зображень

Зображення — зазвичай найважча частина сторінки. Дві-три помилки тут коштують більше, ніж усе інше разом.

Атрибут alt Опис для тих, хто не бачить картинку: пошукові системи, читачі екрана, повільне зʼєднання. Відсутній alt і порожній — різні речі: порожній означає «декоративне», відсутній означає, що про нього забули.
Вага файлів Фото з камери на кілька мегабайт у шапці сайту — найчастіша причина повільного завантаження. Зважуємо файли й показуємо найважчі.
Розміри в розмітці Без width і height браузер не знає, скільки місця лишити, і верстка стрибає під час завантаження. Це прямо впливає на показник CLS.
Сучасний формат Той самий кадр у webp важить на чверть менше за jpg без видимої різниці. Показуємо, скільки зображень ще в старих форматах.
Відкладене завантаження Картинки нижче екрана мають вантажитись при прокрутці. Але перші два-три — навпаки не мають: відкладати їх шкодить швидкості показу.
Биті посилання Зображення, яке віддає 404. Видно одразу на сторінці, але при сотні картинок легко пропустити.

Яким має бути alt

Головне правило: описуйте, що на зображенні, а не втискайте ключові слова.

Змістовний «Червоний диван у вітальні з дерев’яними ніжками» краще за «диван» і незрівнянно краще за «diван-купити-київ».
До 125 символів Читачі екрана обривають довші описи. Якщо не вміщається — можливо, це підпис, а не alt.
Порожній для оформлення Роздільники, фонові візерунки, іконки поруч із текстом. Порожній alt каже: «це не несе змісту, пропусти».
Без «зображення» на початку Читач екрана вже сказав, що це зображення. Повторювати означає забирати час слухача.

Скільки має важити зображення

До 100 КБ Звичайна ілюстрація в тексті. У webp такий розмір дає цілком пристойну якість для екрана.
До 200 КБ Велике зображення в шапці на всю ширину. Більше вже помітно на повільному зʼєднанні.
Понад 500 КБ Майже завжди означає, що файл не оптимізували взагалі. Стиснення зменшить його вп’ятеро без втрати якості.
Уся сторінка Сума всіх зображень бажано до 1 МБ. На мобільному інтернеті кожні 500 КБ — це приблизно секунда очікування.

Часті запитання

Чим порожній alt відрізняється від відсутнього?
Порожній alt — це свідома вказівка: зображення декоративне, читач екрана має його пропустити. Відсутній означає, що про атрибут просто забули, і програма спробує прочитати імʼя файлу вголос. Тому ми рахуємо їх окремо.
Скільки має важити зображення?
Ілюстрація в тексті — до 100 КБ, велике зображення в шапці — до 200 КБ. Понад 500 КБ майже завжди означає, що файл не оптимізували взагалі: стиснення зменшить його вп’ятеро без видимої втрати якості.
Чи всім зображенням потрібне відкладене завантаження?
Ні, і це важливо. Перші два-три зображення екрана відкладати шкідливо: вони формують показник LCP, і затримка їх завантаження погіршує оцінку швидкості. Відкладати треба те, що нижче за межу видимості.
Чи варто переводити всі зображення в webp?
Для сайту здебільшого так: той самий кадр важить на чверть менше без видимої різниці. Але не для всього — логотипи й іконки краще лишити в svg, а для друку потрібні інші формати. Оригінали варто зберігати окремо.
Telegram Viber Подзвонити