Оптимизация изображений для SEO: скорость, alt, форматы и что реально индексируется

Коротко: что значит оптимизировать изображения для SEO

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

Четыре принципа, которые отличают разумный подход:

1. Сначала скорость и корректный HTML, потом alt и имена файлов. Тяжёлая картинка без lazy-loading испортит LCP быстрее, чем пустой alt испортит видимость.
2. Alt нужен прежде всего людям и поиску по картинкам, а не «для ключей». Google прямо называет набор ключевых слов в alt переспамом. Яндекс в справке пишет, что текст из alt не попадает в основной индекс, но помогает роботу картинок.
3. Важный контент не должен жить только в картинке. Робот Яндекса, по справке, не распознаёт текст внутри изображений: дублируйте нужное текстом.
4. Не ждите чуда от картинок. Они не заменят контент и технику; их роль — не мешать и помогать.

В статье: форматы и сжатие, размеры и srcset, ленивая загрузка и приоритет главного изображения, alt и имена файлов, HTML-основа (что индексируется, а что нет), разметка и превью, особенности магазина, проверка и PDF-чек-лист на 30 пунктов.

Основа статьи — рекомендации Google по изображениям в поиске, руководство web.dev по оптимизации LCP, справка Яндекса по использованию графики и русскоязычные руководства (PR-CY, Kokoc и другие). Часть утверждений блогов не подтверждена официальными источниками (например, процентные выигрыши форматов, эксперименты с гигантскими изображениями): такие места я отмечаю как мнения авторов.

Формат, размер и сжатие

Google поддерживает форматы BMP, GIF, JPEG, PNG, WebP, SVG и AVIF; расширение файла должно соответствовать его типу. Универсального «правильного веса» нет: он зависит от изображения и экрана. Практичные правила:

• Размер файла соответствует отображаемому. Не загружайте картинку в тысячи пикселей в блок шириной несколько сотен. Один автор приводит эксперимент с очень крупными изображениями, где позиции ухудшились; это единичное наблюдение, но смысл ясен: лишний вес вредит скорости.
• Сжимайте без заметной потери качества и удаляйте лишние метаданные (EXIF) там, где они не нужны.
• Используйте адаптивные изображения: srcset и sizes или picture с обязательным запасным src. Браузер выберет подходящий вариант.
• Не вставляйте картинки как data URI без необходимости: это раздувает страницу.
• Кэшируйте и при необходимости используйте CDN, который автоматически подбирает размер и формат.

Проверить вес, формат и размеры изображений на странице можно инструментом анализ изображений, а размер самой страницы — размер страницы и скорость загрузки HTML.

Главное изображение, ленивая загрузка и скорость

По руководству web.dev, если главный элемент страницы (LCP) — изображение, нужно, чтобы браузер нашёл его и начал загрузку как можно раньше:

• Подключайте через src или srcset прямо в исходном HTML. Картинки, которые добавляет JavaScript, и фоновые CSS-картинки браузер находит поздно; для них нужна предзагрузка (rel="preload").
• Не ставьте loading="lazy" на изображение первого экрана (LCP-элемент): это задерживает загрузку.
• Задайте приоритет fetchpriority="high" тому изображению, которое, вероятно, станет LCP; больше одного-двух таких не нужно. Понижайте приоритет у изображений, которые вначале не видны (например, слайды карусели).
• Отдавайте нужный размер и современный формат, сжимайте, настраивайте кэширование.
• Не блокируйте показ картинки тяжёлыми стилями и синхронными скриптами в head и не прячьте элемент до загрузки JavaScript.

Остальные изображения ниже первого экрана загружайте лениво: loading="lazy" (при желании с decoding="async"). Обязательно задавайте ширину и высоту или соотношение сторон: иначе при загрузке страница «прыгает» (CLS). Подробнее о метриках и порядке работ — в статье «Аудит скорости». Web.dev добавляет важное замечание: ускорив один этап (сжали файл), можно потерять выигрыш на другом (картинка ждёт скрипт), поэтому оптимизируйте все этапы вместе.

HTML-основа: что поисковик видит и индексирует

• Вставляйте изображения тегом <img> с атрибутом src. По справке Google, фоновые изображения из CSS не индексируются.
• Одно изображение на нескольких страницах подключайте одним адресом: так Google может его кэшировать.
• Не закрывайте адреса картинок в robots.txt, если хотите, чтобы их индексировали: тестер robots.txt.
• Для картинок, которые сложно найти обычным обходом, можно создать карту сайта изображений; для адресов с CDN домен CDN стоит подтвердить в Search Console.
• Робот Яндекса не распознаёт текст в графике. Не используйте картинки вместо текста и графическое меню без текстового дубля; важное содержимое дублируйте текстом.

