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

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

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

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

Browser Support

  • Хром: 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

  • Хром: 50.
  • Край: ≤79.
  • Firefox: 85.
  • Сафари: 11.1.

Source

Предварительная загрузка позволяет вам сообщать браузеру о критических ресурсах, которые вы хотите загрузить как можно скорее, до того, как они будут обнаружены в 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, на которой показана схема с ресурсом JPEG, загрузка которого начинается только после некоторого количества JavaScript.
Без предварительной загрузки изображения начинают загружаться после того, как браузер закончит выполнение скрипта. Для первого изображения эта задержка не нужна.

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель «Сеть» Chrome DevTools, на которой показана схема с ресурсом 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 на сайтах, которые отображают разметку на стороне клиента, чем на сайтах, которые отправляют полную разметку с сервера.