Оптимизация веб-производительности: изображения

Введение

Изображения — самая тяжёлая часть современного веба. По данным HTTP Archive, на среднестатистической странице 50–70% веса приходится именно на картинки, а на медиа-сайтах и интернет-магазинах эта цифра доходит до 90%. Логично, что оптимизация изображений — самый быстрый способ ускорить сайт. Один WebP-файл вместо JPEG может сэкономить мегабайт трафика и несколько секунд загрузки. В этой статье — полный гайд по оптимизации изображений для веба: форматы, сжатие, responsive-разметка, lazy loading, CDN и влияние на SEO.

Почему это критично

Медленный сайт теряет посетителей и позиции в поиске. Google с 2021 года использует Core Web Vitals как фактор ранжирования, и самый важный из них — LCP (Largest Contentful Paint). Чаще всего LCP-элементом оказывается именно изображение: hero баннер, главное фото товара, обложка статьи. Если это изображение грузится 4 секунды — сайт получает низкую оценку, падает в выдаче Яндекса и Google, теряет конверсии. По данным Amazon, ускорение загрузки на 100 мс даёт +1% выручки.

Для мобильных пользователей оптимизация ещё важнее. В мобильных сетях latency высокий, а скорость может падать до 1–3 Мбит/с в плохих условиях. Фото в 2 МБ, которое на оптоволокне грузится мгновенно, на 3G будет загружаться 5–10 секунд. А таких фото на странице может быть 20. Без оптимизации сайт физически непригоден для мобильного использования.

Современные форматы изображений

Выбор формата — первый и самый важный шаг оптимизации. JPEG и PNG — стандарты 90-х, они до сих пор работают, но значительно уступают современным форматам по сжатию. WebP от Google даёт экономию 25–35% по сравнению с JPEG при том же визуальном качестве. AVIF — следующий шаг, экономит ещё 20–30% поверх WebP. JPEG XL — новый формат с ещё лучшим сжатием, но пока поддерживается ограниченно.

На практике сейчас оптимален гибридный подход: основной формат — WebP (его поддерживают все современные браузеры, включая Safari с 2020 года), AVIF как progressive enhancement для самых новых. Используйте тег <picture>с несколькими источниками, и браузер сам выберет лучший поддерживаемый формат.

Responsive images: srcset и sizes

Разные устройства нуждаются в разных размерах изображений. Нет смысла грузить 4000-пиксельное фото на смартфон с экраном 375px — это пустая трата трафика и времени. Атрибут srcset позволяет указать несколько версий одного изображения, и браузер сам выберет оптимальную по размеру экрана и плотности пикселей.

<img
  src="photo-1200.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w,
          photo-2000.jpg 2000w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Описание фото"
  loading="lazy"
  decoding="async"
/>

Атрибут sizes подсказывает браузеру, какой физический размер займёт изображение на разных ширинах экрана. На основе этой информации и плотности пикселей браузер принимает решение, какую версию из srcset грузить. Без sizes браузер грузит либо самую большую версию, либо ту, что вsrc — в любом случае неоптимально.

Тег picture и современные форматы

Для использования новых форматов с fallback на JPEG применяется тег<picture>. Внутри перечисляются источники от наиболее предпочтительного к наименее, и браузер берёт первый, который понимает.

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Описание фото" loading="lazy" />
</picture>

Порядок важен: AVIF — лучший по сжатию, ставим первым. WebP — для браузеров без AVIF. JPEG — универсальный fallback для совсем старых. PNG используется вместо JPEG, если нужна прозрачность или чёткая графика. SVG — для иконок, логотипов, иллюстраций с векторной графикой.

Lazy loading

Lazy loading — отложенная загрузка изображений, которые находятся ниже первого экрана. Вместо того чтобы грузить все 30 картинок статьи сразу, браузер грузит только видимые, а остальные подгружает по мере прокрутки. Это радикально ускоряет начальную загрузку и экономит трафик для тех, кто не доскроллил до конца.

Современные браузеры поддерживают нативный lazy loading через атрибутloading="lazy" — никакого JavaScript не нужно. Для изображений выше первого экрана (hero, логотип) атрибут ставить не надо — они должны грузиться сразу. Для всех остальных — обязательно. Дополнительно можно использоватьdecoding="async", чтобы декодирование не блокировало главный поток.

<!-- Hero-изображение: грузим сразу, с высоким приоритетом -->
<img src="hero.webp" alt="..." fetchpriority="high" />

<!-- Изображения в теле статьи: lazy load -->
<img src="photo-1.webp" alt="..." loading="lazy" decoding="async" />
<img src="photo-2.webp" alt="..." loading="lazy" decoding="async" />

Сжатие с потерями и без

