Улучшить доставку изображений

Опубликовано: 8 октября 2025 г.

Сокращение времени загрузки изображений может улучшить воспринимаемое время загрузки страницы и LCP.

Как понимание терпит неудачу

Анализ выявит изображения с неоправданно большим объёмом загрузки. Предполагаемая экономия байтов рассчитывается путём сравнения объёма загрузки изображения с эффективным соотношением байтов к пикселям для данного формата изображения.

DevTools улучшают понимание доставки изображений
DevTools улучшают понимание доставки изображений

Как улучшить время загрузки изображения

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

Увеличить коэффициент сжатия изображения

Большинство форматов изображений поддерживают уровень сжатия, который можно настроить для уменьшения размера файла за счёт качества. Для оптимизации коэффициента сжатия изображений можно использовать такие инструменты, как ImageOptim , Squoosh и Imagemin .

Используйте современные форматы изображений

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

Формат AVIF поддерживается в последних версиях всех основных браузеров и обеспечивает меньший размер файлов по сравнению с другими форматами при тех же настройках качества. Подробнее об AVIF см. в практическом занятии «Serving AVIF Images Codelab» .

Формат WebP поддерживается всеми основными браузерами и обеспечивает более эффективное сжатие изображений в Интернете как с потерями, так и без них. Подробнее о WebP см. в статье «Использование изображений в формате WebP».

Используйте видеоформаты для анимированного контента

Большие GIF-файлы неэффективны для передачи анимированного контента по сравнению с видео. Для экономии сетевого трафика вместо GIF рекомендуется использовать видео в формате MPEG4/WebM для анимации и PNG/WebP для статических изображений.

Информацию о замене GIF-изображений видео см. в статье Замена анимированных GIF-файлов видео для более быстрой загрузки страниц .

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

В идеале на вашей странице никогда не должны отображаться изображения, размер которых превышает размер, отображаемый на экране пользователя. Всё, что больше, приводит к лишней трате байтов и замедляет загрузку страницы.

Одна из стратегий — использовать векторные форматы изображений, такие как SVG. Благодаря ограниченному объёму кода изображение SVG можно масштабировать до любого размера. Подробнее см. в статье «Замена сложных значков на SVG» .

Если векторные изображения не подходят, лучше всего использовать «адаптивные» изображения. При использовании адаптивных изображений вы генерируете несколько версий каждого изображения, а затем указываете, какую версию использовать в HTML или CSS, используя медиазапросы, размеры области просмотра и т. д.

Например, элемент <img> имеет атрибуты srcset и sizes , которые могут указывать URL-адреса изображений для разных размеров:

Если вам нужно полностью изменить изображение, то вы можете использовать элемент &lt;picture> :

Более подробную информацию см. в разделах Адаптивные изображения и Элемент изображения .

Руководство по конкретному стеку

Эта информация также предлагает рекомендации, специфичные для стека, для страниц, использующих следующие технологии:

AMP

  • Рассмотрите возможность отображения всех компонентов amp-img в форматах WebP, а также укажите соответствующий резервный вариант для других браузеров.
  • Для анимированного контента используйте amp-anim , чтобы минимизировать нагрузку на процессор, когда контент находится за пределами экрана.

Друпал

  • Рассмотрите возможность использования модуля , который автоматически оптимизирует и уменьшает размер изображений, загружаемых через сайт, сохраняя при этом качество.
  • Убедитесь, что вы используете встроенные адаптивные стили изображений, предоставляемые Drupal, для всех изображений, отображаемых на сайте.

Джумла

Рассмотрите возможность использования плагина или сервиса, который автоматически преобразует загруженные вами изображения в оптимальные форматы.

Магенто

Рассмотрите возможность использования стороннего расширения Magento, оптимизирующего изображения .

WordPress

Рассмотрите возможность использования плагина WordPress для оптимизации изображений , который сжимает ваши изображения, сохраняя при этом качество.

Ресурсы