SEO изображений находится на пересечении оптимизации производительности и поисковой видимости. Изображения — как правило, наиболее крупные ресурсы на странице: неправильно подобранные по размеру или формату изображения — ведущая причина плохих показателей Largest Contentful Paint. В то же время изображения самостоятельно индексируются через Google Картинки, генерируя значительный трафик по запросам с визуальным намерением. Оптимизация изображений одновременно решает обе задачи.
Выбор формата файла
Выбор правильного формата изображения — решение с наибольшим потенциалом оптимизации:
WebP: Открытый формат Google, поддерживаемый всеми современными браузерами. Сжимается на 25–35% лучше JPEG при сравнимом качестве для фотографий. Основной выбор для фотографического контента.
AVIF: Ещё эффективнее WebP (на 30–40% меньше WebP при сравнимом качестве). Поддержка браузеров хорошая, но неполная — используйте с резервом WebP через <picture>.
JPEG: Всё ещё подходит для фотографических изображений при необходимости поддержки старых браузеров. Используйте прогрессивные JPEG для лучшего воспринимаемого качества загрузки на медленных соединениях.
PNG: Только для изображений с прозрачностью или точными цветами (логотипы, иконки, скриншоты с текстом).
SVG: Векторный формат для логотипов, иконок и иллюстраций. Бесконечная масштабируемость без потери качества.
Отдача современных форматов с резервом:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="Описание изображения" width="1200" height="800">
</picture>
Размеры изображений и адаптивные изображения
Отдача изображений правильного размера для контекста отображения критична для производительности:
Всегда указывайте атрибуты width и height: Это позволяет браузерам резервировать пространство разметки до загрузки изображения, предотвращая CLS.
Используйте srcset для адаптивных изображений:
<img
src="/image-800.webp"
srcset="/image-400.webp 400w, /image-800.webp 800w, /image-1600.webp 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="Описание"
width="800"
height="600"
>
Мобильный пользователь с экраном 375px получит изображение 400px вместо 1600px — в 4 раза меньше байт.
Alt-текст для SEO и доступности
Alt-текст выполняет две функции: доступность (программы чтения с экрана его озвучивают) и SEO (Google использует его для понимания контента изображения).
Лучшие практики alt-текста:
- Описывайте, что показано на изображении, конкретно и точно
- Включайте релевантные ключевые слова органично — не заполняйте alt-текст ключевыми словами
- Не превышайте 125 символов
- Не начинайте с «Изображение» или «Фото» — это избыточно
- Для декоративных изображений используйте
alt=""
Примеры:
Плохо: alt="seo"
Плохо: alt="изображение дашборда инструментов seo с ключевыми словами"
Хорошо: alt="Дашборд инструментов SEO с позициями ключевых слов в органическом поиске"
Ленивая загрузка изображений
Атрибут loading="lazy" откладывает загрузку изображений до их приближения к viewport:
<img src="/blog-thumbnail.webp" alt="Миниатюра поста" loading="lazy" width="400" height="300">
Критическое исключение: Никогда не применяйте ленивую загрузку к LCP-изображению. Ленивая загрузка LCP-изображения задерживает его загрузку, увеличивая время LCP и ухудшая Core Web Vitals.
Правило: ленивая загрузка всех изображений, кроме одного-двух появляющихся при первоначальной загрузке.
Карты сайта для изображений
XML-карта сайта изображений расширяет стандартную с метаданными изображений, помогая Google обнаруживать изображения:
<url>
<loc>https://example.com/blog/technical-seo-guide/</loc>
<image:image>
<image:loc>https://example.com/images/technical-seo-diagram.webp</image:loc>
<image:title>Диаграмма архитектуры технического SEO</image:title>
<image:caption>Диаграмма, показывающая связь между краулингом, индексированием и ранжированием</image:caption>
</image:image>
</url>
Отправляйте карты сайта изображений через Google Search Console.
Структурированные данные ImageObject
Для статей, рецептов, продуктов или любых страниц с основным изображением добавление схемы ImageObject явно в JSON-LD страницы даёт Google структурированную информацию:
{
"@type": "ImageObject",
"contentUrl": "https://example.com/images/hero.webp",
"description": "Диаграмма процесса краулинга в техническом SEO",
"name": "Процесс краулинга технического SEO",
"width": 1200,
"height": 800
}
Оптимизация для Google Картинок
Google Картинки получают значительный объём поиска по запросам с визуальным намерением: фотографии продуктов, инфографика, диаграммы, рецепты.
Сигналы, влияющие на ранжирование в Google Картинках:
- Контекст страницы: Страница с изображением должна быть релевантна его теме
- Alt-текст: Основной текстовый сигнал контента изображения
- Имя файла: Описательные имена (
crawl-budget-diagram.webp) vs.IMG_20260516.webp - Окружающий текст: Контент рядом с изображением на странице
- Качество страницы: Высококачественные страничные сигналы → лучшая видимость в поиске изображений
CDN и доставка изображений
Скорость доставки изображений напрямую влияет на LCP. Рекомендации:
- Отдавайте изображения с CDN с граничными узлами рядом с пользователями
- Включите HTTP/2 или HTTP/3 для мультиплексированных запросов изображений
- Установите правильные заголовки кэша
- Используйте CDN с оптимизацией изображений на лету (Cloudflare Images, Imgix, Cloudinary), который обрабатывает конвертацию форматов и изменение размеров автоматически