SEO изображений: alt-текст, форматы, сжатие и lazy load

Google Images обрабатывает миллиарды запросов ежемесячно. По данным Jumpshot, около 22% всего веб-поиска приходится на поиск изображений. Для e-commerce, контентных сайтов и портфолио — это значительный источник трафика, который большинство сайтов полностью игнорирует.

Оптимизация изображений влияет не только на видимость в Google Images, но и на основной поиск: скорость загрузки страниц (LCP), Core Web Vitals, пользовательский опыт и косвенно — на позиции в поисковой выдаче.

zoom_in

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

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

zoom_in

Изображения — самый тяжёлый тип ресурсов на большинстве страниц. Неоптимизированные картинки замедляют загрузку, ухудшают показатель LCP (Largest Contentful Paint) и напрямую влияют на оценку Core Web Vitals. С 2021 года Google учитывает CWV как сигнал ранжирования.

Alt-текст: правила написания

Alt-атрибут (alt="...") — единственный способ объяснить Google, что изображено на картинке. Он также отображается, если изображение не загрузилось, и зачитывается скринридерами для незрячих пользователей.

Как писать правильно

Правила alt-текста: описывайте то, что видно на изображении; включайте целевое ключевое слово естественным образом, если оно уместно; не начинайте с фраз «изображение...», «фото...», «картинка...» — Google и так знает, что это картинка. Оптимальная длина — 5–15 слов.

<!-- Информативное изображение -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="График распределения crawl budget по типам страниц"
  width="800"
  height="450"
/>

<!-- Декоративное изображение -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Изображение-ссылка: alt описывает назначение ссылки -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: инструменты для технического аудита"
    width="64"
    height="64"
  />
</a>

Имена файлов и пути

Google анализирует имя файла изображения как дополнительный сигнал. Имя DSC_0047.jpg не даёт никакой информации; canonical-url-diagram.webp — сигнал о теме и контексте.

Форматы: WebP, AVIF, JPEG, PNG

Выбор формата — один из ключевых факторов оптимизации. Современные форматы (WebP, AVIF) обеспечивают значительно меньший размер файла при одинаковом визуальном качестве.

Рекомендуемая стратегия: используйте WebP как основной формат с JPEG-fallback через элемент <picture>. Переходите на AVIF, если ваша аудитория использует Chrome 85+ и Safari 16+. SVG — для всей векторной графики без исключений.

<!-- Современный подход: AVIF → WebP → JPEG -->
<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img
    src="/images/hero.jpg"
    alt="SEO-аудит интернет-магазина: рост трафика на 340%"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

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

Большинство изображений можно сжать на 30–70% без видимой потери качества. Ключевые инструменты: Squoosh (онлайн), ImageMagick (CLI), Sharp (Node.js), Pillow (Python).

Оптимальные настройки качества

// Next.js: автоматическая оптимизация через next/image
import Image from 'next/image';

// next/image автоматически:
// - конвертирует в WebP/AVIF
// - генерирует srcset
// - добавляет lazy loading
// - предотвращает layout shift (требует width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Рост органического трафика после SEO-аудита"
      width={1200}
      height={675}
      priority // отключает lazy load для hero-изображения
    />
  );
}

Lazy load и loading='eager'

Lazy loading откладывает загрузку изображений за пределами экрана до момента, когда пользователь прокручивает к ним. Это сокращает начальный вес страницы и ускоряет Time to Interactive.

<!-- Изображения ниже fold: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="Скриншот аудита XML-карты сайта"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero и LCP-изображения: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="SEO-аналитика в реальном времени"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

Размеры, srcset и art direction

Всегда указывайте атрибуты width и height. Это позволяет браузеру заранее зарезервировать место под изображение и предотвращает Cumulative Layout Shift (CLS) — смещение контента при загрузке.

<!-- srcset: разные размеры для разных экранов -->
<img
  src="/images/blog-cover.webp"
  srcset="
    /images/blog-cover-480.webp 480w,
    /images/blog-cover-800.webp 800w,
    /images/blog-cover-1200.webp 1200w
  "
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="Руководство по внутренней перелинковке: схема архитектуры"
  width="1200"
  height="675"
  loading="lazy"
/>

Атрибут srcset позволяет браузеру выбрать оптимальный размер изображения для текущего экрана и плотности пикселей. На мобильном с 2x DPI браузер загрузит 800px-версию вместо 1200px — экономия трафика и скорость.

Структурированные данные

Разметка Schema.org помогает Google показывать изображения в расширенных результатах поиска: карточках товаров, рецептах, статьях. Для изображений наиболее актуальны типы ImageObject, Article, Product и Recipe.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEO изображений: полное руководство",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Оптимизация изображений для поиска: форматы, alt-текст, сжатие"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "Павел Борушко"
  }
}

Image sitemap

Google рекомендует включать информацию об изображениях в XML-карту сайта — это помогает индексировать картинки, загруженные через JavaScript, и обеспечивает дополнительный контекст (заголовок, подпись, лицензия).

<?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://seohead.tech/blog/image-seo</loc>
    <image:image>
      <image:loc>https://seohead.tech/images/blog/image-seo.webp</image:loc>
      <image:title>SEO изображений: alt-текст, форматы, сжатие и lazy load</image:title>
      <image:caption>Полное руководство по оптимизации изображений для поиска</image:caption>
    </image:image>
  </url>
</urlset>

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