Как не загружать картинки?
 

Здравствуйте! Есть примерно такие блоки с картинками:

<div class="img">
  <img src="images/01.jpg">
  <div class="img-device">
    <img src="images/device/01.jpg">
  </div>
</div>
<div class="img">
  <img src="images/01.jpg">
  <div class="img-device">
    <img src="images/device/01.jpg">
  </div>
</div>

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

Как сделать что б загружались только нужные?

Спасибо!

https://developer.mozilla.org/ru/doc...ponsive_images
Пробовали?

Попробуйте view port единицы вместо статических px. Ни чего скрывать не нужно. Одна картинка на любые размеры экранов.