SEO оптимизация изображений: alt-тексты, WebP/AVIF и lazy loading

SEO оптимизация изображений — это комплекс технических и контентных настроек, которые помогают поисковым системам понять визуальный контент страницы, ускоряют её загрузку и повышают позиции как в обычной выдаче, так и в Картинках Google. Правильно оптимизированные изображения приносят дополнительный трафик из поиска картинок, улучшают показатели Core Web Vitals и повышают общую видимость страницы.

По данным Google, изображения присутствуют примерно в 20% поисковых запросов — огромный трафиковый потенциал, который большинство сайтов теряет из-за отсутствия alt-текстов и устаревших форматов файлов.

Что такое SEO оптимизация изображений

SEO оптимизация изображений — это процесс подготовки визуального контента страницы таким образом, чтобы поисковые системы могли его правильно прочитать, проиндексировать и ранжировать. Она охватывает: описательные alt-тексты, современные форматы файлов (WebP, AVIF), правильные названия файлов, сжатие без потери качества, атрибуты размеров для предотвращения CLS, responsive srcset, разметку Schema.org и Image Sitemap.

Google не «видит» изображения так же, как человек. Он анализирует текстовые сигналы вокруг изображения: атрибут alt, название файла, заголовок страницы, подписи и структурированные данные. Именно поэтому правильно заполненные текстовые метаданные — основа видимости изображения в поиске.

Alt-тексты: как правильно писать

Alt-текст (атрибут alt тега <img>) выполняет две функции: доступность для людей с нарушениями зрения (скринридеры) и SEO (основной сигнал релевантности для поискового бота).

Правила написания alt-текста

• Описывайте содержание изображения — не «photo1.jpg», а «Пример alt-текста в скринридере браузера»
• Включайте ключевое слово естественно — не спам, а органическая интеграция: «Процесс сжатия WebP изображения в Squoosh»
• До 125 символов — скринридеры обрезают после этого порога
• Не начинайте с «Изображение…» или «Фото…» — браузеры уже знают, что это изображение
• Декоративные изображения — оставляйте alt="" (пустой, но атрибут обязателен)

Что не стоит делать

• Не дублируйте alt-текст дословно в подписи или названии файла
• Не наполняйте alt ключевыми словами через запятую: «seo изображение, alt текст, webp формат»
• Не пишите одинаковый alt для разных изображений на одной странице

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

Формат файла изображения напрямую влияет на размер файла, скорость загрузки и показатели Core Web Vitals — а следовательно и на ранжирование.

WebP

WebP — формат от Google (2010). Преимущества: на 25–35% меньше JPEG при одинаковом качестве; на 26% меньше PNG с прозрачностью. Поддерживается 95%+ браузеров. Это минимальный стандарт для любого нового сайта.

AVIF

AVIF (AV1 Image File Format) — следующее поколение после WebP. Сжатие на 40–50% лучше JPEG. Поддерживается в Chrome 85+, Firefox 93+, Safari 16+. Для старых браузеров нужен WebP-fallback.

Правильное использование через элемент <picture>

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описательный alt-текст" width="800" height="600">
</picture>

Этот шаблон отдаёт AVIF современным браузерам, WebP — поддерживающим только WebP, а JPEG — старым. Атрибут alt указывается только в финальном <img>.

Lazy Loading: правильная реализация

Lazy loading — это отложенная загрузка изображений: браузер не загружает изображение до тех пор, пока оно не попадёт в видимую область. Это ускоряет начальную загрузку страницы и улучшает LCP.

Реализация

<img src="image.webp" alt="Описательный alt-текст" loading="lazy" width="800" height="600">

Атрибут loading="lazy" поддерживается всеми современными браузерами и Googlebot. Всегда используйте его вместе с width и height — иначе lazy loading может вызвать CLS.

Важно: НЕ используйте lazy loading для главного изображения

Изображение above-the-fold (обычно hero или обложка) должно загружаться немедленно. Используйте loading="eager" или не указывайте атрибут loading. Если Google обнаружит, что LCP-элемент имеет loading="lazy", это ухудшит показатель LCP и ранжирование.

Сжатие и размер файла

Даже в формате WebP большой файл будет тормозить страницу. Рекомендуемые инструменты:

• Squoosh (squoosh.app) — браузерный инструмент от Google, поддерживает AVIF/WebP/JPEG/PNG
• TinyPNG / TinyJPG — онлайн-сжатие с минимальной потерей качества
• imagemin — npm-пакет для автоматизации в build-процессе
• Sharp — Node.js библиотека для массовой конвертации и сжатия

Ориентиры: изображения статьи — до 150 КБ; hero image — до 200 КБ; миниатюры — до 30 КБ. Проверяйте через PageSpeed Insights или Lighthouse.

Правильное название файла

Название файла — ещё один текстовый сигнал для Google. Плохо: IMG_20240312_141523.jpg. Хорошо: seo-optimizaciya-izobrazheniy-alt-tekst.webp.

• Используйте строчные буквы и дефисы (не подчёркивания)
• Включайте основное ключевое слово или его вариацию
• Избегайте стоп-слов и специальных символов
• Максимум 3–5 слов — коротко и описательно

Атрибуты width и height и предотвращение CLS

Cumulative Layout Shift (CLS) — прыжки контента при загрузке — это метрика Core Web Vitals, напрямую влияющая на ранжирование. Основная причина: браузер не знает размеры изображения до загрузки.

Решение: всегда указывайте width и height в пикселях:

