Оптимизация изображений для сайта: WebP, alt, lazy-loading и SEO

Изображения — 60-80% веса среднего сайта. Неоптимизированные картинки — главная причина медленной загрузки. Плюс правильные картинки дают трафик из Яндекс.Картинок (до 15-20% от общего). В этой статье — полная методика оптимизации изображений для SEO от SEO Мастера.

Форматы изображений

Alt-атрибут

Alt — текстовое описание картинки. Правила:

• Обязательно на каждой картинке (кроме декоративных)
• Описательный, не переспамленный
• Содержит главный ключ страницы, если уместно
• Длина: 50-125 символов
• Без «картинка», «фото», «изображение» в начале

Плохо: alt="smartphone"

Хорошо: alt="Смартфон Samsung Galaxy A54 128GB, фронтальный вид, чёрный"

Размеры и разрешения

Правила:

• Картинка не должна быть больше, чем отображается на странице
• Для Retina-экранов — x2 размер
• Ширина не более 1920 px для фоновых, 800-1200 для контента
• Обязательно указывать width и height в HTML (для CLS)

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

<img src="image-800.jpg"
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1200px) 800px,
            1600px"
     alt="Описание">

Браузер выбирает подходящий размер под конкретное устройство.

Lazy-loading

<img src="image.webp"
     loading="lazy"
     alt="...">

Картинки загружаются только когда появляются в viewport. Экономит трафик и ускоряет загрузку.

Оптимизация вручную

Инструменты

• Squoosh.app — Google, визуальный редактор
• TinyPNG / TinyJPG — онлайн-сжатие
• ImageOptim — Mac-приложение
• Caesium — Windows-приложение
• Photoshop + «Сохранить для web»

Автоматическая оптимизация

WordPress

• ShortPixel — автоматическое сжатие при загрузке
• Smush — бесплатный вариант
• WebP Express — конвертация в WebP
• EWWW Image Optimizer

Серверная оптимизация

• Cloudflare Polish — автосжатие на CDN
• ImageKit.io — облачный сервис
• Cloudinary — профессиональный сервис
• Imgix — обработка на лету

Яндекс.Картинки

Оптимизация для попадания в Яндекс.Картинки:

1. Alt-атрибут с релевантным описанием
2. Название файла с ключами (samsung-galaxy-a54.jpg)
3. Размер картинки не меньше 1200 px по длинной стороне
4. Вокруг картинки — релевантный текст
5. Подпись под картинкой (figure + figcaption)
6. Микроразметка ImageObject
7. Открытая для индексации папка

Микроразметка изображений

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://site.ru/image.jpg",
  "creator": {
    "@type": "Organization",
    "name": "SEO Мастера"
  },
  "description": "Описание",
  "name": "Название"
}

CDN для картинок

Для сайтов с большим количеством картинок — обязательно:

• Cloudflare — бесплатный
• Amazon CloudFront
• Google Cloud CDN
• BunnyCDN — дешёвый
• Yandex.Cloud CDN

Типичные ошибки

1. Картинки 10 МБ. JPG с максимальным качеством из Photoshop. Для web не годится.
2. Alt как «image12345». Бесполезно для SEO.
3. Растягивание картинок CSS-ом. Большая картинка загружается, потом уменьшается. Нужно сразу загружать нужный размер.
4. PNG для фото. В 3-5 раз больше, чем JPG.
5. Отсутствие width/height. CLS ломается.
6. Все картинки без lazy-loading. Грузятся все сразу, LCP страдает.

Частые вопросы

Figure и figcaption

<figure>
    <img src="image.webp" alt="Описание" width="800" height="600">
    <figcaption>Подпись с контекстом</figcaption>
</figure>

Семантически правильно, даёт дополнительный контекст для Яндекса.

Sitemap для картинок

Для сайтов с большим количеством картинок — отдельный sitemap_images.xml:

<url>
  <loc>https://site.ru/page</loc>
  <image:image>
    <image:loc>https://site.ru/img.webp</image:loc>
    <image:title>Название</image:title>
  </image:image>
</url>

Стокфото vs собственные

Яндекс умеет распознавать сток-картинки:

• Сток: стандартно используются на тысячах сайтов, не уникальны
• Собственные: уникальны, дают больше веса в SEO
• Для общих страниц — можно сток
• Для ключевых (портфолио, команда, кейсы) — только свои

Мобильная оптимизация картинок

• Размеры меньше для мобильных (через srcset)
• WebP/AVIF особенно важны на мобильном
• Lazy-loading обязателен
• Проверка на Slow 4G
• Нет тяжёлых фоновых изображений

Анимации и видео

Вместо тяжёлых GIF используйте:

