SEO для изображений: alt-текст, вес файлов, форматы и lazy loading

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

SEO для изображений — это умение сделать правильно обе вещи: чтобы изображения были понятны поисковикам и доступны всем и при этом оставались быстрыми.

Пишите полезный alt-текст

Атрибут alt описывает изображение словами:

<img src="latte-art.webp" alt="Barista pouring a heart-shaped latte art design into a white cup" width="1200" height="800">

У alt-текста три задачи:

1. Доступность — программы экранного доступа зачитывают его людям, которые не видят изображение
2. Замена — браузеры показывают его, если изображение не загрузилось
3. Понимание — поисковые системы используют его вместе с окружающим текстом, чтобы понять, что изображено

Как написать хороший alt-текст

• Опишите, что изображено и зачем это изображение на странице
• Будьте конкретны: «красный складной велосипед Brompton в сложенном виде рядом со столом» лучше, чем «велосипед»
• Пишите кратко — обычно до 125 символов
• Не начинайте с «изображение» или «фото»: программы экранного доступа и так сообщают, что это картинка
• Используйте релевантные ключевые слова, только если они естественно описывают изображение

Декоративные изображения

У чисто декоративных изображений — разделителей, фоновых украшений — атрибут alt должен быть пустым: alt="". Это сообщает программам экранного доступа, что их нужно пропустить. Совсем не указывать атрибут — ошибка: некоторые программы экранного доступа тогда прочитают имя файла.

Используйте описательные имена файлов

IMG_4821.jpg никому ничего не говорит. brompton-folding-bike-folded.jpg даёт поисковикам ещё одну подсказку. Используйте латиницу в нижнем регистре, слова разделяйте дефисами.

Выберите правильный формат

Для большинства сайтов самое большое отдельное улучшение — отдавать WebP или AVIF через элемент <picture> (с JPEG в качестве запасного варианта при необходимости):

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Mountain lake at sunrise" width="1600" height="900">
</picture>

Большинство CMS, плагинов для изображений и CDN умеют автоматически конвертировать изображения в современные форматы.

Уменьшайте и сжимайте

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

• Уменьшайте изображения до максимального размера, в котором они реально показываются (вдвое больше для экранов высокой плотности, если нужно)
• Сжимайте их — качество около 75–85% обычно неотличимо от оригинала
• Старайтесь, чтобы большинство изображений в контенте весили меньше 150–200 КБ, а изображения на первом экране — в идеале меньше 300 КБ

Отдавайте адаптивные изображения

Телефонам не нужны изображения десктопного размера. Атрибуты srcset и sizes позволяют браузеру выбрать подходящий файл:

<img src="product-800.webp"
     srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Leather wallet in tan, open to show card slots" width="800" height="600">

WordPress и большинство современных фреймворков генерируют это автоматически.

Указывайте ширину и высоту, чтобы избежать сдвигов макета

Если у изображения нет атрибутов width и height, браузер не знает, сколько места зарезервировать, и контент прыгает при загрузке изображения. Это ухудшает Cumulative Layout Shift (CLS) — один из Core Web Vitals. Всегда указывайте размеры изображения (или используйте CSS-свойство aspect-ratio); адаптивный CSS всё равно сможет его масштабировать.

Используйте lazy loading для изображений ниже первого экрана

loading="lazy" говорит браузеру загружать изображение только тогда, когда до него вот-вот дойдёт прокрутка:

<img src="gallery-3.webp" alt="…" loading="lazy" width="600" height="400">

Используйте его для изображений ниже по странице, но не для главного изображения на первом экране. Lazy loading самого крупного изображения первого экрана задерживает Largest Contentful Paint. Для него лучше подумайте о fetchpriority="high".

Помогите изображениям находиться

• Размещайте изображения рядом с релевантным текстом и добавляйте подписи, где это полезно, — Google использует окружающий контент, чтобы понять изображения
• Используйте стандартные элементы <img>, а не CSS-фоны, для значимых изображений, чтобы поисковики могли их найти
• Добавляйте изображения в XML-карту сайта или отдельную карту изображений, если у вас большая медиатека
• Указывайте изображение в структурированных данных, где это уместно (Product, Article, Recipe)
• Задайте og:image, чтобы при репостах в соцсетях показывалось эффектное превью

Чек-лист SEO для изображений

