Изображения и SEO: alt, размеры, форматы

Изображения делают страницу живой: помогают объяснить сложное, показать товар со всех сторон, разбить длинный текст на удобные части. Но при неправильной работе с ними картинки превращаются в балласт. Тяжёлые файлы замедляют загрузку, пустые атрибуты лишают поисковики информации, а случайные имена вроде IMG_4587.jpg не говорят роботу ровным счётом ничего.

Грамотная оптимизация изображений решает сразу несколько задач. Страницы грузятся быстрее, что положительно влияет на поведенческие факторы и показатели скорости. Картинки начинают приводить дополнительный трафик из поиска по изображениям. А люди с нарушениями зрения, использующие экранные дикторы, получают понятное описание того, что изображено.

В этой статье — практическое руководство: от выбора формата и размера до заполнения alt и настройки ленивой загрузки.

Почему изображения важны для SEO

Поисковые системы давно умеют анализировать содержимое картинок, но по-прежнему во многом опираются на текстовые сигналы вокруг них. Изображение без описания — это для робота почти пустое место. А хорошо оформленная картинка усиливает релевантность страницы и может самостоятельно ранжироваться в поиске по изображениям.

Основные эффекты от оптимизации:

• Дополнительный трафик из вертикали «Картинки» — особенно в тематиках, где люди ищут визуально: интерьер, мода, рецепты, товары.
• Скорость загрузки — изображения часто составляют большую часть веса страницы.
• Поведенческие факторы — качественные иллюстрации удерживают внимание и помогают понять материал.
• Доступность — описания делают контент понятным для всех пользователей.
• Расширенные сниппеты — картинка может появиться прямо в выдаче рядом с вашим результатом.

Атрибут alt: главное текстовое описание

Атрибут alt задаёт альтернативный текст изображения. Он показывается, если картинка не загрузилась, озвучивается экранными дикторами и служит для поисковиков основным источником информации о том, что изображено.

Как писать alt правильно

Хороший alt кратко и точно описывает изображение так, как вы описали бы его человеку, который не может его увидеть. Длина обычно от нескольких слов до одного-двух предложений — примерно до 100–125 символов.

Ключевые слова в alt

Ключевое слово в alt уместно, если оно действительно описывает изображение. Если на странице о ремонте кухонь есть фото готовой кухни, фраза «ремонт кухни» в описании вполне естественна. Но вписывать один и тот же запрос во все картинки на странице — это переспам, который не принесёт пользы.

Когда alt оставлять пустым

Декоративные элементы — разделители, фоновые узоры, иконки, дублирующие текст рядом, — лучше оформлять с пустым атрибутом alt. Так экранные дикторы их пропустят, а поисковик не будет отвлекаться на неинформативные картинки. Важно именно оставить атрибут пустым, а не удалять его совсем.

Атрибут title и подписи к изображениям

Атрибут title у изображения показывает всплывающую подсказку при наведении курсора. Его влияние на SEO минимально, и на мобильных устройствах он вообще не виден. Заполнять его необязательно; если заполняете — не копируйте alt дословно, а дайте дополнительную информацию.

Гораздо полезнее видимая подпись под изображением. Подписи читают очень часто — нередко чаще, чем сам текст. Они дают поисковику дополнительный контекст и помогают пользователю понять, зачем здесь эта картинка.

Имя файла имеет значение

Имя файла — ещё один сигнал для поисковой системы. Файл с именем DSC_0042.jpg ничего не сообщает, а файл kuhnya-skandinavskiy-stil.jpg сразу подсказывает тему.

Правила именования:

1. Используйте латиницу — транслитерацию или английские слова.
2. Разделяйте слова дефисом, а не подчёркиванием или пробелом.
3. Пишите строчными буквами.
4. Делайте имя кратким и описательным — два-пять слов.
5. Не используйте спецсимволы и кириллицу, чтобы избежать проблем с кодировкой в адресах.

Переименовывать файлы удобнее всего до загрузки на сайт. Менять имена у уже проиндексированных картинок без настройки перенаправлений не стоит — можно потерять накопленный трафик из поиска по изображениям.

Форматы изображений: что выбрать

Выбор формата напрямую влияет на вес файла и качество картинки. Сегодня в арсенале вебмастера несколько вариантов:

Оптимальная стратегия для большинства сайтов — отдавать WebP или AVIF современным браузерам, а для совместимости держать запасной JPEG или PNG. Это легко реализовать с помощью элемента picture с несколькими источниками или средствами CMS и CDN, которые автоматически подбирают формат.

Для логотипов и иконок по возможности используйте SVG. Такой файл весит считаные килобайты и остаётся чётким на любом экране, включая дисплеи высокой плотности.

Размеры и сжатие

Одна из самых частых ошибок — загружать фотографию прямо с камеры размером 6000 пикселей по ширине и весом в несколько мегабайт, а затем уменьшать её на странице средствами CSS. Браузер всё равно скачивает тяжёлый файл, и страница грузится медленно, особенно на мобильном интернете.

