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

Барри Поллард
Йоав Вайс

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

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

Поддержка браузера

  • Хром: 73.
  • Край: 79.
  • Фаерфокс: 78.
  • Сафари: 17.2.

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

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

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

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

Поддержка браузера

  • Хром: 50.
  • Край: ≤79.
  • Фаерфокс: 85.
  • Сафари: 11.1.

Источник

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

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

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">

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

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

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

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

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

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

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

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

Панель Chrome DevTools Network, показывающая водопад с загрузкой ресурса JPEG параллельно с некоторым JavaScript.
Предварительная загрузка первого изображения позволяет ему начать загрузку одновременно со сценарием.

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

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

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

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

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

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

Панель Chrome DevTools Network, показывающая водопад с ресурсом JPEG, который начинает загружаться только после некоторого CSS.
В этом примере загрузка изображения не начинается до тех пор, пока CSS не будет полностью загружен, что приводит к ненужной задержке отображения изображения.

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

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

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

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

Панель Chrome DevTools Network, показывающая водопад с загрузкой ресурса JPEG параллельно с некоторым CSS.
Здесь изображение и CSS начинают загружаться одновременно, что позволяет изображению загружаться быстрее.

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

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

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

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

Сравнение диафильмов 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)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

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

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

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

Влияние на наибольшую содержательную отрисовку (LCP)

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

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