• CSS-анимации — лёгкие и быстрые
• SVG-анимации — векторные
• Lottie — для сложных анимаций
• MP4 с autoplay muted loop — для видео-заглушек

Preload для LCP-изображений

Главная картинка страницы (например, hero-изображение) должна загружаться приоритетно:

<link rel="preload" as="image" href="hero.webp">

Это дает Яндексу и пользователю быстрый LCP, что критично для Core Web Vitals.

Оптимизация фоновых изображений

CSS background-image тоже нужно оптимизировать:

• Используйте image-set для разных DPI
• Fallback на обычный background-image
• Lazy-loading через Intersection Observer для фоновых
• WebP/AVIF через media queries в CSS

Work flow оптимизации картинок

1. Получение оригинального файла (2000+ px по длинной стороне)
2. Обрезка до нужного соотношения сторон
3. Изменение размера под целевое использование
4. Конвертация в WebP или AVIF
5. Сжатие через Squoosh или TinyPNG
6. Добавление ALT-атрибута
7. Указание width/height в HTML
8. Добавление loading="lazy" (кроме LCP)
9. Проверка финального веса — не более 150 КБ для hero, 50 КБ для остальных

Оптимизация картинок для e-commerce

Интернет-магазины с сотнями тысяч товаров:

• Автоматическая обработка на backend при загрузке
• Разные размеры для списка/карточки/полного просмотра
• CDN с обработкой на лету (ImageKit, Cloudinary)
• Микроразметка Product ImageObject
• Zoom-эффект на hover без ущерба скорости
• Галерея с ленивой загрузкой дополнительных фото

Мониторинг оптимизации картинок

• PageSpeed Insights → секция «Оптимизация изображений»
• Lighthouse → Performance аудит
• Chrome DevTools Network → сортировка по размеру
• GTmetrix → подробный анализ
• Регулярные проверки раз в месяц

Яндекс.Картинки как источник трафика

Яндекс.Картинки генерируют 10-25% трафика для некоторых ниш:

• Рецепты, DIY — большой трафик из Картинок
• Товары, особенно одежда и интерьер
• Инструкции и гайды с иллюстрациями
• Фото работ (ремонт, дизайн, красота)

Для максимизации трафика из Картинок:

1. Оригинальные (не стоковые) фотографии
2. Крупное разрешение (минимум 1200 px)
3. Правильные alt с описанием
4. Имя файла с ключами
5. Подпись под картинкой (figcaption)
6. Микроразметка ImageObject
7. Размещение рядом с релевантным текстом

Копирайт и водяные знаки

Для авторских фотографий:

• Водяной знак в углу (логотип, сайт)
• Мета-данные EXIF (автор, копирайт)
• Микроразметка Creator
• Защита от парсинга через robots.txt для Картинок
• DMCA-защита от копирования

SVG для иконок

Для иконок — только SVG:

• Масштабирование без потерь
• Малый вес (1-5 КБ)
• Inline SVG для частоиспользуемых
• Sprite для групп иконок
• CSS-стилизация (цвет, размер)

Оптимизация изображений для разных устройств

Разные экраны требуют разных картинок. Решение через picture и srcset:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="...">
</picture>

Браузер выбирает первый поддерживаемый формат. Экономит трафик на современных устройствах, не ломает старые.

Оптимизация для темы картинок

Для сайтов, где картинки — основа (дизайнеры, фотографы, галереи):

• Масштабируемые галереи (Lightbox, PhotoSwipe)
• Прогрессивная загрузка (placeholder → LQIP → финальное изображение)
• Ultrawide / панорамные изображения
• WebGL для интерактивных фото
• Правильные alt и microdata для всех работ

Оптимизация картинок для блогов

Для статей особая специфика:

• Одна hero-картинка в шапке статьи
• Иллюстрации по тексту — 1 на 300-500 слов
• Инфографика как отдельный тип контента
• Скриншоты с аннотациями (стрелки, выделения)
• Gif-анимации (преобразовать в MP4 или WebM)

Инструменты анализа картинок

Для аудита и оптимизации:

• PageSpeed Insights — секция изображений
• WebPageTest — waterfall с картинками
• Chrome DevTools → Network → сортировка по размеру
• ImageMagick — командная строка для батч-обработки
• gulp-imagemin / webpack-image-loader — автоматизация в процессе сборки

Хранение картинок

Где хранить файлы:

• Локальный сервер — простой, но ограничен по трафику
• CDN (CloudFlare, BunnyCDN) — для сайтов с большой аудиторией
• Облачные хранилища (S3, Yandex Object Storage) — для миллионов файлов
• Специализированные сервисы (Cloudinary, ImageKit) — обработка на лету

Выбор зависит от размера проекта и географии аудитории.