Предварительная загрузка изображений с помощью Imagesize и Imagesrcset | Журнал "Вольт"
Вт. Ноя 24th, 2020


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

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

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

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

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

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

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

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

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

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

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

На что следует обратить внимание при использовании imagesrcset и imagesize для элементов ссылок

Imagesize и imagesrcset работают только с элементами ссылок с rel = “предварительная нагрузка” и как = “образ” атрибуты. Кроме того, опустите элемент href для элемента ссылки, чтобы не поддерживающие браузеры не запрашивали бесполезное изображение, потому что браузер загружает более подходящее изображение.

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

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

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

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

Сотрудники редакции: Команда Webformyself.

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

Пройдите курс и узнайте, как создавать макеты современных веб-сайтов в HTML5 и CSS3.

Учить больше

PSD в HTML

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

Посмотрите



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *