Оптимизация изображений для сайта: форматы, сжатие, lazy loading и alt-теги

Почему оптимизация изображений — критична для SEO и конверсии

Изображения составляют в среднем 50–65% веса веб-страницы. Неоптимизированные картинки — главная причина медленной загрузки, высоких отказов и низких позиций в поиске. По данным исследований, каждая секунда задержки загрузки снижает конверсию на 7%.

В Pulse Digital оптимизация изображений — обязательный этап технического SEO аудита. В этом руководстве — полная методология: от выбора формата до продвинутых техник.

Форматы изображений

JPEG (JPG)

Назначение: фотографии, изображения с плавными градиентами.

• Сжатие: с потерями (lossy)
• Поддержка: все браузеры
• Прозрачность: нет
• Рекомендуемое качество: 75–85% (баланс размера и качества)

PNG

Назначение: иконки, логотипы, изображения с прозрачностью.

• Сжатие: без потерь (lossless)
• Поддержка: все браузеры
• Прозрачность: да (альфа-канал)
• Минус: файлы значительно тяжелее JPEG

WebP

Назначение: универсальная замена JPEG и PNG.

• Сжатие: с потерями и без потерь
• Поддержка: все современные браузеры (97%+ в 2026)
• Прозрачность: да
• Экономия: на 25–35% меньше JPEG при том же качестве

Рекомендация: используйте WebP как основной формат в 2026 году.

AVIF

Назначение: формат нового поколения, ещё эффективнее WebP.

• Сжатие: с потерями и без потерь
• Поддержка: Chrome, Firefox, Safari 16.4+ (~90% браузеров)
• Экономия: на 50% меньше JPEG при том же качестве
• Минус: медленнее кодируется, не все инструменты поддерживают

SVG

Назначение: иконки, логотипы, иллюстрации.

• Тип: векторный формат (масштабируется без потери качества)
• Можно стилизовать через CSS и анимировать
• Не подходит для фотографий

Сравнительная таблица

Сжатие изображений

Lossy (с потерями)

Удаляет данные, которые человеческий глаз не замечает:

• JPEG: качество 75–85%
• WebP: качество 75–85%
• AVIF: качество 60–75%

Инструменты:

• Squoosh (squoosh.app) — онлайн, с предпросмотром
• TinyPNG (tinypng.com) — пакетная обработка
• ImageOptim (macOS) — десктопное приложение
• ShortPixel (плагин WordPress) — автоматическое сжатие при загрузке

Lossless (без потерь)

Уменьшает размер без потери качества (оптимизация метаданных, палитры):

• PNG: OptiPNG, PNGQuant
• JPEG: jpegtran (удаление EXIF, оптимизация таблиц Хаффмана)

Экономия: 10–30% без видимых изменений.

Автоматизация

Для сайтов с большим количеством изображений настройте автоматическое сжатие:

WordPress: плагины ShortPixel, Imagify, EWWW Image Optimizer — сжимают при загрузке.

Серверная обработка (PHP):

function optimizeImage(string $source, string $dest, int $quality = 80): void
{
    $info = getimagesize($source);
    $image = match ($info['mime']) {
        'image/jpeg' => imagecreatefromjpeg($source),
        'image/png'  => imagecreatefrompng($source),
        'image/webp' => imagecreatefromwebp($source),
    };
    imagewebp($image, $dest, $quality);
    imagedestroy($image);
}

CLI (cwebp):

cwebp -q 80 input.jpg -o output.webp

Адаптивные изображения (Responsive Images)

Атрибут srcset

Позволяет браузеру выбрать оптимальный размер изображения для устройства:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="Описание изображения"
  width="1200"
  height="800"
  loading="lazy"
>

Пояснение:

• srcset — список доступных размеров с шириной в пикселях (w)
• sizes — какую ширину изображение занимает при разных размерах экрана
• Браузер автоматически выберет подходящий файл

Тег picture

Для предоставления разных форматов с fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Описание" width="1200" height="800" loading="lazy">
</picture>

Браузер выберет первый поддерживаемый формат (AVIF → WebP → JPEG).

Lazy Loading

Нативный lazy loading

Самый простой способ — атрибут loading="lazy":

<img src="photo.webp" alt="Описание" loading="lazy" width="800" height="600">

Поддержка: все современные браузеры.

Правила:

• Не ставьте loading="lazy" на изображения первого экрана (LCP) — это замедлит загрузку
• Ставьте на все остальные изображения ниже первого экрана
• Обязательно указывайте width и height — для предотвращения CLS

JavaScript-библиотеки

Для более тонкого контроля:

• lazysizes — самая популярная библиотека
• lozad.js — лёгкая альтернатива на Intersection Observer
• Встроенный IntersectionObserver:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

Alt-теги и SEO

Зачем нужен alt

• Доступность: скринридеры озвучивают alt для незрячих пользователей
• SEO: Яндекс использует alt для понимания содержания изображения
• Яндекс.Картинки: alt влияет на ранжирование в поиске по картинкам
• Fallback: отображается, если изображение не загрузилось

Правила написания alt

✅ <img alt="Отчёт Яндекс.Вебмастера — статистика индексации за апрель 2026">
✅ <img alt="Сравнение сжатия JPEG и WebP на примере фотографии">

❌ <img alt="">  (пустой — плохо для SEO)
❌ <img alt="картинка">  (неинформативно)
❌ <img alt="SEO продвижение SEO оптимизация SEO сайт SEO">  (переспам)

Рекомендации:

• Описывайте что изображено — кратко, информативно
• Включайте ключевое слово, если оно уместно
• Длина: 5–15 слов
• Для декоративных изображений (фоны, разделители): alt="" (пустой — это стандарт)

Атрибут title

Необязательный — показывает подсказку при наведении мыши. Не дублируйте alt — напишите дополнительную информацию или не используйте вовсе.

Влияние на Core Web Vitals

LCP (Largest Contentful Paint)

Главное изображение (hero, баннер) — часто определяет LCP:

1. Preload главного изображения:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

2. Не используйте lazy loading для LCP-изображения
3. Оптимизируйте размер: для героя достаточно 1200–1600px по ширине
4. Используйте CDN для быстрой доставки

CLS (Cumulative Layout Shift)

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

<!-- Плохо — CLS -->
<img src="photo.webp" alt="...">

<!-- Хорошо — нет CLS -->
<img src="photo.webp" alt="..." width="800" height="600">

Или через CSS:

.image-container {
  aspect-ratio: 4 / 3;
  width: 100%;
}

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

Что даёт CDN

• Географическое кеширование — изображение грузится с ближайшего сервера
• Автоматическая конвертация в WebP/AVIF (некоторые CDN)
• Ресайз на лету — передаёте параметры в URL

Популярные CDN

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

• [ ] Формат: WebP как основной, AVIF — прогрессивно
• [ ] Сжатие: 75–85% качество для lossy
• [ ] Размер: не шире 1600px (для контентных изображений)
• [ ] width и height атрибуты на всех <img>
• [ ] loading="lazy" на изображениях ниже первого экрана
• [ ] Preload для LCP-изображения
• [ ] srcset + sizes для адаптивности
• [ ] alt — описательный, с ключевым словом где уместно
• [ ] Декоративные изображения: alt="" или CSS background
• [ ] Вес страницы: менее 1.5 МБ на мобильных
• [ ] CDN для статики (если трафик > 10 000 в день)

FAQ

WebP или AVIF — что выбрать?

В 2026 году WebP — безопасный выбор с 97%+ поддержкой. AVIF — эффективнее на 20–30%, но поддержка ~90%. Оптимально: AVIF с fallback на WebP через <picture>.

Влияет ли имя файла изображения на SEO?

Незначительно, но рекомендуется использовать описательные имена: seo-audit-report.webp вместо IMG_20260414_123456.webp.

Сколько изображений можно на странице?

Ограничений нет, но следите за весом страницы. С lazy loading и оптимизацией — десятки изображений не проблема.

Нужно ли оптимизировать иконки и SVG?

Да. SVG: удалите метаданные редактора через SVGO. Иконки: используйте спрайт или иконочный шрифт вместо отдельных файлов.

Как проверить скорость загрузки изображений?

PageSpeed Insights подсветит тяжёлые изображения. Chrome DevTools → Network → фильтр по Img → сортировка по размеру.

Оптимизация изображений — один из самых быстрых способов улучшить и SEO, и UX. Если вам нужна комплексная оптимизация — закажите технический SEO аудит в Pulse Digital.