Сжатие бывает lossy (с потерями) и lossless (без потерь). Для веба почти всегда оптимален lossy-режим: визуально неразличимо от оригинала, но в 3–10 раз меньше. Lossless имеет смысл только для графики с резкими границами — иконки, скриншоты интерфейсов, диаграммы. Для фотографий lossless даёт незначительное уменьшение размера при большом объёме — нерационально.

Оптимальные уровни качества: JPEG 75–85, WebP 78–85, AVIF 55–70 (у AVIF шкала другая). Не пытайтесь выжать максимум сжатия — на качестве 50 и ниже появляются заметные артефакты, особенно в градиентах и на границах объектов. Лучше пожертвовать лишними 10–15% размера ради визуальной чистоты.

Для оптимизации в браузере используйте наш сжиматор изображений и ресайзер. А для конвертации PNG в WebP — отдельный инструмент PNG в WebP. Всё работает локально, без загрузки на сервер.

Правильные размеры

Никогда не выводите изображение больше, чем оно физически отображается. Если фото показывается на ширине 800px, нет смысла грузить файл в 4000px — браузер всё равно сожмёт его через CSS, а пользователь скачает лишний мегабайт. Рассчитывайте максимальный размер с учётом retina-экранов: для 800px на экране нужно 1600px файл для устройств с плотностью 2x. Для критичных hero-изображений — до 3x.

Стандартный набор размеров для responsive: 400, 800, 1200, 1600, 2000 px по ширине. Этого достаточно для 95% случаев. Если изображение занимает всю ширину экрана на десктопе, добавьте 2400 или 3200 px для 4K-мониторов. Если изображение в превью 100×100 — достаточно 200×200 для retina, не больше.

CDN и кэширование

CDN (Content Delivery Network) — сеть серверов по всему миру, которые кэшируют ваши изображения и отдают их пользователю с ближайшего узла. Для глобального трафика разница в скорости может быть колоссальной: 200 мс вместо 2000 мс. Популярные CDN: Cloudflare, CloudFront, Fastly, Akamai. Многие из них имеют бесплатные тарифы для небольших проектов.

Помимо географического распределения, CDN предлагают on-the-fly оптимизацию: автоматическую конвертацию в WebP/AVIF, ресайз под размер экрана, сжатие. Вы загружаете один оригинал, а CDN раздаёт десятки вариантов под разные устройства. Это удобно, но добавляет зависимость от сервиса. Для чувствительных к приватности проектов лучше оптимизировать локально на этапе сборки.

Кэширование на стороне браузера — обязательно. Правильные заголовкиCache-Control: max-age=31536000, immutable для версионированных файлов (с хэшем в имени) позволяют браузеру переиспользовать изображения бесконечно. Для неверсионированных — короткий max-age с must-revalidate.

Влияние на SEO

Поисковики напрямую учитывают скорость загрузки при ранжировании. Яндекс и Google предпочитают быстрые сайты, а медленные опускают в выдаче. Core Web Vitals — официальный набор метрик от Google: LCP (Largest Contentful Paint) должен быть меньше 2,5 секунды, FID (First Input Delay) — меньше 100 мс, CLS (Cumulative Layout Shift) — меньше 0,1. Изображения влияют на все три: LCP — это чаще всего картинка, CLS возникает при поздней загрузке без указанных размеров, FID страдает от блокировки главного потока при декодировании.

• Указывайте width и height всегда — это предотвращает CLS.
• Используйте loading="lazy" для offscreen-изображений.
• Применяйте decoding="async" для неблокирующего декодирования.
• Для LCP-изображения — fetchpriority="high" и preload в head.
• Добавляйте осмысленный alt — это и доступность, и SEO.

Инструменты и сервисы

Для разовой оптимизации подойдут браузерные инструменты — быстрые, без регистрации. Для регулярной работы — npm-пакеты (sharp, squoosh-lib,imagemin) или CLI-утилиты (cwebp, avifenc). Для CI/CD — плагины для Webpack, Vite, Next.js, которые автоматически оптимизируют изображения при сборке.

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

<Image
  src="/photo.jpg"
  alt="Описание"
  width={1200}
  height={800}
  priority  // для hero
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Next.js автоматически генерирует WebP и AVIF, добавляет srcset и lazy loading. Аналогичный функционал в Gatsby, Astro, Nuxt. Если вы не используете фреймворк — всё то же самое можно сделать вручную, через <picture> и несколько версий файла.

Заключение

Оптимизация изображений — самый дешёвый способ ускорить сайт. Базовый набор: переход на WebP/AVIF, правильные размеры через srcset, lazy loading, указание размеров для предотвращения CLS, кэширование через CDN. Эти шаги сокращают вес страниц в 3–5 раз и улучшают LCP на 1–3 секунды. Для большинства задач достаточно браузерных инструментов — они работают локально, не требуют регистрации и бесплатны. Подробнее о глубокой оптимизации — в нашем полном руководстве «Оптимизация изображений для веба: полное руководство».