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

Barry Pollard

Yoav Weiss

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

Внимание! Одна или несколько демонстраций на этой странице больше не работают, поскольку Glitch прекратил хостинг.

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

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

Browser Support

• 73
• 79
• 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
• 85
• 11.1

Source

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

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

Важно! Предварительно загруженные изображения, скорее всего, имеют высокий приоритет, поэтому должны включать атрибут fetchpriority="high". В противном случае предварительная загрузка получит приоритет по умолчанию для атрибута as. Для изображений по умолчанию используется значение low, чтобы браузер мог отдавать приоритет контенту, блокирующему отрисовку. Подробнее о том, как оптимизировать загрузку ресурсов с помощью Fetch Priority API…

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.

Внимание! Адаптивные изображения могут не поддерживаться при предзагрузке HTTP-заголовков, поскольку область просмотра определяется только при создании документа. Это также означает, что их нельзя использовать для ранней предзагрузки в 103 Early Hints.

Некоторые браузеры, например Chrome, обрабатывают предварительную загрузку с этими атрибутами после определения документа и обработки первого фрагмента HTML. Это предложено для стандарта HTML. Однако это может быть рискованно, если область просмотра переопределяется позже в документе (например, в элементе <meta name="viewport">), поскольку загрузка неправильных адаптивных изображений уже может начаться.

Чтобы избежать проблем, рекомендуем использовать для адаптивных изображений элементы <link rel="preload" href="...">, а не заголовки HTTP-ответов Link: <...>; rel="preload".

Примеры использования

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание. В этом синтаксисе не учитывается необходимость префиксов поставщиков в браузерах на основе Chromium и WebKit. Если вы планируете использовать эту функцию, рекомендуем использовать Autoprefixer (доступен как онлайн-инструмент), чтобы автоматически решить эту проблему.

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

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

В этом примере скачивание изображения не начнется, пока не будет полностью скачан CSS, что приведет к ненужной задержке отображения изображения.

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

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

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

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

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

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

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

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

Вот результаты без предзагрузки и с предзагрузкой:

• Начало отрисовки не изменилось.
• Индекс скорости немного улучшился (273 мс, поскольку изображения загружаются быстрее и не занимают большую часть области пикселей).
• Показатель Last Painted Hero значительно улучшился – на 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)" 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>. Это рекомендуется делать в любом случае, особенно если вы используете приоритет выборки, чтобы помочь браузеру выбрать подходящее изображение. В этом случае будет предварительно загружено именно то изображение, которое поддерживается браузером. Кроме того, это позволяет избежать ситуаций, когда предварительная загрузка становится неактуальной из-за изменений в основной разметке.

Влияние на Largest Contentful Paint (LCP)

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

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