Как оптимизировать изображения для SEO: пошаговый чеклист
Оптимизация изображений для SEO — это комплекс технических и контентных мер, направленных на улучшение видимости графических файлов в поисковых системах, ускорение загрузки страниц и повышение общего рейтинга сайта в результатах поиска.
Выбор правильного формата изображений
От выбора формата напрямую зависит скорость загрузки и качество отображения. В 2026 году поисковые системы всё активнее учитывают Core Web Vitals, где скорость загрузки играет ключевую роль. Используй следующие форматы в зависимости от задачи:
| Формат | Применение | Средний размер файла | Поддержка браузерами |
|---|---|---|---|
| WebP | Фото, иллюстрации | на 25–34% меньше JPEG | 97%+ |
| AVIF | Высококачественные фото | на 50% меньше JPEG | 90%+ |
| SVG | Иконки, логотипы | минимальный | 99%+ |
| PNG | Скриншоты, прозрачность | средний–высокий | 100% |
| JPEG | Фотографии без прозрачности | средний | 100% |
Сжатие изображений без потери качества
Сжатие изображений — один из наиболее влиятельных факторов скорости загрузки страницы. По данным Google PageSpeed на 2025–2026 годы, несжатые изображения являются причиной замедления загрузки в 62% случаев среди сайтов с низким показателем LCP.
- Используй сжатие без потерь (lossless) для PNG и SVG: инструменты — Squoosh, ImageOptim, TinyPNG
- Для JPEG и WebP применяй сжатие с потерями (lossy) при качестве 75–85% — это оптимальный баланс
- Целевой размер изображения для веба: до 150 КБ для большинства блочных изображений
- Для фоновых изображений — не более 300–400 КБ
- Иконки и логотипы в SVG должны занимать менее 10 КБ
Имя файла и ключевые слова
Поисковые роботы читают имя файла до его загрузки. Правильное название — это часть семантической разметки страницы.
- Используй описательные имена: krasnie-rozy-buket.webp вместо IMG_3847.jpg
- Разделяй слова дефисами, а не нижними подчёркиваниями
- Включай целевое ключевое слово, но избегай переспама
- Максимальная длина имени файла — не более 5 слов
- Не используй кириллицу в именах файлов — только латиница
Alt-теги: обязательный элемент оптимизации
Атрибут alt — это текстовое описание изображения, которое используется поисковыми системами для понимания его содержания, а также скринридерами для людей с нарушениями зрения.
| Тип изображения | Рекомендуемый alt | Пример |
|---|---|---|
| Информационное фото | Описание + ключевое слово | «букет красных роз на белом фоне» |
| Декоративное изображение | Пустой alt="" | alt="" |
| Кнопка/иконка | Функциональное описание | «кнопка добавить в корзину» |
| Логотип | Название компании | «логотип компании FlowerShop» |
Оптимальная длина alt-текста в 2026 году — до 125 символов. Именно столько считывают большинство скринридеров и поисковых краулеров.
Адаптивность и атрибут srcset
Адаптивные изображения позволяют загружать файлы нужного размера в зависимости от разрешения экрана устройства пользователя. Это снижает нагрузку на мобильные сети и улучшает показатели Core Web Vitals.
- Используй атрибут srcset для указания нескольких версий изображения
- Создавай минимум 3 версии каждого изображения: 480px, 768px, 1200px
- Указывай атрибут sizes для правильного выбора браузером нужной версии
- Для мобильных устройств доля трафика в 2026 году составляет более 63% от общего — адаптивность критична
Lazy Loading и технические параметры загрузки
Ленивая загрузка изображений (lazy loading) официально поддерживается всеми современными браузерами и рекомендована Google как стандартная практика. Это позволяет откладывать загрузку изображений до момента, когда они попадают в видимую область экрана.
- Добавляй атрибут loading="lazy" ко всем изображениям ниже первого экрана
- Для изображений в зоне первого экрана (above the fold) используй loading="eager" или не указывай атрибут
- Указывай атрибуты width и height для каждого изображения — это предотвращает сдвиг контента (CLS)
- Целевой показатель CLS в 2026 году: менее 0.1 по стандарту Core Web Vitals
Карта изображений и структурированные данные
Для попадания в Google Images и визуальные блоки поиска необходимо правильно разметить изображения с помощью структурированных данных Schema.org.
- Используй разметку ImageObject из Schema.org для всех ключевых изображений
- Добавляй изображения в XML Sitemap с тегом <image:image>
- Указывай image:caption и image:title для дополнительного контекста
- По данным Search Console 2025 года, страницы с правильной разметкой изображений получают на 18–27% больше кликов из Google Images
- Для e-commerce добавляй разметку Product с полем image — это влияет на отображение в Shopping-блоках
CDN и хранение изображений
Скорость доставки изображений зависит не только от их размера, но и от физического расположения серверов.
| Подход | Влияние на TTFB | Рекомендация |
|---|---|---|
| Хранение на основном сервере | Высокий TTFB при удалённых пользователях | Только для малых сайтов |
| CDN (Cloudflare, Fastly) | Снижение TTFB на 40–70% | Рекомендуется всем |
| Image CDN (Imgix, Cloudinary) | Снижение TTFB + авто-оптимизация | Оптимально для e-commerce |
Пошаговый чеклист оптимизации изображений
Используй этот чеклист при публикации каждого нового материала или при техническом аудите уже существующих страниц.
- Выбери правильный формат: WebP или AVIF для фото, SVG для иконок
- Сожми файл: целевой размер — до 150 КБ для стандартных изображений
- Назови файл по-человечески с ключевым словом через дефис (латиница)
- Добавь осмысленный alt-текст до 125 символов
- Укажи атрибуты width и height в HTML-коде
- Подключи lazy loading для изображений ниже первого экрана
- Создай адаптивные версии через srcset (минимум 3 размера)
- Добавь изображения в XML Sitemap
- Разметь ключевые изображения через Schema.org
- Подключи CDN для ускорения доставки файлов
- Проверь LCP, CLS и TTFB через Google PageSpeed Insights