Image SEO: alt-текст, форматы, сжатие и lazy load

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

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

zoom_in

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

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

zoom_in

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

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

Атрибут alt (alt="...") — единственный способ объяснить Google, что изображено. Его также показывают, если картинка не загрузилась, и озвучивают программы чтения с экрана для людей с нарушениями зрения.

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

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

<!-- Informative image -->
<img
  src="/images/crawl-budget-chart.webp"
  alt="Crawl budget distribution chart by page type"
  width="800"
  height="450"
/>

<!-- Decorative image -->
<img
  src="/images/divider.svg"
  alt=""
  role="presentation"
/>

<!-- Image link: alt describes the link purpose -->
<a href="/tools">
  <img
    src="/images/seo-scripts-icon.webp"
    alt="SEO Scripts: tools for technical audits"
    width="64"
    height="64"
  />
</a>

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

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

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

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

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

<!-- Modern approach: 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 audit of an online store: 340% traffic growth"
    width="1200"
    height="675"
    loading="eager"
    fetchpriority="high"
  />
</picture>

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

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

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

// Next.js: automatic optimisation via next/image
import Image from 'next/image';

// next/image automatically:
// - converts to WebP/AVIF
// - generates srcset
// - adds lazy loading
// - prevents layout shift (requires width/height)
export function HeroImage() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Organic traffic growth after SEO audit"
      width={1200}
      height={675}
      priority // disables lazy load for the hero image
    />
  );
}

Lazy load и loading='eager'

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

<!-- Below-fold images: lazy loading -->
<img
  src="/images/article-thumbnail.webp"
  alt="XML sitemap audit screenshot"
  width="400"
  height="225"
  loading="lazy"
/>

<!-- Hero and LCP images: eager + fetchpriority -->
<img
  src="/images/hero.webp"
  alt="Real-time SEO analytics"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high"
/>

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

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

<!-- srcset: different sizes for different screens -->
<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="Internal linking architecture guide: site structure diagram"
  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": "Image SEO: complete guide",
  "image": {
    "@type": "ImageObject",
    "url": "https://seohead.tech/images/blog/image-seo.webp",
    "width": 1200,
    "height": 675,
    "caption": "Image optimisation for search: formats, alt text, compression"
  },
  "datePublished": "2026-05-17",
  "author": {
    "@type": "Person",
    "name": "seohead"
  }
}

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>Image SEO: alt text, formats, compression, and lazy load</image:title>
      <image:caption>Complete guide to image optimisation for search</image:caption>
    </image:image>
  </url>
</urlset>

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