Эта страница переведена с помощью Cloud Translation API.

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

Barry Pollard

Yoav Weiss

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

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

Browser Support

Source

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

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

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

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

Browser Support

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

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

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

Внимание: адаптивные изображения не поддерживаются для предварительной загрузки HTTP-заголовков, поскольку область просмотра определяется только при создании документа.

Это также означает, что их нельзя использовать для предварительной загрузки 103 ранних подсказок , а спецификация HTML гласит : «Только атрибуты as , crossorigin , integrity и type обрабатываются в процессе обработки ранних подсказок. Остальные, в частности, blocking , imagesrcset , imagesizes и media , применяются только после создания документа».

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

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

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

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

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

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

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

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

Start Render остался прежним.
Индекс скорости немного улучшился (273 мс, поскольку изображения поступают быстрее и не занимают большую часть площади пикселей).
Последний нарисованный герой значительно улучшился — на 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)">
<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, чем на сайтах, которые отправляют полную разметку с сервера.

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