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

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

Изображения составляют в среднем 50-70% от общего веса веб-страницы. По данным HTTP Archive, средняя страница загружает более 1 МБ изображений. Неоптимизированные изображения — причина №1 медленной загрузки сайтов и плохих показателей PageSpeed анализ.

Оптимизация изображений — это самый быстрый способ ускорить сайт с минимальными усилиями.

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

WebP

Формат от Google, поддерживается всеми современными браузерами (97%+ глобально). Преимущества:

• На 25-35% меньше JPEG при аналогичном качестве
• На 26% меньше PNG с поддержкой прозрачности
• Поддержка анимации (замена GIF с 64% экономией размера)
• Лосси и лосслесс режимы

AVIF

Формат на базе AV1, поддержка около 93% браузеров. Лучшее сжатие на рынке:

• На 50% меньше JPEG при аналогичном качестве
• На 20% меньше WebP
• Поддержка HDR и wide color gamut
• Медленнее в кодировании, чем WebP

Когда использовать какой формат

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

Элемент picture для прогрессивной загрузки

Используйте <picture> для предоставления нескольких форматов:

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

Браузер выберет первый поддерживаемый формат. Всегда указывайте width и height для предотвращения layout shift (CLS).

Responsive Images

Атрибут srcset позволяет загружать изображение подходящего размера для устройства:

<img
  srcset="image-480.webp 480w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 480px,
         (max-width: 1000px) 800px,
         1200px"
  src="image-800.webp"
  alt="Описание"
>

Не загружайте 2000px изображение для 320px мобильного экрана. Экономия может составить 80% трафика.

Lazy Loading

Ленивая загрузка откладывает загрузку изображений, которые не видны на экране, до момента прокрутки:

<img src="image.webp" alt="Описание" loading="lazy">

Правила lazy loading:

• Не применяйте к LCP-изображению — главное изображение над сгибом должно загружаться сразу
• Не применяйте к первым 2-3 изображениям на странице
• Применяйте ко всем изображениям ниже первого экрана
• Используйте fetchpriority="high" для LCP-изображения

<!-- LCP-изображение — высокий приоритет -->
<img src="hero.webp" alt="Hero" fetchpriority="high">

<!-- Изображения ниже сгиба — ленивая загрузка -->
<img src="gallery-1.webp" alt="Gallery" loading="lazy">

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

Качество сжатия

Для фотографий оптимальное качество — 75-85%. Разница между 85% и 100% едва заметна глазу, но размер файла может отличаться в 2-3 раза.

Инструменты сжатия

• Squoosh — визуальное сравнение, поддержка AVIF/WebP
• ImageOptim — пакетная оптимизация для macOS
• Sharp — Node.js-библиотека для серверной обработки
• cwebp/cavif — CLI-утилиты для конвертации

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

Интегрируйте оптимизацию в CI/CD pipeline или используйте CDN с автоматической конвертацией (Cloudflare Polish, imgproxy). Никогда не полагайтесь на ручную оптимизацию — она будет забыта.

Дополнительные оптимизации

Предзагрузка LCP-изображения

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

CSS-спрайты и инлайн-SVG

Для маленьких иконок используйте SVG-спрайты или инлайн-SVG вместо отдельных файлов — это сокращает количество HTTP-запросов.

Placeholder при загрузке

Используйте CSS-заглушки нужного размера или размытые превью (LQIP — Low Quality Image Placeholder) для предотвращения layout shift.

Проверка скорости загрузки

Используйте тест скорости Enterno.io для измерения времени загрузки ваших страниц. Сравните результаты до и после оптимизации изображений. Проверьте HTTP-ответ на наличие заголовков кэширования для изображений.

Итоги

Оптимизация изображений — самый эффективный способ ускорить сайт. Используйте WebP/AVIF с фоллбэком, responsive images для разных экранов, lazy loading для изображений ниже сгиба, и автоматизируйте сжатие. Эти меры могут сократить вес страницы на 50-80%.