Вы можете предварительно загрузить адаптивные изображения, что позволит значительно ускорить загрузку изображений, помогая браузеру идентифицировать правильное изображение из 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="…">
Обзор предварительной загрузки
Предварительная загрузка позволяет сообщить браузеру о критических ресурсах, которые вы хотите загрузить как можно скорее, прежде чем они будут обнаружены в 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 .
Случаи использования
Ниже приведены некоторые варианты использования предварительной загрузки адаптивных изображений.
Предварительная загрузка динамически внедряемых адаптивных изображений
Представьте, что вы динамически загружаете главные изображения как часть слайд-шоу и знаете, какое изображение будет отображаться первым. В этом случае вы, вероятно, захотите показать это изображение как можно скорее, а не ждать, пока скрипт слайд-шоу загрузит его.
Вы можете проверить эту проблему на веб-сайте с динамически загружаемой галереей изображений:
- Откройте демо-слайд-шоу в новой вкладке.
- Нажмите
Control+Shift+J(илиCommand+Option+Jна Mac), чтобы открыть DevTools. - Откройте вкладку Сеть .
- В раскрывающемся списке «Регулирование» выберите «Быстрый 3G» .
- Снимите флажок Отключить кэш .
- Перезагрузите страницу.
Использование preload позволяет изображению начать загрузку раньше времени, поэтому оно может быть готово к отображению, когда браузеру потребуется его отобразить.
Чтобы увидеть разницу, которую дает предварительная загрузка, проверьте ту же самую динамически загружаемую галерею изображений, но с предварительно загруженным первым изображением, выполнив действия из первого примера.
Предварительная загрузка фоновых изображений с помощью image-set
Если у вас есть разные фоновые изображения для разной плотности экрана, вы можете указать их в CSS с помощью синтаксиса image-set . Затем браузер может выбрать, какой из них отображать, в зависимости от DPR экрана.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Проблема с фоновыми изображениями CSS заключается в том, что браузер обнаруживает их только после того, как загрузит и обработает весь CSS в <head> страницы.
Вы можете проверить эту проблему на примере веб-сайта с адаптивным фоновым изображением .
Адаптивная предварительная загрузка изображений позволяет загружать эти изображения быстрее.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Отказ от атрибута href позволяет гарантировать, что браузеры, которые не поддерживают imagesrcset в элементе <link> , но поддерживают image-set в CSS, загружают правильный источник. Однако в этом случае от предварительной нагрузки они не выиграют.
Вы можете проверить, как ведет себя предыдущий пример с предварительно загруженным адаптивным фоновым изображением, в демонстрации предварительной загрузки адаптивного фона .
Практические эффекты предварительной загрузки адаптивных изображений
Предварительная загрузка адаптивных изображений теоретически может ускорить их работу, но что она дает на практике?
Чтобы ответить на этот вопрос, я создал две копии демонстрационного магазина PWA : одну без предварительной загрузки изображений , а другую с предварительной загрузкой некоторых из них . Поскольку сайт лениво загружает изображения с помощью JavaScript, вероятно, будет лучше предварительно загрузить те, которые появляются в начальной области просмотра.
Это дало следующие результаты без предварительной загрузки и для предварительной загрузки изображения :
- Старт рендеринга остался прежним.
- Индекс скорости немного улучшился (273 мс, поскольку изображения приходят быстрее и не занимают большую часть площади пикселя).
- Последний нарисованный герой значительно улучшился — на 1,2 секунды.
Предварительная загрузка и <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> . В любом случае это лучшая практика, особенно при использовании подсказок по приоритету для помощи в определении приоритета соответствующего изображения.
Влияние на наибольшую содержательную отрисовку (LCP)
Поскольку изображения могут быть кандидатами на наибольшую содержательную раскраску (LCP) , их предварительная загрузка может улучшить LCP вашего веб-сайта.
Независимо от того, является ли предварительно загружаемое изображение адаптивным, предварительная загрузка работает лучше всего, когда ресурс изображения не обнаруживается в исходной полезной нагрузке разметки. Вы также получите большее улучшение LCP на сайтах, которые отображают разметку на стороне клиента, чем на сайтах, которые отправляют полную разметку с сервера.