SEO картинок: alt, title, форматы и оптимизация

Зачем вообще оптимизировать картинки под поиск

Три причины, каждая приносит деньги по-своему.

Трафик из поиска по картинкам. Яндекс.Картинки и Google Images — отдельная поисковая выдача с огромной аудиторией. Люди ищут «как выглядит», «пример», «схема», «дизайн интерьера», «татуировка эскиз» и кликают прямо по изображению, а оттуда переходят на сайт. Размечены картинки правильно — ты собираешь этот поток. Нет — его забирает тот, кто заморочился.

Скорость страницы. Изображения — самый тяжёлый тип контента на среднем сайте, часто 60–80% веса страницы. Тяжёлые картинки бьют по Core Web Vitals, в первую очередь по LCP — метрике отрисовки самого крупного элемента экрана. Крупный элемент почти всегда картинка. Медленный LCP роняет позиции и конверсию: пользователь уходит, не дождавшись загрузки.

Доступность. Alt-текст читает вслух скринридер незрячему пользователю. Это и вопрос этики, и сигнал качества для поисковых систем, которые всё внимательнее к доступности.

Одна работа закрывает три задачи. Редкий случай, когда усилие окупается настолько кратно.

Alt-текст: что это и как писать

Alt (alternative text, альтернативный текст) — это описание картинки в атрибуте alt тега img. Его показывают, когда изображение не загрузилось, его озвучивает скринридер, и его читает поисковый робот, чтобы понять содержимое картинки.

Правила короткие.

• Описывай то, что на картинке, по сути. Робот не видит пикселей, он верит твоему тексту. alt="рыжий кот спит на подоконнике" говорит поиску ровно то, что нужно.
• Пиши для человека, ключ вставляй естественно. Для статьи про уход за газоном alt="газонокосилка стрижёт зелёный газон на даче" работает. А alt="газонокосилка купить дёшево недорого Москва" — спам, за который прилетит фильтр.
• Держи длину в районе 5–12 слов. Скринридер зачитывает alt целиком, и полотно на три строки мучает пользователя.
• Без «фото», «картинка», «изображение» в начале. Робот и так знает, что это img. Слова-пустышки съедают место.

Плохой alt — alt="IMG_4021", пустой alt на смысловой картинке, набор мусора alt="фото картинка изображение рисунок". Хороший — alt="схема внутренней перелинковки со стрелками между страницами" или alt="разница между WebP и JPEG на примере одной фотографии".

Когда alt оставлять пустым. Декоративные картинки — фоновые узоры, разделители, иконки рядом с текстом, который и так всё объясняет — получают пустой атрибут alt (именно пустой, а не отсутствие атрибута). Так скринридер молча пропустит их, и пользователь не будет слушать «декоративная линия, декоративная линия». Пустой alt — осознанный сигнал «здесь описывать нечего».

Title картинки: нужен ли он

Title — это атрибут title тега img, всплывающая подсказка при наведении курсора. Его часто путают с alt, хотя роли разные.

Alt отвечает на вопрос «что изображено» для тех, кто картинку не видит. Title даёт подсказку тому, кто картинку видит и навёл на неё мышь. На мобильных title вообще не показывается — там нет наведения. Скринридеры по умолчанию title чаще игнорируют.

Для SEO вес title близок к нулю. Поисковики его учитывают слабо, и дублировать в него alt бессмысленно — двойной пользы не будет, а поддерживать два одинаковых текста утомительно.

Моя практика: alt заполняю всегда и осмысленно, title ставлю точечно, когда всплывающая подсказка реально помогает пользователю. На инфографике сложный термин можно расшифровать в title. В остальных случаях спокойно оставляю title пустым и сплю хорошо.

Имя файла: осмысленное, с дефисами

Робот читает имя файла как ещё один сигнал о содержимом. photo_2027-07-10_15-42.jpg не говорит ему ничего. seo-optimizaciya-kartinok.webp говорит сразу.

• Осмысленное название с ключевым словом. Опиши, что на картинке, теми же словами, что ищут люди.
• Транслит или английский. Кириллица в URL превращается в нечитаемую вереницу %D0%BA..., которая ломает ссылки и хуже индексируется. Пиши латиницей: alt-i-title-kartinki.webp.
• Дефисы как разделители слов. Google трактует дефис как пробел, а подчёркивание склеивает слова в одно. optimizaciya-izobrazhenij.jpg разбивается на слова правильно, optimizaciya_izobrazhenij.jpg читается как одно длинное слово.
• Никаких пробелов, заглавных и лишних символов. Пробел превращается в %20, регистр на части серверов критичен и порождает битые ссылки. Только строчные буквы, цифры и дефисы.

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

Вес и сжатие: почему тяжёлые картинки топят скорость

Каждый лишний мегабайт картинки — это секунды ожидания на мобильном интернете и просевший LCP. Фотография с телефона легко весит 4–8 МБ, а для веба хватает 100–300 КБ без видимой потери качества. Разница в 20 раз висит на странице просто потому, что файл не сжали.

Без потерь (lossless) сохраняет каждый пиксель и выкидывает только избыточные данные. Подходит для скриншотов, схем, логотипов, где важна чёткость линий. Экономия скромнее.

С потерями (lossy) отбрасывает детали, которые глаз почти не замечает, и ужимает файл в разы. Идеально для фотографий. На разумном уровне сжатия ты не увидишь разницы, а вес упадёт на 60–80%.

