Картинки, alt и оптимизация медиа

Как картинки участвуют в SEO: alt-тексты для смысла и доступности плюс оптимизация ради скорости.

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

Зачем нужен alt

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

<!-- Плохо: бессмысленно -->
<img src="img_2024_final_v3.png" alt="картинка">

<!-- Хорошо: описывает суть -->
<img src="seo-crawling-diagram.png"
     alt="Схема краулинга: бот берёт URL из очереди и обходит ссылки">

<!-- Декоративная картинка: пустой alt, чтобы скринридер её пропустил -->
<img src="divider.svg" alt="">

Правило: для значимых картинок — осмысленный alt; для чисто декоративных — пустой alt="" (не отсутствующий, а именно пустой), чтобы вспомогательные технологии их пропускали.

Картинки в поиске по картинкам

Помимо основного веб-поиска есть отдельный поиск по картинкам — заметный источник трафика для интернет-магазинов, рецептов, туториалов с диаграммами. Туда страница попадает именно через изображения, и единственный текстовый ключ к смыслу картинки для поисковика — это alt, имя файла и подпись рядом. Осмысленное имя файла (seo-crawling-diagram.png вместо IMG_2024.png) и точный alt буквально открывают дополнительный канал трафика. Это редкий случай, когда забота о доступности и про SEO — одно и то же действие: один и тот же alt и незрячему пользователю опишет картинку, и поисковику объяснит, что на ней изображено.

Картинки и скорость = SEO

Тяжёлые картинки — частая причина плохого LCP (см. урок про Core Web Vitals), а скорость влияет на ранжирование. Что делает разработчик:

Современные форматы: WebP/AVIF вместо тяжёлых JPEG/PNG.
Размеры в HTML: атрибуты width и height резервируют место и предотвращают «скачки» вёрстки (CLS).
Ленивая загрузка: loading="lazy" для картинок ниже первого экрана.
Адаптивные картинки: srcset отдаёт мобильным меньший файл.

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
  sizes="(max-width: 600px) 400px, 800px"
  width="800" height="450"
  loading="lazy"
  alt="Скриншот панели аудита SEO с найденными ошибками">

Как работает под капотом: проверка alt

Линтер доступности перебирает картинки и помечает те, у которых нет alt (декоративные с пустым alt он пропускает). Смоделируем:

images = [
    {"src": "diagram.png", "alt": "Схема краулинга"},      # ок
    {"src": "photo.jpg",   "alt": None},                   # ошибка: нет alt
    {"src": "divider.svg", "alt": ""},                     # ок: декоративная
    {"src": "chart.png",   "alt": "  "},                   # ошибка: пробелы
]

for img in images:
    alt = img["alt"]
    if alt is None:
        print(f"ОШИБКА  {img['src']}: атрибут alt отсутствует")
    elif alt.strip() == "" and alt != "":
        print(f"ОШИБКА  {img['src']}: alt из пробелов")
    else:
        status = "декоративная" if alt == "" else "ок"
        print(f"OK      {img['src']}: {status}")

Вывод:

OK      diagram.png: ок
ОШИБКА  photo.jpg: атрибут alt отсутствует
OK      divider.svg: декоративная
ОШИБКА  chart.png: alt из пробелов

Частые ошибки

Нет alt вовсе — теряете трафик из картиночного поиска и режете доступность.
alt-спам: запихивание ключевых слов вместо описания.
Нет width/height — вёрстка прыгает при загрузке (плохой CLS).
Гигантские оригиналы на 5 МБ, ужатые только через CSS, — браузер всё равно качает полный файл.

Итог

alt описывает суть картинки для поиска и скринридеров; для декора — пустой alt="".
Картинки сильно влияют на скорость: WebP/AVIF, srcset, loading="lazy".
Указывайте width/height, чтобы не было скачков вёрстки (CLS).