• Описательный alt у каждого значимого изображения; пустой alt у декоративных
• Описательные имена файлов через дефис
• Формат WebP или AVIF
• Уменьшены до размера показа и сжаты
• srcset для адаптивной отдачи
• Заданы атрибуты ширины и высоты
• Lazy loading для изображений ниже первого экрана, но не для главного
• Длительное кэширование на сервере или CDN

SEO для изображений в интернет-магазинах

Фото товаров очень сильно влияют на продажи. Для магазинов:

• Показывайте товар с разных сторон и в использовании. Google Картинки и товарные результаты отдают предпочтение чётким качественным фото.
• Используйте единообразное чистое главное фото для каждого товара — его часто показывают в товарных результатах.
• Пишите alt, который называет товар и вариант: «Женские беговые кроссовки Trail Runner X, бирюзовые, вид сбоку».
• Указывайте изображения в структурированных данных Product с абсолютными URL.
• Изображения с зумом должны загружать крупную версию только по необходимости, а не при загрузке страницы.

SEO для изображений в блогах и СМИ

• По возможности используйте оригинальные изображения. Собственные фото, схемы и графики могут приносить ссылки и выделяться в поиске по картинкам; стоковые фото есть на тысячах сайтов.
• Добавляйте подписи, когда изображение несёт информацию. Подписи — один из самых читаемых текстов на странице.
• Создавайте схемы и инфографику для сложных тем, которыми хочется поделиться, и дублируйте ключевую информацию текстом.
• Выбирайте выразительное главное изображение шириной не меньше 1200 пикселей. Google Discover отдаёт предпочтение крупным качественным изображениям, а большие превью можно разрешить настройкой robots max-image-preview:large.

Фоновые изображения и CSS

Изображения, заданные через CSS background-image, не видны поисковикам как контент, и у них нет alt-текста. Используйте их только для оформления. Если изображение несёт смысл — товар, график, фото команды, — используйте элемент <img>.

CDN для изображений и автоматическая оптимизация

Вручную управлять множеством размеров и форматов быстро становится невозможно. CDN и сервисы для изображений (Cloudflare Images, Cloudinary, imgix, Bunny Optimizer и другие), а также многие плагины WordPress умеют:

• Автоматически конвертировать изображения в WebP или AVIF
• На лету уменьшать их под каждое устройство
• Умно сжимать
• Кэшировать изображения ближе к посетителям

Если используете такой сервис, проверьте, что URL изображений остаются стабильными и доступными для сканирования и что CDN не блокирует Googlebot.

Как измерить эффект

Откройте отчёт «Эффективность» в Google Search Console и переключите тип поиска на Картинки, чтобы увидеть, сколько кликов и показов получают ваши изображения и по каким запросам. Отслеживайте Core Web Vitals в том же инструменте, чтобы убедиться, что оптимизация изображений улучшает Largest Contentful Paint и Cumulative Layout Shift.

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

1. Загружать фото размером с камеры и позволять браузеру их уменьшать
2. Отсутствующие атрибуты alt или alt-текст, набитый ключевыми словами
3. Lazy loading главного изображения первого экрана
4. Нет ширины и высоты — отсюда сдвиги макета
5. Текст, вшитый в изображения вместо HTML, — его не видят поисковики и программы экранного доступа, и его нельзя перевести
6. Блокировка папок с изображениями в robots.txt

Главное

• Пишите alt-текст, который описывает, что изображено и зачем; для декоративных изображений используйте пустой alt.
• Отдавайте WebP или AVIF, уменьшенные до размера показа и сжатые.
• Всегда задавайте ширину и высоту, чтобы избежать сдвигов макета.
• Используйте lazy loading для изображений ниже первого экрана, но никогда — для главного изображения.
• Используйте настоящие элементы img для значимых изображений, рядом с релевантным текстом и с описательными именами файлов.
• Смотрите данные поиска по картинкам в Search Console, чтобы измерить трафик от изображений.

Часто задаваемые вопросы

Помогает ли alt-текст позициям?

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

Что выбрать: WebP или AVIF?

Оба формата хорошо поддерживаются. AVIF часто даёт более лёгкие файлы; WebP быстрее кодируется и шире поддерживается старыми инструментами. Многие сайты отдают AVIF с WebP в качестве запасного варианта.

Важны ли имена файлов изображений?

Немного. Описательные имена файлов — небольшой дополнительный сигнал, и с ними проще управлять медиатекой.

Хорош ли lazy loading для SEO?

Да, если использовать его правильно. Google поддерживает нативный loading="lazy". Просто не применяйте lazy loading к изображениям, которые видны сразу при загрузке страницы.