<img src="image.webp" alt="Описательный alt-текст" width="1200" height="675" loading="lazy">

Современные браузеры используют эти атрибуты для вычисления соотношения сторон и резервирования места до загрузки файла. Цель CLS: ниже 0.1 (Good).

srcset: адаптивные изображения

Атрибут srcset позволяет браузеру выбрать оптимальный размер изображения в зависимости от ширины экрана. Это снижает расход трафика на мобильных устройствах и ускоряет загрузку.

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Описательный alt-текст"
  width="1200" height="675"
>

Для WordPress: плагины Smush или ShortPixel автоматически генерируют srcset для всех загруженных изображений.

Schema.org и Image Sitemap

Schema.org ImageObject

Разметка ImageObject передаёт Google структурированные метаданные об изображении: автора, лицензию, описание. Особенно важно для Картинок Google и Rich Results.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "name": "SEO оптимизация изображений",
  "url": "https://example.com/images/seo-image.webp",
  "width": 1400,
  "height": 730,
  "author": { "@type": "Organization", "name": "Spilno Agency" }
}
</script>

Image Sitemap

Image Sitemap — это XML-расширение sitemap.xml, перечисляющее все изображения сайта. Особенно важен для изображений, загружаемых через JavaScript или lazy loading.

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/images/seo-image.webp</image:loc>
    <image:title>SEO оптимизация изображений</image:title>
  </image:image>
</url>

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

• Все изображения имеют уникальный описательный alt-текст (до 125 символов)
• Alt-тексты содержат ключевое слово естественно, без переспама
• Декоративные изображения имеют alt=»» (пустой атрибут)
• Все новые изображения конвертированы в WebP или AVIF
• Элемент <picture> с AVIF + WebP + JPEG fallback используется для ключевых изображений
• loading=»lazy» для всех изображений ниже fold
• loading=»eager» или отсутствие атрибута для hero image LCP (above fold)
• Все изображения имеют атрибуты width и height
• CLS проверен через PageSpeed Insights (< 0.1)
• Названия файлов: строчные буквы, дефисы, ключевое слово, без спецсимволов
• srcset и sizes настроены для адаптивных изображений
• Schema.org ImageObject добавлена для ключевых изображений
• Image Sitemap настроен или подключён через плагин
• Размер каждого изображения проверен (статья: <150 КБ, hero: <200 КБ)

SEO и GEO-ориентация

Материал оптимизирован под семантический кластер «SEO оптимизация изображений»: alt-тексты, форматы WebP/AVIF, lazy loading, сжатие, srcset, предотвращение CLS, Schema.org и Image Sitemap. GEO-сигналы: Spilno Agency, рынки Украины, Польши и англоязычных аудиторий. Статья соответствует требованиям E-E-A-T: практический опыт агентства, конкретные примеры кода и чек-лист из 14 пунктов.

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

Что такое alt-текст и зачем он нужен для SEO?

Alt-текст (атрибут alt тега img) — это текстовое описание изображения, которое читают поисковые роботы и скринридеры для людей с нарушениями зрения. Для SEO alt-текст является основным сигналом релевантности изображения: Google использует его, чтобы понять, что изображено на фото, и правильно ранжировать его в Картинках Google. Без alt-текста изображение фактически невидимо для поисковых систем.

Какой формат изображений лучше для SEO: WebP или AVIF?

Оба формата превосходят JPEG и PNG по сжатию при эквивалентном визуальном качестве. WebP даёт файлы на 25–35% меньше JPEG при примерно 95% покрытии браузеров. AVIF даёт файлы на 40–50% меньше, но имеет несколько меньшую поддержку браузеров. Оптимальная стратегия — использовать элемент picture с AVIF в качестве основного источника и WebP как fallback, обеспечивая совместимость при максимальном сжатии.

Влияет ли lazy loading на SEO?

Lazy loading (атрибут loading=»lazy» у img) указывает браузеру не загружать изображения до тех пор, пока они не попадут в поле зрения. Это ускоряет начальную загрузку страницы и улучшает LCP для контента above-the-fold. Googlebot полностью поддерживает lazy loading. Критическое правило: НЕ применяйте loading=»lazy» к главному изображению-герою выше fold — используйте loading=»eager» или не указывайте атрибут, чтобы это изображение было приоритизировано при измерении LCP.

Зачем всегда указывать атрибуты width и height для изображений?

Атрибуты width и height сообщают браузеру размеры изображения ещё до его загрузки. Это позволяет браузеру заблаговременно зарезервировать нужное место в макете, предотвращая Cumulative Layout Shift (CLS) — визуальные прыжки контента при загрузке изображений. CLS — это показатель Core Web Vitals, напрямую влияющий на ранжирование Google. Всегда объявляйте явные размеры для всех изображений, особенно выше fold.

Нужен ли Image Sitemap?

Image Sitemap — это XML-файл (или специальная секция в основном sitemap.xml), содержащий список всех URL изображений на сайте с метаданными: заголовком, описанием, лицензией. Он помогает Google быстрее обнаруживать и индексировать изображения, особенно загружаемые через JavaScript или lazy loading. Image Sitemap особенно важен для сайтов с большим количеством изображений — интернет-магазины, фотопортфолио, новостные сайты.

Нужен аудит SEO оптимизации изображений на вашем сайте? Spilno Agency проверит alt-тексты, форматы, размеры и скорость загрузки — и предоставит приоритетный план оптимизации.