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

Оптимизация изображений — один из самых недооценённых способов ускорить сайт и увеличить органический трафик. Правильные alt-теги, WebP, сжатие и image sitemap дают прирост трафика на 15–25% без переработки основного контента.

Почему изображения влияют на SEO

Картинки на странице — это не просто визуал. Они напрямую влияют на скорость загрузки, релевантность контента и вероятность попасть в Google Images — отдельный поисковый канал с собственным трафиком. По данным Google, более 22% поисковых запросов в США содержат изображения в основной выдаче.

Неоптимизированное фото весом 4 МБ способно увеличить Largest Contentful Paint (LCP) на 1,5–2 секунды. Это критично: Core Web Vitals — один из официальных факторов ранжирования Google, и плохой LCP стоит позиций.

На практике оптимизация изображений на среднем интернет-магазине с 3 000+ SKU даёт вполне конкретные цифры:

• -40–60% — снижение суммарного веса страниц после перехода на WebP
• +18–25% — прирост трафика из Google Images за 3 месяца после добавления alt-тегов
• -0,8–1,2 с — улучшение LCP после настройки отложенная загрузка и сжатия
• +10–15% — рост конверсии за счёт более быстрой загрузки на мобильных

По официальной документации Google, подробный, точный и описательный alt-текст помогает алгоритмам лучше понять содержание изображения и показать его в релевантных результатах поиска.

Изображения затрагивают сразу несколько SEO-факторов одновременно: скорость страницы, текстовую релевантность, доступность (accessibility) и индексацию в Google Images. Проработав все эти аспекты, вы получаете комплексный эффект без затрат на создание нового контента.

Именование файлов изображений

Самый простой и при этом самый часто игнорируемый шаг. Google читает имя файла ещё до обработки alt-тега — оно является одним из контекстных сигналов при анализе изображения.

Базовые правила именования

Несколько принципов, которые сразу делают изображения понятнее для поисковиков:

• Только латиница — кириллица в URL кодируется в %D0%B7%D0%BE%D0%B1%D1%80... и теряет смысл
• Дефисы между словами, не подчёркивания. Google читает дефис как пробел, подчёркивание — нет
• Ключевые слова в названии — 2–4 слова, без спама
• Уникальные имена — не тысячи product-image-1.jpg, product-image-2.jpg
• Строчные буквы — во избежание проблем с регистром на Linux-серверах

Для больших каталогов с уникальными артикулами удобен формат category-productname-sku.webp — это одновременно уникально и несёт семантику для поиска.

Структура папок

Организация папок тоже важна. Логическая иерархия помогает Google лучше понять контекст:

• /images/products/shoes/running/ — лучше, чем /uploads/2024/03/
• /images/blog/seo-optimization/ — лучше, чем /media/p/1234/

Если CMS автоматически генерирует пути типа /wp-content/uploads/2024/03/IMG_001.jpg — стоит настроить плагин или хук для автопереименования при загрузке.

Alt-теги и title изображений

Alt-атрибут — главный SEO-сигнал изображения. Он выполняет три функции: помогает Google понять содержимое картинки, отображается вместо изображения при ошибке загрузки и зачитывается скринридерами для людей с нарушениями зрения.

Как писать alt-теги правильно

Хороший alt — точное, естественное описание того, что изображено. Ключевое слово должно вписываться органично, а не вставляться силой:

Длина и ключевые слова

Оптимальный alt-текст — 80–125 символов. Более длинный не вредит SEO напрямую, но часть текста может обрезаться при отображении в скринридерах. Ключевое слово используйте один раз, естественно — не повторяйте его на каждом изображении страницы.

Title изображения

Атрибут title в теге <img> отображается как всплывающая подсказка при наведении курсора. Его влияние на SEO минимально — Google официально подтвердил, что title изображения является незначительным сигналом. Тем не менее он улучшает UX: подписывайте кнопки, диаграммы, скриншоты с пояснениями. Не дублируйте alt в title — если используете, пишите что-то дополнительное.

WebP, AVIF и выбор формата изображения

Выбор формата — это баланс между качеством, весом файла и совместимостью с браузерами. Поддержка WebP сейчас превышает 97% среди браузеров, AVIF — около 92%. Это означает, что большинство проектов может безопасно переходить на современные форматы.

