HTML5 <picture> тег поможет вам найти правильный источник изображения в зависимости от ширины экрана.
По-видимому, поведение браузеров не сильно изменилось за последние 5 лет, и многие все равно будут загружать скрытые изображения, даже если для них установлено display: noneсвойство.
Несмотря на то, что существует обходной путь для медиа-запросов , он может быть полезен только тогда, когда в CSS задано изображение в качестве фона.
В то время как я думал, что есть только решение проблемы JS ( ленивая загрузка , заполнение изображения и т. Д.) , Оказалось , что есть хорошее решение для чистого HTML, которое поставляется из коробки с HTML5.
И это <picture>тег.
Вот как MDN описывает это:
HTML <picture>элемент представляет собой контейнер , используемый для указания нескольких <source>элементов для конкретного <img>содержащихся в ней. Браузер выберет наиболее подходящий источник в соответствии с текущим макетом страницы (ограничения поля, в котором будет отображаться изображение) и устройством, на котором оно будет отображаться (например, обычное устройство или устройство hiDPI).
И вот как это использовать:
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
Логика позади
Браузер загрузит источник imgтега, только если не применяется ни одно из правил мультимедиа. Когда <picture>элемент не поддерживается браузером, он снова возвращается к отображению imgтега.
Обычно вы помещаете наименьшее изображение в качестве источника <img>и, следовательно, не загружаете тяжелые изображения для больших экранов. И наоборот, если применяется правило мультимедиа, источник <img>не будет загружен, вместо этого он загрузит содержимое URL соответствующего <source>тега.
Единственный подводный камень в том, что если элемент не поддерживается браузером, он загрузит только маленькое изображение. С другой стороны, в 2017 году мы должны думать и кодировать в мобильном подходе.
И до того, как кто-то слишком взволнован, вот текущая поддержка браузера для <picture>:
Настольные браузеры
Мобильные браузеры
Подробнее о поддержке браузера вы можете узнать на странице «Могу ли я использовать» .
Хорошо, что предложение html5please - использовать его с запасным вариантом. . И я лично намерен принять их совет.
Подробнее о теге вы можете найти в спецификации W3C . Там есть отказ от ответственности, который я считаю важным упомянуть:
pictureЭлемент несколько отличается от аналогичных перспективных videoи audioэлементов. Хотя все они содержат sourceэлементы, srcатрибут исходного элемента не имеет смысла, когда элемент вложен в pictureэлемент, а алгоритм выбора ресурса отличается. Кроме того, сам pictureэлемент ничего не отображает; он просто предоставляет контекст для содержащегося в нем imgэлемента, который позволяет ему выбирать из нескольких URL-адресов.
Так что это говорит о том, что это только помогает вам улучшить производительность при загрузке изображения, предоставляя некоторый контекст для него.
И вы все еще можете использовать некоторую магию CSS, чтобы скрыть изображение на небольших устройствах:
<style>
picture { display: none; }
@media (min-width: 600px) {
picture {
display: block;
}
}
</style>
<picture>
<source srcset="the-real-image-source" media="(min-width: 600px)">
<img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>
Таким образом, браузер не будет отображать фактическое изображение и будет загружать только 1x1пиксельное изображение (которое можно кэшировать, если вы используете его более одного раза). Имейте в виду, однако, что если <picture>тег не поддерживается браузером, даже на экранах descktop фактическое изображение не будет отображаться (поэтому вам определенно понадобится резервная копия с полифилом).
