Загрузка изображений на сайте

Если у вас есть медиа-запрос для мобильных устройств, то картинка не будет загружаться для десктопа, если вы загрузили сайт на телефоне или в маленьком окне браузере. То же самое работает в обратную сторону.

Пример

div { 
  height: 512px; 
  width: 512px; 
  background-image: url("http://pngimg.com/uploads/facebook_logos/facebook_logos_PNG19753.png"); 
} 
 
@media screen and (min-width: 240px) and (max-width:830px) { 
  div { 
    background-image: url("http://download.seaicons.com/icons/limav/flat-gradient-social/128/Facebook-icon.png"); 
  } 
}

<div></div>

Можете убедиться в этом сами во вкладке браузера netwrok, если будите открывать страничку на разных разрешениях.

Результат загрузки при маленьком разрешении

Как видно из скриншота, для маленького разрешения загрузился соответствующий background и никакой другой.

Нет, в этом медиа запросе говорится что на разрешении от 500рх и выше будет картинка 1.jpg

@media screen and (min-width: 500px) {
  background-image: url("../img/1.jpg");
}

а в этом, что от 1000рх уже будет 2.jpg, следовательно 1.jpg уже выводиться не будет

@media screen and (min-width: 1000px) {
  background-image: url("../img/2.jpg");
}