Сравнение форматов

Реализация WebP с обратной совместимостью

Вместо обычного тега <img> используйте <picture> — он позволяет браузеру самостоятельно выбрать лучший поддерживаемый формат:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения" loading="lazy" width="800" height="600">
</picture>

Chrome и Firefox загрузят AVIF, если поддерживают; нет — WebP; нет и его — JPG. Прогрессивное улучшение без ущерба для старых браузеров.

Сжатие изображений без потери качества

Сжатие — самый быстрый способ уменьшить вес страницы. Большинство фотографий, загруженных «как есть» с фотоаппарата или телефона, весят 3–8 МБ. После правильного сжатия и конвертации в WebP — 80–300 КБ без заметной разницы в качестве.

Два типа сжатия

• Без потерь (lossless) — удаляет служебные метаданные и оптимизирует сжатие без изменения пикселей. Даёт 5–20% уменьшения. Идеально для PNG и там, где качество критично.
• С потерями (lossy) — уменьшает детализацию незаметным для глаза образом. Даёт 40–80% уменьшения. Стандарт для фотографий в вебе.

Целевые размеры файлов

Ориентиры, к которым стоит стремиться при оптимизации:

EXIF-метаданные — что удалять

Каждое фото с телефона или фотоаппарата содержит EXIF: GPS-координаты, дату съёмки, модель камеры, настройки ISO. Эти данные увеличивают вес файла на 10–50 КБ и не несут никакой SEO-ценности. Инструменты сжатия обычно удаляют их автоматически — убедитесь, что эта опция включена.

Отложенная загрузка и скорость загрузки

Отложенная загрузка — отложенная загрузка изображений, находящихся за пределами видимой части экрана. Браузер загружает их только тогда, когда пользователь прокручивает страницу до них. Это значительно уменьшает время первой загрузки.

Нативный отложенная загрузка

Все современные браузеры поддерживают нативный отложенная загрузка. Реализация — одним атрибутом:

<img src="product.webp" alt="Название товара" loading="lazy" width="600" height="400">

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

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

<img src="hero-banner.webp" alt="Главный баннер" fetchpriority="high" width="1200" height="600">

Это подсказка браузеру загрузить изображение максимально быстро, ещё до обработки остальных ресурсов страницы. В сочетании с правильным сжатием это даёт ощутимое улучшение LCP.

Влияние отложенная загрузка на SEO

Googlebot корректно поддерживает отложенная загрузка и индексирует изображения с этим атрибутом. Главное — не прятать изображения за JavaScript-логикой, требующей взаимодействия пользователя: бесконечный скролл без SSR, кнопки «загрузить ещё» без статичного HTML. В таких случаях Googlebot может не дождаться выполнения скрипта.

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

Атрибут srcset позволяет передать браузеру несколько вариантов одного изображения — для разных размеров экрана и плотности пикселей (retina-дисплеи). Браузер сам выбирает оптимальный вариант.

Srcset по ширине (w-дескриптор)

Наиболее распространённый подход для адаптивных изображений в контенте:

<img
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  src="product-800.webp"
  alt="Название товара"
  loading="lazy"
  width="800"
  height="600">

Атрибут sizes объясняет браузеру реальную ширину изображения при разных размерах окна. Без него браузер не знает, какую версию загрузить.

Srcset по плотности пикселей (x-дескриптор)

Для изображений фиксированного размера (иконки, логотипы, аватары) проще использовать x-дескриптор:

<img
  srcset="logo.webp 1x, logo@2x.webp 2x, logo@3x.webp 3x"
  src="logo.webp"
  alt="SEO-Factory логотип"
  width="120"
  height="40">

На retina-дисплеях загрузится версия @2x, на обычных — базовая. Это предотвращает размытость и при этом не перегружает обычные устройства большими файлами.

На нескольких клиентских проектах после правильной настройки srcset медианный LCP на мобильных улучшался на 0,4–0,7 секунды. Небольшая цифра — но если стартовый показник был 3–4 секунды, это разница между «зелёной» и «жёлтой» оценкой Core Web Vitals.

