+7 (495) 801-60-42

Оптимизация изображений: форматы, сжатие, WebP/AVIF

Оптимизация изображений для сайта — один из самых быстрых и предсказуемых способов ускорить загрузку страниц, сократить трафик и улучшить Core Web Vitals. В статье разберем, какой формат выбрать (JPEG/PNG/SVG/WebP/AVIF), как настроить сжатие без заметной потери качества, внедрить responsive-картинки и lazy load, и как встроить эти процессы в продакшн.

Почему картинки замедляют сайт и как это бьет по метрикам

Медиаконтент обычно дает 50–80% веса страницы. Неправильный формат, отсутствие сжатия, огромные исходники и отсутствие responsive-разметки ведут к:

  • росту LCP (Largest Contentful Paint) — главный сигнал скорости для SEO и конверсии;
  • скачкам CLS, если не заданы размеры и соотношение сторон;
  • перегрузке сети на мобильных (нестабильный 3G/4G), росту отказов;
  • лишним запросам и блокировке основного потока рендеринга.

Вывод: оптимизация изображений — базовая техничка, которая дает эффект в связке с контентом и UX.

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

  • Сначала — правильный формат, потом — сжатие.
  • Отдавайте изображение «по месту использования»: нужная ширина/высота под конкретный контейнер.
  • Используйте современные контейнеры (WebP/AVIF) с бэкапом на JPEG/PNG.
  • Включайте responsive (srcset/sizes) и lazy load для нижеэкраных элементов.
  • Фиксируйте размеры или соотношение сторон (aspect-ratio), чтобы избежать сдвигов.
  • Контролируйте кэш и CDN; не дублируйте файлы в разных форматах без нужды.

Как выбрать лучший формат изображений для сайта

Разные типы визуала требуют разных форматов:

  • Фото и сложные градиенты: JPEG (широкая совместимость), WebP, AVIF. WebP — хорошее соотношение размер/качество, быстрая декомпрессия. AVIF — зачастую на 15–35% легче WebP при той же визуальной точности, но кодирование тяжелее.
  • Скриншоты интерфейсов, пиксель-арт, прозрачность: PNG (lossless), иногда WebP lossless; для иконок и логотипов — чаще SVG.
  • Логотипы, иконки, простая графика: SVG (вектор), масштабируется без артефактов, легко анимируется и стилизуется через CSS.
  • Анимированные: избегайте GIF; используйте видео (MP4/WebM) или APNG/WebP-анимации, где уместно.

Практика: фото по умолчанию в WebP/AVIF с фолбэком на JPEG; графику — в SVG либо PNG/WebP lossless, если есть сложная прозрачность.

Сжатие: без потери качества на глаз и без артефактов

Цель — минимальный размер при визуально эквивалентном восприятии:

  • Режимы: lossy (JPEG, WebP, AVIF) и lossless (PNG, WebP lossless). Для фото используйте lossy с разумным качеством.
  • Рекомендуемые стартовые параметры: JPEG q=70–82 (с прогрессивной разверткой), WebP q=70–80, AVIF cq=28–34 (переменное, зависит от энкодера). Подбирайте под контент и плотность текстур.
  • 4:2:0 подсэмплирование хромы для фото (уменьшает цветовую информацию без заметной потери).
  • Удаление EXIF и профилей ICC, если не требуются (strip metadata) — экономит килобайты.
  • Прересайз перед сжатием: не храните баннер 4000 px, если на сайте максимум 1280 px.
  • Для PNG: режимы оптимизации палитры и дефляции, выбор глубины цвета.

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

  • GUI: Squoosh (web), ImageOptim (macOS), Caesium, XnConvert.
  • CLI/билд: cwebp, avifenc (libaom/kvazaar), mozjpeg, pngquant, oxipng, svgo; сборки imagemin/Sharp в CI/CD.
  • Серверно/на лету: Thumbor, imgproxy, nginx modules, CDN-трансформации (см. ниже).

Внедрение WebP/AVIF с фолбэком: практический шаблон

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

  • Используйте picture с несколькими source и MIME-типами: сначала AVIF, затем WebP, затем fallback JPEG/PNG.
  • Для каждого формата задайте srcset с вариантами 1x/2x и по ширинам, плюс sizes под лэйаут.
  • На главном LCP-изображении добавляйте fetchpriority="high" и при необходимости preload.

Пример (сокращенно, без форматирования кода):

picture

source type="image/avif" srcset="hero-800.avif 800w, hero-1280.avif 1280w" sizes="(min-width: 1024px) 1280px, 92vw"

source type="image/webp" srcset="hero-800.webp 800w, hero-1280.webp 1280w" sizes="(min-width: 1024px) 1280px, 92vw"

img src="hero-1280.jpg" width="1280" height="720" alt="Описание" loading="eager" decoding="async" fetchpriority="high"

/picture

Важно: width/height или CSS aspect-ratio фиксируют место под изображение и снижают CLS.

Responsive: srcset, sizes и DPR

  • Для контента с ограниченной шириной используйте дескрипторы w (например, 480w/768w/1280w). Браузер выберет лучший вариант под реальный вьюпорт и DPR.
  • Для плотных экранов (Retina) учитывайте 2x/3x по необходимости, но не дублируйте избыточно: иногда лучше один вариант пошире.
  • sizes должен соответствовать реальной вёрстке. Пример: sizes="(min-width: 1280px) 720px, (min-width: 768px) 60vw, 92vw".
  • Для фоновых изображений в CSS используйте image-set (background-image: image-set(url(bg@1x.avif) 1x, url(bg@2x.avif) 2x)).

