SEO для изображений: alt, имена файлов, форматы и сжатие
Практика3 минРедакция Innovialabs
Коротко
Оптимизированное изображение — это понятный alt, осмысленное имя файла, современный формат, правильный размер под экран и ленивая загрузка всего, что ниже первого экрана.
Что важно в первую очередь
Изображения влияют на SEO двумя путями. Первый — понимание: поисковик не «видит» картинку так, как человек, и опирается на alt, имя файла и окружающий текст. Второй — скорость: тяжёлые изображения часто становятся главной причиной медленной загрузки и плохих показателей Core Web Vitals, особенно LCP.
Минимальный набор: осмысленный alt, понятное имя файла, формат WebP или AVIF, размеры под экран и lazy loading для картинок ниже первого экрана.
Как писать alt
Alt — текстовая замена изображения для скринридеров и поисковиков. Пишите то, что сказали бы человеку, который не видит картинку.
| Плохо | Хорошо |
|---|---|
alt="image1" | alt="Курьер передаёт заказ покупателю у подъезда" |
alt="диван купить диван недорого диван" | alt="Серый трёхместный диван с деревянными ножками" |
| alt отсутствует | alt="" для чисто декоративных элементов |
- Конкретно и кратко: одно предложение обычно достаточно.
- Ключевое слово — только если оно естественно описывает изображение.
- Не начинайте с «изображение…» — скринридер и так сообщает, что это картинка.
- Декоративным картинкам — пустой
alt="", чтобы их пропускали.
Имена файлов
IMG_4821.jpgничего не сообщает.seryj-divan-trehmestnyj.webp— сообщает.- Используйте латиницу, строчные буквы и дефисы вместо пробелов.
- Не меняйте имена у уже проиндексированных изображений без необходимости.
Форматы
| Формат | Когда использовать |
|---|---|
| AVIF | Фото и сложные изображения, когда нужен минимальный вес |
| WebP | Универсальный выбор с широкой поддержкой |
| JPEG | Запасной вариант для фото |
| PNG | Скриншоты и графика с прозрачностью, если WebP не подходит |
| SVG | Логотипы, иконки, простая векторная графика |
Отдавайте современный формат с запасным вариантом через <picture>:
<picture>
<source srcset="/img/sofa.avif" type="image/avif" />
<source srcset="/img/sofa.webp" type="image/webp" />
<img src="/img/sofa.jpg" alt="Серый трёхместный диван" width="1200" height="800" />
</picture>
Размер и адаптивность
Главная ошибка — загружать картинку шириной в несколько тысяч пикселей, чтобы показать её в блоке на 400 пикселей. Используйте srcset и sizes, чтобы браузер сам выбирал подходящий файл:
<img
src="/img/sofa-800.webp"
srcset="/img/sofa-400.webp 400w, /img/sofa-800.webp 800w, /img/sofa-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Серый трёхместный диван"
width="800" height="533" />
- Всегда указывайте width и height — это защищает от сдвигов вёрстки (CLS).
- Сжимайте файлы перед публикацией; качество подбирайте визуально, сравнивая результат.
Lazy loading и первый экран
- Для картинок ниже первого экрана добавьте
loading="lazy". - Главное изображение первого экрана не делайте ленивым — это замедлит LCP. Ему, наоборот, можно задать
fetchpriority="high". - Многие фреймворки, например Next.js с компонентом
Image, берут часть этой работы на себя, но alt и приоритеты всё равно задаёте вы.
Трафик из поиска по картинкам
- Размещайте изображение рядом с релевантным текстом и подписью.
- Используйте уникальные изображения: собственные фото товаров и схемы ценнее стоковых.
- Добавьте важные изображения в sitemap или убедитесь, что они доступны для сканирования и не закрыты в robots.txt.
- Указывайте изображение в структурированных данных товара или статьи.
Частые ошибки
- Картинки подгружаются только скриптом, и робот их не находит.
- Текст «зашит» в изображение вместо HTML.
- Один и тот же alt у всех картинок на странице.
- Lazy loading на hero-изображении.