Image sitemap: зачем и как

Image sitemap — расширение стандартного XML sitemap или отдельный файл, сообщающий Google об изображениях на вашем сайте. Особенно важен в двух случаях:

• Изображения загружаются через JavaScript (React, Vue, Angular) и Googlebot может не увидеть их при первом сканировании
• Изображения являются основным контентом страниц (портфолио, галерея, интернет-магазин с большим каталогом)

Формат image sitemap

Расширение добавляется к стандартным записям в sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/products/shoes/</loc>
    <image:image>
      <image:loc>https://example.com/images/shoes-nike-air-max.webp</image:loc>
      <image:caption>Nike Air Max 270 мужские кроссовки</image:caption>
      <image:title>Nike Air Max 270</image:title>
    </image:image>
  </url>
</urlset>

Что добавлять в image sitemap

Не нужно добавлять абсолютно все изображения — сосредоточьтесь на важных:

• Товарные изображения — особенно уникальные, способные генерировать трафик из Google Images
• Изображения статей и блога — featured images и инфографики
• Изображения, загруженные через JS — приоритет для ботов, не рендерящих скрипты полностью

После создания или обновления image sitemap — обязательно укажите его путь в Google Search Console и отправьте на индексацию. Как правило, Google обрабатывает новые изображения из sitemap в течение 1–4 недель.

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

Правильный набор инструментов существенно ускоряет работу. Разберём основные варианты с их плюсами и ограничениями.

TinyPNG / TinyJPG

Простейший онлайн-инструмент для сжатия PNG и JPEG. Использует lossy-алгоритм, но визуально результат практически неотличим от оригинала. Бесплатно до 20 изображений за раз, есть API для автоматизации. Минус — не конвертирует в WebP.

Squoosh (squoosh.app)

Бесплатный инструмент от Google. Поддерживает все современные форматы: WebP, AVIF, MozJPEG, OxiPNG. Есть режим сравнения до/после — удобно настраивать баланс качества и размера вручную. Лучший выбор для разового сжатия с ручным контролем.

ImageOptim (macOS) / FileOptimizer (Windows)

Десктопные инструменты для пакетного сжатия без потерь. ImageOptim автоматически удаляет EXIF-метаданные. Подходят для обработки больших объёмов перед загрузкой на сайт.

Google PageSpeed Insights

Показывает конкретные изображения, требующие оптимизации, с потенциальным выигрышем в байтах и секундах. Вкладка «Opportunities» — первое место, куда стоит смотреть при анализе страницы. Входит в комплексное SEO-продвижение сайта.

Инструменты автоматизации в CMS

Для WordPress: плагины Imagify, ShortPixel или Smush автоматически сжимают и конвертируют изображения при загрузке. Для кастомных CMS — интеграция с API TinyPNG или собственный конвертер на сервере (ImageMagick, libvips).

CDN и кеширование изображений

Даже идеально оптимизированное изображение будет загружаться медленно, если сервер находится далеко от пользователя. CDN (Content Delivery Network) — это сеть серверов по всему миру, хранящих копии ваших статических файлов и раздающих их из ближайшей к посетителю точки присутствия.

Что даёт CDN для изображений

Ключевые преимущества CDN применительно к изображениям:

• Географическая скорость — изображения раздаются с узла в 20–50 мс от пользователя вместо 200–500 мс с центрального сервера
• Разгрузка сервера — 70–90% трафика изображений идёт через CDN, не нагружая основной хостинг
• Автоматическая конвертация — современные CDN (Cloudflare, BunnyCDN, Imgix) могут автоматически отдавать WebP/AVIF в зависимости от браузера без изменений в коде
• Lazy resize — некоторые CDN изменяют размер изображений «на лету» по параметрам в URL: image.cdn.com/photo.jpg?w=400&f=webp

HTTP-заголовки кеширования

Для изображений, которые редко меняются (логотип, иконки, фото продуктов), устанавливайте длительный Cache-Control:

Cache-Control: public, max-age=31536000, immutable

Это позволяет браузеру кешировать изображение на год. Для обновления достаточно изменить имя файла или добавить хеш-версию (logo.v2.webp). Если изображения обновляются часто — используйте max-age=86400 (1 день) или max-age=604800 (неделя).