Lazy load изображений: когда и как

  • Нативный loading="lazy" подключайте для всех нижеэкраных картинок. Для LCP-элемента используйте loading="eager" и fetchpriority="high".
  • Порог появления: дополнительно можете использовать IntersectionObserver, если нужен кастомный контроль или прелоад за 200–300px до вхождения во вьюпорт.
  • Плейсхолдеры: LQIP/BlurHash или CSS-скелеты, но без лишнего JS.
  • Следите за SEO: lazy для критического контента в первом экране не применяем.

SVG оптимизация: малый размер, идеальная четкость

  • Очищайте SVG через SVGO: удаляйте лишние атрибуты, переводите стили в CSS, объединяйте пути.
  • Не инлайньте тяжёлые SVG в HTML на всех страницах — используйте спрайты или внешние файлы с кэшем.
  • Для иконок — спрайт и currentColor; для логотипа — отдельный файл с кэшированием.
  • Если SVG тяжелый (фильтры/градиенты), проверьте, не выгоднее ли экспорт WebP.

CDN, кэширование и заголовки

  • Заголовки: Cache-Control: public, max-age=31536000, immutable для статических версий с ревизиями (хэш в имени файла). Для часто меняемых — меньший TTL + версионирование.
  • ETag/Last-Modified: полезны, если нет жёстких версий, но лучше хэш-нейминг.
  • CDN c трансформациями: Cloudflare Images, Cloudinary, Imgix, Akamai Image Manager — умеют конвертировать в WebP/AVIF по Accept, ресайзить, обрезать фокус (gravity), автоформат (auto=format). Это снимает часть нагрузки с бэкенда.
  • ГЕО и устройства: адаптируйте качество и ширины под регионы с медленным интернетом.

Процессы: как уменьшить вес картинок на уровне пайплайна

  • Дизайн: договориться о максимальных ширинах артов для ключевых брейкпоинтов. Интегрируйте требования в гайды и таски дизайн-команды. Уместно объединять с
    .
  • Билд: автоматическая генерация форматов и размеров (Sharp/imagemin) и проставление хэшей. Блок в CI проверяет, что в PR нет исходников > определенного веса без оптимизации.
  • CMS: медиабиблиотека с автоконвертацией и кропами под пресеты. Ограничение загрузки «сырого» 8–12 МБ файла.
  • Контент: правило нейминга и alt-тексты; запрет вставки base64 больших изображений.
  • Аудиты: регулярная проверка PageSpeed Insights/Lighthouse и логов CDN.

Измеряем эффект: что смотреть в метриках

  • Core Web Vitals: LCP (цель <2.5 c), CLS (<0.1), INP. Сфокусируйтесь на LCP-изображении: формат, вес, приоритет загрузки.
  • Coverage: процент трафика, получающего WebP/AVIF (по заголовку Accept и форматам на CDN).
  • Экономия трафика и время TTFB для изображений на CDN edge.
  • Ошибки: битыxие srcset, неверные sizes, отсутствие размеров у img, lazy на первом экране.
  • В связке с SEO-работами смотрите динамику видимости и поведенческих. Если нужна системная работа — подключайте
    .

Частые ошибки и как их избежать

  • Генерация AVIF/WebP без фолбэка — в старых браузерах контент пропадет.
  • Один огромный JPEG для всех устройств — лишние мегабайты и плохой LCP на мобильных.
  • Отсутствие width/height — скачки верстки (CLS).
  • Чрезмерная агрессивность q (ниже 50) — артефакты на границах и текстах.
  • Base64 инлайны больших изображений в HTML/CSS — раздутие критического пути.
  • Неправильные sizes — браузер выбирает слишком большой вариант.

Чек-лист внедрения

  • Определены типы контента и маппинг форматов (фото — WebP/AVIF, графика — SVG/PNG).
  • Настроено сжатие: JPEG q≈75, WebP q≈75, AVIF cq≈30; удаление EXIF.
  • Реализован picture с AVIF/WebP и fallback, корректные srcset/sizes.
  • LCP-изображение: preload/fetchpriority, loading=eager, фиксированные размеры.
  • Остальные картинки: loading=lazy, плейсхолдеры по необходимости.
  • Включен билд-пайплайн генерации размеров и форматов; файлы с хэшами.
  • CDN отдает современный формат по Accept; заголовки Cache-Control настроены.
  • SVG очищаются через SVGO, иконки в спрайте.
  • Еженедельный аудит PSI/Lighthouse + проверка логов CDN.

Полезные инструменты и ресурсы

  • Оптимизация в браузере: Squoosh (web-app).
  • CLI и сервер: Sharp, cwebp, avifenc, mozjpeg, pngquant, oxipng, svgo.
  • CDN: Cloudflare Images, Cloudinary, Imgix, Fastly IO.
  • Чтение по теме:
    ,
    .

Вывод

Грамотно выбранные форматы, аккуратное сжатие, responsive и lazy load дают измеримый прирост скорости и качества UX без ущерба визуалу. Встраивайте практики в дизайн‑процессы и сборку, а регулярные аудиты помогут удерживать результат. Нужна помощь с технической стратегией, аудитом и внедрением — команда LightsOn готова подключиться.

Другие полезные статьи

Делимся экспертизой, разбираем кейсы и рассказываем, как превращать идеи в работающие digital-продукты