Оптимизация изображений для SEO: форматы, размеры, ALT

Изображения формируют значительную долю «веса» средней страницы, поэтому именно они чаще всего тормозят загрузку и проваливают Core Web Vitals. Грамотная оптимизация картинок — это работа сразу над скоростью, доступностью, индексацией в поиске по картинкам и поведенческими факторами. Разбираем, какие форматы выбирать, до каких размеров сжимать, как писать атрибут alt и какие ошибки ведут к замедлению или фильтру за переспам.

Зачем оптимизировать изображения: три канала влияния на SEO

Скорость и Core Web Vitals. Самое тяжёлое изображение «первого экрана» почти всегда становится элементом LCP. Если оно не сжато и грузится в полном разрешении, метрика вылетает за порог 2,5 с. Неуказанные размеры (width/height) вызывают сдвиги вёрстки и портят CLS (порог < 0,1). Оба показателя входят в Core Web Vitals; в Яндексе скорость влияет на поведенческие факторы, которые анализирует YATI.

Поиск по картинкам. Яндекс.Картинки и Google Images — отдельные источники трафика. Чтобы попасть в них, поисковику нужно понять содержимое файла по alt, имени файла, окружающему тексту и подписи.

Доступность и поведение. Корректный alt читают скринридеры, а быстрая страница снижает отказы (для лендинга — менее 30%, для статьи — менее 50%).

Форматы изображений: что выбирать

Правило: фото — в современный формат с потерями, графика и иконки — в вектор или формат без потерь.

Практичный подход — отдавать WebP или AVIF через тег <picture>: внутри идут несколько <source> (AVIF, затем WebP) и обязательный <img> с растровым фолбэком и атрибутами alt, width, height. SVG при этом минифицируйте.

Размеры и сжатие: до каких значений ужимать

Главная ошибка — грузить исходник 4000 px, который отображается в контейнере 400 px: браузер скачает полный файл и уменьшит его средствами CSS. Отдавайте картинку в реальном размере с запасом под Retina (обычно ×2).

Чтобы один файл не грузился одинаково на десктопе и смартфоне, используйте адаптивную отдачу: srcset перечисляет варианты разной ширины (400w, 800w, 1600w), а sizes подсказывает браузеру, какой выбрать. Для сжатия подойдут TinyPNG, Squoosh, ImageOptim или серверные библиотеки. Для картинок ниже первого экрана добавляйте loading="lazy" — подробнее в материале про ленивую загрузку изображений. Скорость в целом разобрана в гайде как ускорить загрузку сайта.

Атрибут alt: как писать описания, которые работают

Alt — текстовая альтернатива изображению, которую видят поисковые роботы, скринридеры и пользователи с незагрузившейся картинкой. Это белый и обязательный элемент on-page оптимизации.

Принципы хорошего alt:
— Описывай то, что на картинке, а не страницу целиком: «Чёрный гранитный памятник с гравировкой розы» лучше, чем «памятники купить недорого».
— Естественно включай ключ, если он уместен — один раз, без перечисления синонимов.
— Длина — обычно 5–12 слов; сверхдлинные описания обрезаются и выглядят как спам.
— Декоративные картинки оставляй с пустым alt="" — так скринридер их пропустит.
— Имя файла тоже сигнал: granitnyy-pamyatnik.webp информативнее, чем IMG_4821.webp.

Не путайте alt (смысловое содержание, обязателен) и title (всплывающая подсказка, на ранжирование почти не влияет). В статьях добавляйте видимую подпись <figcaption> — она усиливает релевантность.

Картинки и индексация: что ещё учесть

Чтобы изображения попадали в поиск и не тратили краулинговый бюджет:

• Указывайте картинки в sitemap.xml (расширение image:image) — это ускоряет их обнаружение. См. гайд по sitemap.xml.
• Не закрывайте каталог /images/ в robots.txt «на всякий случай» — это исключит картинки из поиска.
• Размечайте контент через Schema.org (JSON-LD): свойство image в типах Product, Article помогает формировать расширенные сниппеты.
• Отдавайте изображения только по HTTPS (иначе возможен mixed content) и проверяйте их индексацию в Яндекс.Вебмастере и Google Search Console.

⚠️ Риски и типичные ошибки

• Переспам в alt. Перечисление ключей через запятую поисковики трактуют как манипуляцию: в Яндексе это работает на «Баден-Баден», в Google — на алгоритмы антиспама. ⚠️ РИСК фильтра — пишите alt для человека.
• Текст картинкой. Заголовки и абзацы, «вшитые» в изображение, поисковик не прочитает, а доступность падает.
• Отсутствие width/height. Без явных размеров вёрстка «прыгает» — растёт CLS.
• Тяжёлый LCP-элемент с lazy-load. Главную картинку первого экрана нельзя помечать loading="lazy" — это откладывает отрисовку и ухудшает LCP.

Мини-кейс: оптимизация галереи на коммерческом сайте

На региональном коммерческом сайте (гранитные памятники, Новосибирск) каталог содержал около 120 фотографий в исходном JPEG по 1,5–3 МБ, отображавшихся в карточках шириной 480 px. Что сделали: пересжали в WebP с фолбэком на JPEG; сгенерировали три размера с srcset/sizes; проставили width/height и loading="lazy" для всего, кроме первого экрана; переписали alt с шаблонных «памятник купить» на осмысленные описания; добавили картинки в sitemap.xml.

Технический результат, фиксируемый сразу: суммарный вес страницы каталога уменьшился многократно, LCP первого экрана опустился ниже 2,5 с, а CLS ушёл в норму < 0,1. Динамика по позициям зависит от множества факторов помимо картинок.

FAQ

Что лучше выбрать — WebP или AVIF?
AVIF сжимает сильнее при сопоставимом качестве, но кодируется медленнее и поддерживается чуть уже. Практичный вариант — AVIF первым источником, WebP вторым, JPEG/PNG как фолбэк. Если ресурсов на двойную перекодировку нет, начните с WebP.

Нужно ли указывать alt для каждой картинки?
Атрибут alt должен присутствовать всегда: для содержательных изображений — осмысленное описание, для декоративных — пустое значение alt="", чтобы скринридер их пропустил.

Можно ли просто задать размер картинки через CSS?
Для отображения — да, но файл всё равно нужно отдавать в подходящем разрешении. Если исходник 4000 px ужать стилями до 400 px, браузер скачает полный тяжёлый файл — экономии не будет.

Закрывать ли папку с изображениями в robots.txt?
Нет, если хотите трафик из поиска по картинкам. Подробнее о настройке — в материале про robots.txt.

Материал подготовлен экспертами Chrome Media — агентства SEO и digital-маркетинга. Помогаем с технической оптимизацией изображений и ускорением сайта под требования Яндекса и Google.