Правильный размер

Изображение должно загружаться в том размере, в котором отображается, с запасом для экранов высокой плотности. Если область контента шириной 800 пикселей, имеет смысл подготовить версии в 800 и 1600 пикселей и отдавать подходящую через атрибут srcset. Браузер сам выберет нужный вариант в зависимости от экрана.

Сжатие без заметной потери качества

Даже правильно масштабированное изображение можно облегчить. Для JPEG и WebP обычно подходит качество в диапазоне 70–85 процентов: разница на глаз почти незаметна, а вес уменьшается в разы. Существуют как онлайн-сервисы, так и плагины для CMS, которые сжимают картинки автоматически при загрузке.

Ориентиры по весу:

• иллюстрация в тексте статьи — до 100–150 КБ;
• крупное изображение на первом экране — до 200–300 КБ;
• миниатюры в каталоге — 20–50 КБ;
• иконки и элементы интерфейса — единицы килобайт.

Указывайте ширину и высоту

Атрибуты width и height у тега изображения позволяют браузеру заранее зарезервировать место под картинку. Без них контент «прыгает» по мере загрузки, что раздражает пользователей и ухудшает метрику визуальной стабильности, которую учитывают поисковые системы.

Ленивая загрузка

Ленивая загрузка означает, что изображения ниже первого экрана подгружаются только тогда, когда пользователь до них прокручивает. Это ускоряет первоначальную загрузку страницы и экономит трафик посетителей.

Современные браузеры поддерживают нативную ленивую загрузку через атрибут loading со значением lazy. Не нужны дополнительные скрипты, а поисковые роботы корректно обрабатывают такие изображения.

Важные оговорки:

• не применяйте ленивую загрузку к картинкам на первом экране — особенно к главному изображению, это замедлит отображение важного контента;
• избегайте устаревших скриптов, которые подменяют адрес картинки и скрывают его от роботов;
• проверяйте, что изображения видны в отрендеренной версии страницы в инструментах для вебмастеров.

Уникальные изображения против стоковых

Стоковые фото удобны и доступны, но у них есть минус: одна и та же картинка встречается на тысячах сайтов. Поисковик понимает, что это дубликат, и такое изображение не даёт странице дополнительной ценности. Пользователи тоже узнают «улыбающихся менеджеров в гарнитурах» и меньше доверяют сайту.

Собственные фотографии работ, товаров, команды и процессов работают лучше по нескольким причинам:

• они уникальны и могут ранжироваться в поиске по картинкам;
• повышают доверие — видно, что компания реальная;
• лучше иллюстрируют конкретный текст;
• их сложнее скопировать без последствий — авторство проще доказать.

Если без стоков не обойтись, выбирайте менее растиражированные изображения и обрабатывайте их: кадрируйте, добавляйте поясняющие элементы, объединяйте в коллажи. Для пояснительных материалов отлично работают собственные схемы, инфографика и скриншоты.

Дополнительные технические меры

Помимо базовой оптимизации, есть несколько приёмов, которые помогают изображениям лучше индексироваться и быстрее загружаться:

1. Карта изображений. Включение картинок в sitemap помогает поисковику находить их, особенно если они подгружаются скриптами.
2. Кэширование. Настройте длительное кэширование статических файлов на сервере, чтобы повторные визиты загружались мгновенно.
3. CDN. Сеть доставки контента отдаёт изображения с ближайшего к пользователю сервера и часто умеет автоматически конвертировать форматы.
4. Микроразметка. Для товаров, рецептов и статей указывайте изображение в структурированных данных — это повышает шанс появления картинки в сниппете.
5. Предзагрузка. Главное изображение первого экрана можно подгружать с высоким приоритетом, чтобы ускорить отображение.

Чек-лист оптимизации изображения перед публикацией

Чтобы не держать все правила в голове, удобно пройтись по короткому списку перед загрузкой каждой картинки:

Через пару недель такой проверки всё это начнёт выполняться автоматически, а редакторы перестанут загружать на сайт многомегабайтные снимки с телефона.

Итог

Оптимизация изображений — одна из тех задач, которые часто откладывают, хотя они дают ощутимый результат. Информативный alt, понятное имя файла, правильный формат, разумный размер и сжатие, ленивая загрузка для нижней части страницы — всё это вместе ускоряет сайт, улучшает поведенческие сигналы и открывает дополнительный канал трафика из поиска по картинкам.

Начните с аудита: найдите самые тяжёлые изображения и картинки без alt, переведите графику в современные форматы, настройте автоматическое сжатие для новых загрузок. После этого проверьте скорость страниц — разница обычно видна сразу. А чтобы поисковики быстрее переоценили обновлённые страницы, полезно привлечь к ним живых посетителей через сервис обмена визитами.