🗜️
← Назад к руководствам

Как оптимизировать изображения для веб-производительности

· Теги: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

Как оптимизировать изображения для веб-производительности

Изображения составляют от 50 до 60 процентов общего объёма загружаемых данных типичной веб-страницы. Каждое неоптимизированное изображение добавляет секунды к времени загрузки, увеличивает показатель отказов и ухудшает позиции в поисковых системах. Показатели Google Core Web Vitals — в частности Largest Contentful Paint (LCP) — напрямую измеряют производительность загрузки изображений, делая оптимизацию изображений одним из самых эффективных изменений, которые вы можете внести на своём сайте.

Это руководство охватывает полную стратегию оптимизации изображений: от основ сжатия до продвинутых техник доставки.

1. Сжимайте каждое изображение перед публикацией

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

Ключевые принципы:

  • Фотографии хорошо переносят агрессивное сжатие с потерями. Начните с качества 80 для JPEG и WebP, затем уменьшайте, если цели по размеру файла этого требуют.
  • Скриншоты, логотипы и графика выигрывают от сжатия без потерь. PNG и WebP без потерь сохраняют чёткие края и текст, которые сжатие с потерями размыло бы.
  • AVIF обеспечивает наилучшие коэффициенты сжатия, но требует больше времени на кодирование. Используйте его для изображений, которые часто загружаются, но редко обновляются.
  • Сжимайте в исходном формате, чтобы избежать потери качества от ненужных преобразований формата.

Ожидаемая экономия:

Типичный рабочий процесс, сжимающий изображения перед загрузкой, сокращает общий вес изображений на 40–80 процентов при минимальной заметной потере качества.

2. Подавайте изображения правильного размера

Подача фотографии шириной 4000 пикселей внутри контейнера шириной 300 пикселей — самая распространённая ошибка производительности в вебе. Браузер загружает все 4000 пикселей, а затем масштабирует их, тратя пропускную способность и память.

Создавайте несколько вариантов размера:

  • 320–480 пикселей в ширину для мобильных экранов
  • 768–1024 пикселей в ширину для планшетов
  • 1200–1920 пикселей в ширину для настольных дисплеев
  • 2560 пикселей в ширину для дисплеев высокой плотности retina (2x)

Сопоставьте самый большой вариант с максимальной шириной, с которой изображение будет отображаться в вашем макете, умноженной на 2 для экранов с высоким DPI.

3. Используйте адаптивные изображения с Srcset

Атрибуты srcset и sizes в HTML сообщают браузеру, какой размер изображения загружать, в зависимости от ширины области просмотра и коэффициента пикселей устройства.

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Описательный текст для доступности и SEO"
/>

Этот простой шаблон может сократить трафик изображений на 40–60 процентов на мобильных устройствах без какой-либо видимой разницы в качестве.

4. Оптимизируйте для Largest Contentful Paint (LCP)

LCP измеряет время, необходимое для отрисовки самого большого видимого элемента — обычно главного изображения (hero image). Google считает LCP в 2,5 секунды или менее хорошим показателем.

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

  • Предзагрузите главное изображение, чтобы браузер обнаружил его раньше. Добавьте <link rel="preload" as="image" href="hero.webp"> в <head> вашего документа.
  • Сжимайте главное изображение агрессивно — обычно это первый и самый большой ресурс, который загружает браузер.
  • Подавайте WebP или AVIF для главного изображения с запасным JPEG-вариантом.
  • Правильно подбирайте размер главного изображения. Не подавайте изображение на 4000 пикселей в слоте для hero шириной 1200 пикселей.
  • Не используйте отложенную загрузку для главного изображения и любых изображений в видимой области (above the fold). Отложенная загрузка задерживает скачивание, что ухудшает LCP.

5. Включите отложенную загрузку для изображений вне видимой области

Изображения, которые не видны на начальном экране, не нужно загружать немедленно. Атрибут loading="lazy" указывает браузеру отложить загрузку изображения до тех пор, пока оно не окажется близко к входу в область просмотра.

<img src="gallery-photo.jpg" loading="lazy" alt="Изображение галереи" />

Отложенная загрузка сокращает начальный вес страницы на 30–50 процентов на страницах с большим количеством изображений. В сочетании со сжатием эффект становится преобразующим.

6. Удаляйте метаданные изображений

Данные EXIF — настройки камеры, GPS-координаты, временные метки — добавляют ненужные байты к каждому изображению. Удаление метаданных обычно экономит от 5 до 15 процентов размера файла без каких-либо визуальных изменений. Сделайте удаление метаданных стандартным шагом в вашем рабочем процессе сжатия.

7. Используйте сеть доставки контента (CDN)

CDN распределяет ваши изображения по серверам по всему миру, сокращая физическое расстояние между пользователем и изображением. Это улучшает Time to First Byte для запросов изображений.

Некоторые CDN также предлагают преобразование изображений на лету:

  • Автоматическое согласование формата (подача WebP или AVIF, если поддерживается)
  • Динамическое изменение размера в зависимости от устройства и области просмотра
  • Корректировка сжатия в реальном времени

Если выделенный CDN недоступен, как минимум используйте HTTP/2 или HTTP/3, чтобы обеспечить несколько загрузок изображений в одном соединении.

8. Учитывайте производительность декодирования изображений

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

Используйте атрибут decoding="async" на некритичных изображениях, чтобы позволить браузеру декодировать их, не блокируя другой контент:

<img src="photo.jpg" decoding="async" loading="lazy" alt="Описание" />

Построение вашего рабочего процесса оптимизации

Сквозной конвейер оптимизации изображений выглядит следующим образом:

  1. Сжимайте изображения в исходном формате с помощью инструмента, подходящего по качеству.
  2. Удаляйте метаданные во время сжатия.
  3. Изменяйте размер до требуемых размеров отображения, создавая несколько вариантов.
  4. Реализуйте srcset и sizes в ваших HTML-шаблонах.
  5. Предзагружайте главное изображение, используйте отложенную загрузку для всего, что находится вне видимой области.
  6. Подавайте через CDN для глобальной производительности.
  7. Измеряйте LCP и общий вес изображений с помощью Lighthouse или PageSpeed Insights.
  8. Итеративно подбирайте настройки качества, пока не уложитесь в бюджет производительности.

Начните оптимизировать изображения уже сегодня с нашим бесплатным онлайн-компрессором изображений. Загружайте изображения в формате PNG, JPEG, WebP или AVIF и скачивайте сжатые версии, готовые к продакшену — без преобразования формата, без компромиссов по качеству.