Предварительная загрузка адаптивных изображений

Барри Поллард
Йоав Вайс
Yoav Weiss
X GitHub

Опубликовано: 30 сентября 2019 г., Последнее обновление: 10 июля 2026 г.

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

Обзор адаптивных изображений

Browser Support

  • Chrome: 73.
  • Край: 79.
  • Firefox: 78.
  • Сафари: 17.2.

Source

Предположим, вы просматриваете веб-страницы на экране шириной 300 пикселей, а страница запрашивает изображение шириной 1500 пикселей. Эта страница тратит много вашего мобильного трафика, потому что ваш экран не может ничего сделать с таким дополнительным разрешением. В идеале браузер должен загрузить версию изображения, которая лишь немного шире размера вашего экрана, например, 325 пикселей. Это обеспечит изображение высокого разрешения без лишнего расхода трафика и позволит изображению загружаться быстрее.

Адаптивные изображения позволяют браузерам загружать разные графические ресурсы для разных устройств. Если вы не используете CDN изображений , сохраните несколько размеров для каждого изображения и укажите их в атрибуте srcset . Значение w сообщает браузеру ширину каждой версии, чтобы он мог выбрать подходящую версию для любого устройства:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Обзор предварительной загрузки

Browser Support

  • Chrome: 50.
  • Край: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

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

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset и imagesizes

Элемент <link> использует атрибуты imagesrcset и imagesizes для предварительной загрузки адаптивных изображений. Используйте их вместе с <link rel="preload"> , используя синтаксис srcset и sizes применяемый в элементе <img> .

Например, если вы хотите предварительно загрузить адаптивное изображение, указанное следующим образом:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Это можно сделать, добавив следующее в раздел <head> вашего HTML-кода:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw" fetchpriority="high">

Это инициирует запрос, используя ту же логику выбора ресурсов, что и srcset и sizes .

Варианты использования

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

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

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

Вы можете проверить эту проблему на веб-сайте с динамически загружаемой галереей изображений:

  1. Откройте эту демонстрационную слайд-шоу в новой вкладке.
  2. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть инструменты разработчика.
  3. Перейдите на вкладку «Сеть» .
  4. В раскрывающемся списке «Ограничение скорости» выберите «Быстрый 3G» .
  5. Снимите флажок «Отключить кэш» .
  6. Перезагрузите страницу.
В панели «Сеть» инструментов разработчика Chrome отображается диаграмма «водопад», при этом загрузка JPEG-файла начинается только после выполнения некоторых действий JavaScript.
Без предварительной загрузки изображения начинают загружаться после завершения работы скрипта в браузере. Для первого изображения эта задержка не требуется.

Использование preload позволяет изображению начать загрузку заранее, чтобы оно было готово к отображению, когда браузеру это потребуется.

В панели «Сеть» инструментов разработчика Chrome отображается диаграмма «водопад», на которой ресурс JPEG загружается параллельно с выполнением JavaScript-кода.
Предварительная загрузка первого изображения позволяет ему начать загружаться одновременно со скриптом.

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

Предварительно загрузите фоновые изображения с помощью набора изображений.

Если у вас разные фоновые изображения для разных плотностей экрана, вы можете указать их в CSS с помощью синтаксиса image-set . Затем браузер сможет выбрать, какое из них отобразить, в зависимости от DPR экрана.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Проблема с фоновыми изображениями CSS заключается в том, что браузер обнаруживает их только после того, как загрузит и обработает весь CSS-код в разделе <head> страницы.

Вы можете проверить эту проблему на примере веб-сайта с адаптивным фоновым изображением .

В панели «Сеть» инструментов разработчика Chrome отображается водопадная диаграмма, при этом загрузка JPEG-файла начинается только после выполнения некоторых действий с CSS.
В этом примере загрузка изображения начинается только после полной загрузки CSS-кода, что приводит к ненужным задержкам при отображении изображения.

Адаптивная предварительная загрузка изображений позволяет загружать их быстрее.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x" fetchpriority="high">

