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

Я ищу решение для подавления / ограничения загрузки изображений, которые скрыты в определенных точках прерывания, используя srcset. Я бы хотел избежать использования фоновых изображений и javascript.

Удивление, если это законный подход:

@media screen and (max-width: 768px) {
  .container {
    display: none;
  }
}
<div class="container">
  <img src="http://lorempixel.com/1200/1200" 
       srcset="http://lorempixel.com/1200/1200 1200w, http://lorempixel.com/1000/1000 1000w, http://lorempixel.com/800/800 800w, https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif 1w" 
       sizes="(max-width: 768px) 1px, 100vw, (min-width: 1920px) 50vw,">
</div>

Идея заключалась в том, что где видовой экран? 768px (где скрытый div скрыт), пользователю предоставляется прозрачный gif 1px, а не более тяжелое изображение.

html,css,responsive,responsive-images,

0

Ответов: 1

0

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

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

Вы также можете:

  • использовать встроенные данные URI-кодированный 1px прозрачного GIF в srcsetвместо внешнего изображения
  • используйте CSS Media Queries, чтобы скрыть контейнер, но будьте осторожны, как вы это делаете: https://timkadlec.com/2012/04/media-query-asset-downloading-results/

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

HTML, CSS, реагирующие, реагирующие-изображения,
Похожие вопросы
Яндекс.Метрика