Рабочий процесс. Прогоняй фотографии через lossy-сжатие с качеством около 75–85 — зона, где артефакты ещё незаметны, а файл уже лёгкий. Скриншоты и графику с текстом гони через lossless. Инструменты — Squoosh в браузере, TinyPNG, ImageOptim, консольные cwebp и avifenc для пакетной обработки. Настрой автосжатие прямо на сборке сайта или в CMS, чтобы не жать вручную каждую картинку.

Современные форматы: WebP, AVIF, SVG

Старые JPEG и PNG отжили своё для большинства задач. Есть форматы легче при том же качестве.

WebP — золотая середина на сегодня. Весит на 25–35% меньше JPEG при равном качестве, умеет прозрачность как PNG и анимацию как GIF. Поддержка во всех актуальных браузерах полная. Выбираешь один формат на весь сайт и хочешь спать спокойно — бери WebP.

AVIF — следующий шаг, сжимает ещё агрессивнее, на 20–50% легче WebP, особенно хорош на фотографиях с плавными градиентами. Кодирование медленнее, поддержка чуть моложе, но уже широкая. Отдавай AVIF там, где вес критичен, с откатом на WebP через тег picture.

SVG — для иконок, логотипов и простых схем. Векторный формат: он хранит формулы, а не пиксели, поэтому масштабируется до любого размера без потери резкости и весит копейки. Логотип в SVG останется чётким и на ретине, и на билборде. Для фотографий SVG не годится — только для графики из линий и заливок.

Практичная связка — picture с AVIF, WebP-запаской и JPEG на крайний случай. Браузер сам возьмёт первый формат, который умеет открыть.

<picture>
  <source srcset="kartinka.avif" type="image/avif">
  <source srcset="kartinka.webp" type="image/webp">
  <img src="kartinka.jpg" alt="описание картинки">
</picture>

Размеры, адаптив и lazy loading

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

Подгоняй реальный размер файла под контейнер. Картинка в колонке на 800 px не должна быть шире примерно 1600 px (двойной запас под ретину).

Отдавай разные размеры через srcset. Атрибут srcset даёт браузеру набор вариантов, и он сам выбирает подходящий под ширину экрана и плотность пикселей. Телефон возьмёт маленький файл, десктоп с 4K — крупный.

<img src="foto-800.webp"
     srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="описание картинки">

Вешай lazy loading на всё, что ниже первого экрана. Атрибут loading="lazy" откладывает загрузку картинок, пока пользователь до них не долистает. Страница стартует быстрее, трафик экономится.

И главное исключение: не ставь loading="lazy" на LCP-картинку — ту, что видна сразу при открытии (главный баннер, первое фото статьи). Ленивая загрузка отложит её отрисовку, LCP просядет, и ты своими руками ухудшишь ровно ту метрику, которую пытался вылечить. Верхнюю картинку экрана грузи сразу, лучше с fetchpriority="high", остальное лениво.

Как поиск понимает картинку: подпись и окружение

Робот не смотрит на изображение глазами (хотя нейросети уже подбираются). Он собирает смысл картинки из текстового окружения, и ты можешь этим управлять.

Подпись (caption) под картинкой в теге figcaption — сильный сигнал. Её читают и люди, и поиск, и она заметно поднимает релевантность изображения запросу. Плюс подписи под картинками читают чаще основного текста.

<figure>
  <img src="grafik-lcp.webp" alt="график улучшения LCP после сжатия картинок">
  <figcaption>Как сжатие сократило LCP с 4,2 до 1,8 секунды</figcaption>
</figure>

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

Заголовок ближайшего раздела и общий тайтл тоже участвуют. Картинка внутри блока про WebP получает контекст от заголовка этого блока. Всё складывается в единую картину, по которой робот решает, по каким запросам показывать изображение.

Sitemap для картинок и разметка ImageObject

Два технических инструмента, которые ускоряют индексацию и обогащают выдачу.

Sitemap для изображений подсказывает поисковику, какие картинки есть на сайте, включая те, что подгружаются скриптами. Можно вести отдельный image-sitemap или добавить теги image:image в основной sitemap рядом с URL страниц. Для крупного каталога или галереи это ощутимо ускоряет попадание картинок в поиск.

<url>
  <loc>https://site.ru/blog/seo-kartinok</loc>
  <image:image>
    <image:loc>https://site.ru/img/seo-kartinok.webp</image:loc>
  </image:image>
</url>

Микроразметка ImageObject (Schema.org) описывает картинку структурированными данными: URL, подпись, автор, лицензия, размеры. Поисковики любят такие данные и точнее понимают роль изображения. Оформляется через JSON-LD. Особенно полезно для лицензионного контента: Google умеет помечать в Images картинки с указанной лицензией. Как размечать страницу — в гайде по микроразметке.

Как попасть в Яндекс.Картинки и Google Images

Собери всё вышесказанное в чек-лист попадания в поиск по картинкам.

• Осмысленное имя файла на транслите с дефисами.
• Заполненный по сути alt с естественным ключом.
• Подпись figcaption и релевантный текст вокруг.
• Лёгкий вес и современный формат — быстрая страница ранжируется в Картинках выше.
• Картинка не закрыта от индексации в robots.txt и не спрятана за ленивой загрузкой без нормального src.
• Уникальность: своё фото или переработанная графика собирает трафик, стоковая картинка с тысячи других сайтов почти не имеет шансов.
• Image-sitemap и разметка ImageObject для ускорения.
• Приличное разрешение: слишком мелкие картинки поиск в выдачу пускает неохотно.

Яндекс и Google работают по схожей логике, различия в деталях. Яндекс сильнее опирается на текстовое окружение и поведенческие сигналы, Google — на структуру и техническую чистоту. Закрой базовый чек-лист, и попадёшь в обе выдачи.

Частые вопросы

Главное