Атрибут alt - это текстовое описание изображения внутри кода страницы. Пользователь его обычно не видит, но он появляется на месте картинки, если та не загрузилась, и именно его вслух зачитывает программа экранного доступа незрячему человеку. Поисковые системы используют alt как основной способ понять, что нарисовано на изображении.
Практическая выгода простая. Поиск по картинкам - отдельный источник посетителей, который многие игнорируют. Для мебели, одежды, ремонта, еды и любых товаров с визуальной составляющей он даёт заметную долю переходов. Но попасть туда можно только тогда, когда у файла есть внятное описание.
Как писать описание
Правило одно: опишите картинку так, как описали бы её по телефону человеку, который не видит экран. Не пересказывайте весь абзац рядом и не перечисляйте ключевые слова. Достаточно одного предложения из пяти-пятнадцати слов, конкретного и по делу.
- Плохо: alt пустой или написано IMG_4821
- Плохо: ремонт квартир Таллинн ремонт под ключ цена ремонт недорого
- Хорошо: кухня после ремонта, светлые фасады и деревянная столешница
- Хорошо для товара: кроссовки Adidas Samba белые, вид сбоку
- Хорошо для схемы: график роста заявок с сайта за шесть месяцев
Отдельный случай - декоративные изображения. Фоновые узоры, разделители, иконки рядом с текстом, который и так всё объясняет, описывать не нужно. Для них ставят пустой alt, то есть атрибут присутствует, но значение пустое. Тогда программа экранного доступа просто пропустит картинку, вместо того чтобы зачитывать имя файла. Полное отсутствие атрибута хуже: в этом случае некоторые программы всё равно попытаются прочитать адрес файла вслух.
Имя файла и подпись
Название файла тоже участвует в оценке. kuhnya-posle-remonta.jpg понятнее, чем DSC_0192.jpg, и переименовать файлы перед загрузкой стоит одной минуты. Используйте латиницу, дефисы вместо пробелов и нижних подчёркиваний, никаких заглавных букв.
Видимая подпись под изображением работает ещё сильнее, чем alt, потому что её читают и люди, и роботы, и её замечают при беглом просмотре страницы. Для статей с примерами работ, схемами и графиками подписи стоит добавлять всегда. Дублировать в них alt не обязательно: подпись может добавлять контекст, которого в описании нет.
Не забывайте про вес
Хорошее описание не спасёт картинку весом в пять мегабайт. Перед загрузкой изображение стоит уменьшить до реального размера отображения, обычно это 1600-2000 пикселей по длинной стороне для больших блоков и 800 для карточек, и сохранить в современном формате вроде WebP. Разница в скорости загрузки страницы получается кратной, и именно она чаще всего заметна на мобильном интернете.
Проверить, что получилось, можно без специальных инструментов. Откройте страницу, нажмите правой кнопкой на картинку и выберите просмотр кода элемента: атрибут alt будет виден сразу. Для проверки всего сайта подойдёт любой бесплатный аудит, который выводит список изображений без описания. Начинать стоит с главной страницы, карточек товаров и страниц услуг: там изображения реально влияют на решение о покупке.