Как не подгружать картинка на мобильных устройствах?

Question

[Керим Бердимырадов]

Знаю что можно использовать медиа кверы, чтобы прятать картинки

@media screen and (max-width: 768px) {
          img {
                 display: none;
         }
}

Так же знаю что используя те же медиа квери можно отследить разрешение экрана и подгружать нужные картинки (для ретины например)

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/[e-mail]');
    background-size: 200px 100px;
  }
}

Так вот! Если какой нибудь способ (желательно через те же самые медиа квери), чтобы можно было отследить ширину экрана и в зависимости от ширины подгружать, либо не подгружать картины?

Answer 1

[profesor08]

Не использовать img, а вместо них div и в CSS через media устанавливать фоновую картинку или нет.

Answer 2

[display: block]

Использовать srcset.

Comments

[0leg5ergeev]

слишком ново, разве нет? по-моему, только вебкит поддерживает этот атрибут