Структурированные данные для изображений

Помимо image sitemap, изображения можно разметить с помощью schema.org, чтобы увеличить шансы на появление в расширенных результатах поиска — расширенные результаты с превью картинки.

ImageObject в JSON-LD

Для страниц товаров, рецептов, статей добавляйте ImageObject внутри соответствующей схемы. Пример для статьи блога:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Оптимизация изображений для SEO",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/seo-image-optimization.webp",
    "width": 1200,
    "height": 630,
    "caption": "Схема оптимизации изображений для SEO"
  }
}

Атрибуты, которые стоит указывать в ImageObject:

• url — абсолютный URL изображения
• width / height — размеры в пикселях
• caption — подпись (аналог alt для структурированных данных)
• contentUrl — если изображение на CDN, отличном от основного домена
• license — URL лицензии (для участия в Google Image licensing)

Open Graph и Twitter Cards

OG-теги не влияют на ранжирование в поиске, но определяют, какое изображение отображается при распространении страницы в соцсетях. Правильное OG-изображение повышает CTR при шерах, что косвенно приносит трафик:

<meta property="og:image" content="https://example.com/images/article-cover.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Оптимизация изображений для SEO">

Оптимальный размер OG-изображения — 1200×630 пикселей. Если изображение меньше 600 пикселей по ширине, Facebook и Telegram покажут его маленькой миниатюрой рядом с текстом, а не крупным баннером.

Аудит изображений на существующем сайте

Если сайт уже существует и имеет сотни или тысячи страниц — с чего начинать оптимизацию? Важно расставить приоритеты, иначе задача кажется бесконечной.

Шаг 1: Найдите самые тяжёлые изображения

Запустите Screaming Frog SEO Spider с включённым модулем Images. Он покажет все изображения на сайте с их размером и страницами использования. Фильтруйте по размеру — начинайте с файлов свыше 500 КБ.

Альтернатива — Google PageSpeed Insights для ключевых страниц: главной, категорий, топовых лендингов. Секции «Serve images in next-gen formats» и «Properly size images» покажут наибольший потенциальный выигрыш.

Шаг 2: Проверьте alt-теги массово

Screaming Frog также выдаёт отчёт по alt-тегам: изображения без alt, с пустым alt="" (декоративные), с чрезмерно длинным alt. Это позволяет оценить масштаб проблемы без ручной проверки каждой страницы.

Для крупных интернет-магазинов на WooCommerce или OpenCart — проверьте базу данных: есть ли у всех товаров заполненные поля image_description или alt_text. Массовая генерация alt из названия товара плюс категория — приемлемая отправная точка, если ресурсов на ручное написание нет.

Шаг 3: Проверьте Core Web Vitals в Search Console

Google Search Console → Core Web Vitals показывает, у каких страниц есть проблемы с LCP. Если LCP-элементом является изображение (а для большинства страниц — так и есть), именно его оптимизация даст наибыстрейший результат в Core Web Vitals.

Шаг 4: Выстройте процессы на будущее

Аудит исправляет накопившиеся проблемы, но не предотвращает новые. Чтобы не повторять аудит каждые несколько месяцев, внедрите правила на уровне процессов:

• Автоматическая конвертация в WebP при загрузке в CMS
• Обязательное поле alt в форме загрузки изображения
• Предупреждение при загрузке файлов свыше 500 КБ
• Автоматическая генерация миниатюр разных размеров для srcset

Клиенты, внедрившие автоматическую конвертацию в WebP на уровне CMS, спустя 6 месяцев имели медианный размер страницы на 38% меньше, чем конкуренты в той же нише — без каких-либо дополнительных ручных усилий.

Изображения для мобильных: особенности

Google использует mobile-first indexing — сканирует и оценивает сайт прежде всего через мобильную версию. Это означает, что оптимизация изображений для мобильных устройств является приоритетной, даже если большинство конверсий происходит на десктопе.

Типичные ошибки с мобильными изображениями

Наиболее частые проблемы, которые мы выявляем при мобильных аудитах:

• Отсутствие srcset — мобильный браузер загружает десктопную версию изображения 1200px вместо 400px, расходуя лишний трафик и время
• Слишком большие hero-изображения на мобильных — full-width баннер 1920px на экране 390px: загружается 800 КБ, отображается 100 КБ
• Отсутствующие размеры — без width/height браузер не резервирует место, CLS растёт при загрузке изображений
• Autoplay GIF или видео без muted — на мобильных iOS такой контент не воспроизводится автоматически и оставляет пустой блок

Art direction через <picture>

Иногда для мобильных нужно не просто меньшее изображение, а другое — обрезанное, вертикальное, с более крупным объектом. Это называется art direction и реализуется через media в <picture>:

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-mobile.webp">
  <source media="(min-width: 601px)"
          srcset="hero-desktop.webp">
  <img src="hero-desktop.webp" alt="Главный баннер" width="1200" height="600">
</picture>

Мобильная версия hero-mobile.webp может быть вертикальной 600×800 и сфокусированной на центральном объекте, тогда как десктопная горизонтальная 1200×600 показывает более широкий контекст. Качество восприятия на обоих устройствах будет лучше, чем при автоматическом кадрировании через CSS.

Чеклист оптимизации изображений для SEO

Пройдитесь по каждому пункту перед публикацией новой страницы или после аудита существующих:

• ✓ Именование файлов — латиница, дефисы, ключевые слова в названии
• ✓ Формат — WebP или AVIF для фото, SVG для векторной графики, PNG только где нужна прозрачность
• ✓ Сжатие — размер соответствует рекомендуемым значениям для типа изображения
• ✓ Alt-теги — каждое значимое изображение имеет описательный alt с ключевым словом; декоративные имеют alt=""
• ✓ Размеры — указаны width и height для каждого <img>
• ✓ Отложенная загрузка — loading="lazy" для изображений ниже первого экрана
• ✓ Fetchpriority — fetchpriority="high" для LCP-изображения
• ✓ Srcset — адаптивные версии для изображений разного размера
• ✓ Picture element — WebP/AVIF + JPEG fallback через <picture>
• ✓ Image sitemap — товарные и контентные изображения включены
• ✓ EXIF удалён — метаданные очищены при сжатии
• ✓ CDN — изображения раздаются через CDN при наличии международной аудитории

Оптимизация изображений — это не разовая задача, а постоянный процесс. Внедрение правил на уровне CMS (автоматическая конвертация при загрузке, обязательные поля alt в редакторе) позволяет поддерживать качество без ручной проверки каждого файла. Подробнее о техническом состоянии сайта — в нашем гайде по техническому SEO-аудиту.

Приоритизация по влиянию

Если ресурсов ограниченно и нужно выбирать, куда вложить время в первую очередь, ориентируйтесь на эту матрицу:

Сжатие и alt-теги дают наибыстрый ROI — их стоит сделать первыми. Переход на WebP и srcset требует больше технической работы, но обеспечивает стабильный прирост скорости. Структурированные данные — финальный штрих, расширяющий видимость в расширенных результатах поиска.

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

Обязательно ли переходить на WebP для SEO?

WebP не обязателен, но даёт ощутимое преимущество: файлы на 25–35% меньше JPEG при той же визуальном качестве. Google прямо рекомендует современные форматы для улучшения LCP и Core Web Vitals. Если CMS или CDN поддерживает конвертацию — переходить стоит.

Какой длины должен быть alt-тег?

Оптимальная длина alt-текста — 80–125 символов. Он должен точно описывать содержимое изображения и органично включать ключевое слово. Избегайте переспам ключевыми словами: alt="купить телефон дёшево москва" — это спам, а не описание.

Нужен ли image sitemap небольшому сайту?

Image sitemap полезен любому сайту, где изображения являются важным контентом: интернет-магазин, портфолио, блог с иллюстрациями. Он помогает Google узнать о картинках, загружаемых через JS, и ускоряет их индексацию.

Как правильно называть файлы изображений?

Используйте латиницу, дефисы между словами, ключевые слова в названии. Например: seo-image-optimization-guide.webp вместо IMG_20240312.jpg. Это помогает Google понять контекст изображения ещё до обработки alt-тега.

Вопросы о Оптимізація зображень для SEO