SEO-оптимизация изображений: зачем и как оптимизировать картинки

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

1) Почему оптимизация изображений влияет на SEO

  • Быстрее загрузка — меньше отказов и больше времени на сайте.

  • Core Web Vitals: картинки часто формируют LCP и CLS.

  • Лучшее понимание контента: ALT и контекст помогают поисковику “сопоставить” изображение запросу.

  • Дополнительный трафик: Google Images и визуальные блоки в выдаче.

  • Экономия ресурсов: меньше трафика и нагрузки на сервер.

2) Самые частые ошибки

  • грузят огромные оригиналы и показывают маленьким превью;

  • используют PNG вместо современных форматов;

  • не делают адаптивные размеры для мобайла;

  • нет width/height — верстка “прыгает”;

  • включают lazy-load на главном изображении первого экрана;

  • спамят ключами в ALT или оставляют пустым;

  • отдают файлы без кэша или через редиректы.

3) Форматы: что использовать

  • AVIF — максимальная экономия веса при хорошем качестве.

  • WebP — лучший универсальный вариант.

  • JPEG — хороший fallback для фото.

  • PNG — только когда нужна прозрачность или идеальная графика.

  • SVG — иконки и вектор, но без злоупотребления.

Практический стандарт: AVIF/WebP + fallback.

4) Сжатие: “дёшево и сердито”

Сжатие — главный рычаг. Лучше настроить автоматическую обработку при загрузке:

  • ресайз под реальные размеры отображения;

  • конвертация в WebP/AVIF;

  • генерация нескольких размеров (thumbnail/medium/large).

Это даёт стабильный результат и не зависит от дисциплины редакторов.

5) Responsive images: не заставляй мобайл качать десктоп

Обязательная база:

  • набор размеров по ширине (например 320/640/1024/1600);

  • выдача через srcset и sizes;

  • указание width/height для борьбы с CLS.

Если используешь , можно приоритезировать AVIF/WebP и оставить JPEG/PNG как запасной вариант.

6) Lazy-load: только там, где нужно

Lazy-load прекрасно работает для длинных страниц и лент, но:

  • не применяй к LCP-изображению (hero на первом экране);

  • для важных элементов лучше использовать приоритетную загрузку и аккуратный preload.

7) ALT, имена файлов и окружение

ALT должен описывать изображение, а не быть набором ключей:

  • коротко и по делу: что изображено и почему это важно странице;

  • уникальность там, где нужно (не копируй один ALT на все фото товара);

  • понятные имена файлов вместо IMG_0001.

Контекст страницы тоже важен: подписи к изображениям и окружающий текст повышают релевантность.

8) Кэширование, CDN и правильная отдача

Чтобы картинки летали:

  • долгий Cache-Control для статических файлов;

  • версионирование (хеш в имени), чтобы можно было кэшировать “навсегда”;

  • CDN при большом трафике/географии;

  • корректный Content-Type, без цепочек редиректов.

9) Image sitemap: ускоряем обнаружение картинок

Если у тебя магазин/портфолио/медиа, image sitemap помогает поисковику быстрее находить и индексировать важные изображения. Включай только ценное, не засоряй иконками и фоном.

10) Чеклист

  1. WebP/AVIF + fallback.

  2. Сжатие и ресайз при загрузке.

  3. srcset/sizes для мобайла.

  4. width/height и отсутствие CLS.

  5. Lazy-load ниже первого экрана.

  6. ALT и имена файлов — описательные.

  7. Кэш + CDN + без редиректов.

  8. При необходимости — image sitemap.

Нужен выделенный сервер?
Мощные конфигурации в Hetzner и
быстрый запуск под ключ
Выбрать сервер