Отсутствие атрибута href позволяет гарантировать, что браузеры, не поддерживающие imagesrcset для элемента <link> , но поддерживающие image-set в CSS, загрузят правильный исходный код. Однако в этом случае они не получат преимуществ от предварительной загрузки.

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

В панели «Сеть» инструментов разработчика Chrome отображается «водопад», в котором ресурс JPEG загружается параллельно с некоторыми CSS-стилями.
Здесь изображение и CSS начинают загружаться одновременно, что позволяет изображению загружаться быстрее.

Практические последствия предварительной загрузки адаптивных изображений.

Предварительная загрузка адаптивных изображений теоретически может ускорить их работу, но как это работает на практике?

Чтобы ответить на этот вопрос, я создал две копии демонстрационного PWA-магазина : одну, которая не загружает изображения предварительно , и другую, которая загружает некоторые из них . Поскольку сайт использует отложенную загрузку изображений с помощью JavaScript, ему, вероятно, будет выгодно предварительно загружать те изображения, которые отображаются в начальной области просмотра.

В результате были получены следующие данные как при отсутствии предварительной загрузки , так и при предварительной загрузке изображений :

  • Параметр Start Render остался прежним.
  • Индекс скорости немного улучшился (до 273 мс, поскольку изображения, поступающие быстрее, не занимают большую часть площади пикселя).
  • В игре Last Painted Hero значительно улучшился результат, улучшившись на 1,2 секунды.
В сравнении с предыдущими версиями WebPageTest, предварительно загруженные изображения отображаются примерно на 1,5 секунды быстрее.
Изображения загружаются значительно быстрее при предварительной загрузке, что существенно улучшает пользовательский опыт.

Предварительная загрузка и <picture>

Рабочая группа по веб-производительности обсуждает добавление эквивалента предварительной загрузки для srcset и sizes , но не для элемента <picture> , который обрабатывает сценарий "художественного оформления" .

Ещё предстоит решить ряд технических проблем с предварительной загрузкой <picture> , но пока есть обходные пути:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

Логика выбора источника изображения для элемента <picture> последовательно перебирает атрибуты media элементов <source> , находит первый подходящий и использует прикрепленный ресурс.

Поскольку адаптивная предварительная загрузка не имеет понятия «порядка» или «первого совпадения», вам потребуется преобразовать точки останова примерно в следующий вид:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Предварительная загрузка и type

Элемент <picture> также поддерживает сопоставление по первому type , что позволяет указывать различные форматы изображений, чтобы браузер мог выбрать первый поддерживаемый им формат изображения.

Этот вариант использования поддерживается с помощью предварительной загрузки лишь частично: браузеры должны загружать предварительную загрузку только для поддерживаемых типов. Поэтому вы можете использовать это, чтобы предотвратить предварительную загрузку браузерами неподдерживаемых типов MIME, добавив следующее в предварительную загрузку:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Однако, в отличие от <picture> , это не остановится на первом поддерживаемом типе. Поэтому, если для нескольких типов включено несколько предварительных загрузок, то будут предварительно загружены все изображения:

Не делайте этого — предварительно загружайте несколько типов: 

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Вместо этого сделайте следующее — предварительно загрузите наиболее предпочтительный тип: 

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Предварительная загрузка новейшего формата (в данном случае AVIF) представляет собой постепенное улучшение, при котором браузеры, поддерживающие этот тип, получат от этого выгоду, а другие браузеры — нет.

Для сайтов, где изображение быстро находится в HTML-коде, мы рекомендуем избегать предварительной загрузки и вместо этого использовать сканер предварительной загрузки для поиска изображений в элементах <picture> и <source> . Это в любом случае является лучшей практикой, особенно при использовании функции Fetch Priority для определения приоритета подходящего изображения, поскольку позволяет предварительно загружать именно то изображение, которое поддерживается браузером. Это также исключает риск устаревания предварительно загруженного изображения из основной разметки при изменении изображений или страниц.

Влияние на крупнейшую по содержанию краску (LCP)

Поскольку изображения могут быть кандидатами на получение наибольшего количества отображаемого контента (Largest Contentful Paint, LCP) , их предварительная загрузка может улучшить показатель LCP вашего веб-сайта.

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