Главная » Статьи » Как загрузить адаптивные изображения с imagesize и imagesrcset

Как загрузить адаптивные изображения с imagesize и imagesrcset

Как загрузить адаптивные изображения с imagesize и imagesrcset

От автора: сегодня я прочитал статью Адди Османи «Более быстрая предварительная загрузка поздно обнаруженных Hero-изображений». Это хороший обзор способов предварительной загрузки ресурсов, если вы хотите настроить и улучшить поведение загрузки браузера. Крутая вещь в этой статье: я обнаружил недавно добавленную функцию веб-платформы, которая помогает ускорить загрузку адаптивных изображений.

Предположим, у вас на странице есть следующее адаптивное изображение.

<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" sizes="100vw" alt="...">

И атрибуты srcset и sizes этого элемента изображения предоставляют браузерам информацию, что оно будет развернуто на всю ширину окна просмотра (100vw), и что оно доступно в трех размерах в пределах от 400 пикселей до 1600 пикселей. Обладая этой информацией, браузеры могут загружать наиболее подходящее изображение, не доставляя зря данные с высоким разрешением на крошечные экраны.

Однако вы должны учитывать, что браузеры загружают ресурсы в определенном порядке. Обычно они запрашивают изображения после важных ресурсов, таких как таблицы стилей и шрифты. Чтобы изменить этот порядок загрузки и приоритет ресурсов, вы можете использовать элементы <link rel=»preload»> в head документа, чтобы сигнализировать, что определенные ресурсы имеют высокий приоритет или скоро будут запрошены документом.

<!-- preload a font that will be discovered later -->
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>

Но как предварительно загрузить с помощью атрибутов sizes и srcset адаптивное изображение встроенное в DOM, когда визуализируется компонент JavaScript?

Предварительная загрузка адаптивных изображений с помощью rel=»preload»

Оказывается, в спецификацию введены imagesrcset и imagesizes. Вы можете использовать эти атрибуты для элемента link, чтобы дать браузерам информацию о высоком приоритете адаптивных изображений с атрибутами sizes и srcset.

<head> <!-- Hey browser! Please preload this important responsive image --> <link rel="preload" as="image" imagesrcset=" image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" imagesizes="100vw">
</head>
<body> <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" sizes="100vw" alt="...">
</body>

Imagesrcset и imagesizes следуют тем же правилам, что srcset и sizes для элементов img, чтобы вы могли повторно использовать те же значения атрибутов, которые используете для самого изображения.

Что следует учитывать при использовании imagesrcset и imagesizes для элементов link

Imagesizes и imagesrcset работают только с элементами ссылок с атрибутами rel=»preload» и as=»image». Кроме того, опустите элемент href для элемента link, чтобы не поддерживающие браузеры не запрашивали бесполезное изображение, потому что браузер загружает более подходящее изображение.

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

На момент написания статьи на caniuse.com или MDN нет данных о поддержке браузерами. Но вы можете посмотреть статусный тикет Chrome для imagesrcset и imagesizes, и, похоже, это дополнение к веб-платформе в настоящее время предназначено только для Chrome (и Edge).

Тем не менее, глядя на долю рынка Chrome в наши дни (примерно 70%), это стоит учитывать! Удачной предварительной загрузки!

Источник: https://www.stefanjudis.com

Редакция: Команда webformyself.