Проверить, что видит робот: сайт глазами поискового робота.

Alt, имена файлов и подписи

О различии: по справке Яндекса, alt помогает роботу индексации картинок и облегчает понимание изображения, но в основной индекс не попадает; поэтому нужный для страницы текст пишите в самом тексте. Для многоязычных сайтов адрес картинки может быть общим, а alt нужно переводить.

Разметка, превью и предпочтительное изображение

• Предпочтительное изображение страницы Google берёт из разметки (primaryImageOfPage, mainEntity, mainEntityOfPage) или мета-тега og:image. Выбирайте релевантную картинку с высоким разрешением и разумным соотношением сторон, а не логотип и не картинку с текстом: проверка Open Graph.
• Структурированные данные (товар, рецепт, видео и др.) помогают получить расширенный результат; свойство с изображением там обязательно: валидатор разметки.
• Заголовок и описание страницы влияют на сниппет так же, как для обычной выдачи: превью сниппета.

Интернет-магазин: что важно именно вам

• Несколько реальных фото товара с разных ракурсов влияют и на конверсию, и на доверие («Коммерческие факторы»). Не используйте чужие фото без прав: риск юридический, а не SEO.
• Фото в карточках создают основную часть веса страницы: галереи, зум, миниатюры. Миниатюры должны быть отдельными лёгкими файлами, а не уменьшенными тяжёлыми.
• Alt карточек строится по шаблону из названия и важного признака (тип, модель, цвет) и остаётся уникальным; не повторяйте один alt на все фото.
• Варианты товара (цвета) подписывайте отдельно; следите за дублями страниц: «Canonical», «Описания товаров».
• Заглушки «нет фото» не должны индексироваться как важные изображения; удаляйте или заменяйте их.

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

1. Анализ изображений на страницах: найдите тяжёлые файлы, неподходящие форматы, пустые alt, битые адреса: анализ изображений.
2. Скорость: PageSpeed Insights и отчёт Core Web Vitals; смотрите LCP-элемент (обычно картинка) и отложенную загрузку.
3. Мобильная версия: проверка мобильной вёрстки и реальный телефон; картинки не должны обрезаться и уезжать.
4. Индексация: в Search Console и Яндекс Вебмастере проверьте, что страницы и изображения доступны роботу.
5. Регулярность: проверка при каждом релизе (шаблон загрузки в CMS) и выборочный аудит раз в квартал.

Измерять эффект стоит по скорости (LCP) и по показам и кликам из поиска (в том числе по картинкам, если они важны вашему бизнесу). Не ждите быстрого роста позиций только от картинок.

Десять частых ошибок

1. Ленивая загрузка на главном изображении первого экрана и отсутствие приоритета.
2. Тяжёлые оригиналы вместо подготовленных размеров и форматов.
3. Нет размеров (width/height): страница прыгает при загрузке.
4. Alt для ключей: набор слов вместо описания.
5. Один alt на все картинки и пустые alt у содержательных изображений.
6. Значимые картинки как фон в CSS: не индексируются.
7. Важный текст только в картинке (меню, цены, условия).
8. Чужие фото без прав.
9. Скриптовая загрузка основного изображения, из-за которой оно появляется поздно.
10. Нет проверки после релизов: новые тяжёлые файлы возвращаются.

Как проверяю изображения я

Изображения входят в мой SEO-аудит блоком скорости и контента: я проверяю вес и формат, LCP-элементы, ленивую загрузку, размеры, alt, адреса, разметку и превью на ключевых шаблонах и составляю приоритетный план исправлений с заданиями для программистов. Результат: PDF-отчёт на 30–50 страниц, прогноз по трафику и заявкам и созвон, на котором я лично расскажу о найденных ошибках и отвечу на вопросы. Стоимость от 30 000 ₽, срок 3–5 рабочих дней для небольшого сайта и 7–10 для крупного магазина.

Итоговый чек-лист (короткая версия, полная в PDF)

• Изображения свои или с лицензией; подготовлены нужного размера, в подходящем формате, сжаты.
• Значимые изображения вставлены через img с src; адреса доступны роботу.
• Главное изображение первого экрана без lazy, с приоритетом; остальные ленивые; размеры заданы.
• Alt описывает изображение без набора ключей; имена файлов понятные; важный текст не только в картинках.
• Предпочтительное изображение и разметка настроены, превью проверено.
• Проверка при релизах и раз в квартал; результат измеряется по скорости и показам.

Об автореВладимир Родионов

Интернет-маркетолог, частный SEO-специалист cetto.ru. 10+ лет в IT, 200+ реализованных проектов, сертификация Яндекса и Google.

Все статьи автора →Задать вопрос в Telegram →