Изображения — это и трафик, и тормоз одновременно. С одной стороны, поиск по картинкам (Google Картинки и Яндекс.Картинки) приводит реальных посетителей, особенно в e-commerce, рецептах, недвижимости и DIY. С другой — неоптимизированные картинки чаще всего и есть та причина, по которой LCP уходит в красную зону, а сайт проседает в Core Web Vitals. Грамотная оптимизация изображений решает обе задачи сразу: ускоряет страницу и открывает дополнительный канал органического трафика. В этом гайде — всё по делу: alt-текст, форматы, сжатие, адаптивная отдача, lazy loading и разметка.
Alt-текст: главный SEO-атрибут изображения
Атрибут alt описывает содержимое изображения текстом. Он решает три задачи: помогает незрячим пользователям (скринридеры читают alt вслух), показывается, если картинка не загрузилась, и сообщает поисковику, что на изображении — это главный фактор ранжирования в поиске по картинкам. Хороший alt — это краткое, точное описание того, что реально на картинке, с естественным вхождением ключевого слова там, где это уместно. Плохой alt — это либо пустота, либо переспам ключами вроде «купить диван дёшево москва диван угловой диван».
- Описывайте по сути: alt="угловой диван из серого велюра в интерьере гостиной", а не alt="img_1234".
- Одно ключевое слово естественно — да; список ключей через запятую — нет (это переспам).
- Декоративные изображения (иконки, разделители) — пустой alt="" , чтобы скринридер их пропустил.
- Не начинайте с «изображение …» или «фото …» — это очевидно и тратит место.
Имена файлов и форматы: WebP, AVIF, JPEG
Имя файла — слабый, но бесплатный сигнал. Файл seryy-uglovoy-divan.webp понятнее поисковику, чем DSC00451.jpg. Используйте латиницу или транслит, слова через дефис, без пробелов и кириллицы в имени. Гораздо важнее формат. Современные форматы WebP и AVIF сжимают на 25–50% сильнее JPEG/PNG при том же качестве — это прямое ускорение загрузки и улучшение LCP. WebP поддерживается всеми актуальными браузерами; AVIF сжимает ещё лучше, но кодируется медленнее. Прозрачность (вместо PNG) тоже умеет WebP. PNG оставляйте только для скриншотов с резкими краями и текстом, JPEG — как запасной вариант для старых браузеров через тег picture.
Сжатие и адаптивные изображения (srcset)
Главная ошибка — отдавать одну и ту же гигантскую картинку и на десктоп, и на телефон. Изображение 3000×2000 пикселей, показанное в контейнере 400px, — это мегабайты впустую и убитый LCP на мобильных. Решение — атрибуты srcset и sizes: вы готовите несколько размеров одного изображения, а браузер сам выбирает подходящий под экран и плотность пикселей. Плюс адекватное сжатие: для фото качество 75–85 практически неотличимо от оригинала, но весит в разы меньше. Прогоните все изображения через сжатие — это самый дешёвый способ улучшить скорость сайта.
Lazy loading — но не для LCP-изображения
Отложенная загрузка (loading="lazy") откладывает скачивание картинок, которые ниже видимой области, пока пользователь до них не доскроллит. Это экономит трафик и ускоряет первую отрисовку — отличная практика для длинных страниц и карточек товаров в ленте. Но есть критичный нюанс: НИКОГДА не вешайте lazy на главное изображение первого экрана (hero, обычно это и есть LCP-элемент). Lazy-загрузка LCP-картинки откладывает её появление и портит метрику. Правило: всё, что в первом экране — загружается сразу (можно даже с fetchpriority="high"), всё, что ниже — lazy.
Размеры, CLS и предотвращение «прыжков»
Если у тега img не заданы width и height (или aspect-ratio в CSS), браузер не знает, сколько места займёт картинка, и верстка «прыгает» при её загрузке — это бьёт по метрике CLS (стабильность вёрстки), одной из трёх Core Web Vitals. Всегда указывайте атрибуты width и height, соответствующие реальным пропорциям, — браузер зарезервирует место заранее, и контент не сдвинется. Это копеечная правка, которая часто полностью убирает проблему CLS на странице.
Sitemap изображений и структурированные данные
Чтобы поисковик гарантированно нашёл и проиндексировал ваши картинки, помогите ему. Добавьте изображения в sitemap (через расширение image:image в XML-карте или отдельный image sitemap) — особенно если картинки подгружаются через JavaScript и робот может их не увидеть. Для товаров, рецептов и статей добавьте структурированные данные schema.org (Product, Recipe, Article) с полем image — это повышает шанс на расширенный сниппет с картинкой в выдаче и помогает Google связать изображение со страницей. Для Яндекс.Картинок отдельной разметки изображений нет, но качественный alt, контекст вокруг картинки и наличие в sitemap работают на индексацию.
Особенности Яндекс.Картинок
Яндекс.Картинки — заметный источник трафика в рунете, который часто недооценивают. Яндекс при ранжировании изображений опирается на alt и title тега img, на текст вокруг картинки (подпись, заголовок ближайшего раздела), на имя файла и на общее качество и тематичность страницы. Важно не закрывать папку с изображениями в robots.txt (частая случайная ошибка, обнуляющая трафик из Картинок) и не отдавать разные изображения роботу и пользователю. Если хотите трафик из Яндекс.Картинок — давайте осмысленные alt, окружайте картинки релевантным текстом и держите быстрый отклик сервера.
Чек-лист оптимизации изображений
- Осмысленный alt у всех значимых картинок; пустой alt="" у декоративных.
- Формат WebP/AVIF с JPEG-фолбэком через picture; качество 75–85.
- Адаптивные srcset/sizes — браузер берёт нужный размер под экран.
- Lazy loading для всего ниже первого экрана; hero/LCP — без lazy, с приоритетом.
- Заданы width и height (или aspect-ratio) — нет скачков CLS.
- Картинки в sitemap, папка изображений не закрыта в robots.txt.
- Структурированные данные с полем image для товаров/статей/рецептов.
Оптимизация изображений — редкий случай в SEO, когда одно действие улучшает сразу две метрики: и скорость (Core Web Vitals), и видимость в поиске по картинкам. Начните с самого тяжёлого — переведите hero и фото товаров в WebP и проверьте LCP. Site Metrics Tool отслеживает Core Web Vitals (включая LCP) по реальным пользователям и техническое состояние сайта в одном дашборде по Google и Яндексу — сразу увидите эффект от оптимизации картинок.
Частые вопросы
Какой формат изображений лучше для SEO — WebP или JPEG?
WebP. При том же визуальном качестве он весит на 25–35% меньше JPEG, что напрямую ускоряет загрузку и улучшает LCP. WebP поддерживают все современные браузеры; для совсем старых добавьте JPEG-фолбэк через тег picture. AVIF сжимает ещё сильнее, но кодируется медленнее.
Обязателен ли alt-текст для каждого изображения?
Для значимых изображений — да: это и доступность, и фактор ранжирования в поиске по картинкам. Для чисто декоративных (иконки, разделители) ставьте пустой alt="", чтобы скринридеры их пропускали. Полное отсутствие атрибута alt — ошибка.
Можно ли вешать lazy loading на все картинки?
Нет. Lazy loading — для изображений ниже первого экрана. Главное изображение первого экрана (часто это LCP-элемент) нужно загружать сразу, иначе вы откладываете его появление и ухудшаете LCP. Hero — без lazy, остальное — с lazy.
Почему мои изображения не появляются в Яндекс.Картинках?
Самые частые причины: папка с изображениями закрыта в robots.txt; у картинок нет осмысленного alt и окружающего текста; изображения подгружаются через JS и робот их не видит; сайт медленный. Проверьте robots.txt, добавьте alt и картинки в sitemap, ускорьте отдачу.
Как изображения влияют на Core Web Vitals?
Сильно. Тяжёлое hero-изображение — самая частая причина плохого LCP. Картинки без заданных размеров вызывают сдвиги вёрстки и портят CLS. Оптимизация (WebP, сжатие, srcset, размеры, правильный lazy) улучшает обе метрики одновременно.