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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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%), это стоит учитывать! Удачной предварительной загрузки!

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.