Как отключить загрузку изображений в мобильной версии сайта?

Question

[Асиков Артур]

Как отключить загрузку картинок в мобильной версии сайта? В статье они не несут большой смысловой нагрузки, а сервер нагружают. Что посоветуете?

На сайте картинки обернуты в контейнер с одним и тем же классом

<div class="img_wrap">
      <img src="URL" alt="альтернативный текст">
</div>

Comments

[Макс]

C display none заблуждался и вас обманул.

Answer 1

[lloydbanks]

Это можно сделать без JavaScript. Тэг <picture> позволяет загружать картинки в зависимости от различных экранов.
Можно сделать таким образом, чтобы на мобильных устройствах загружалась какая-нибудь скрытая 1-пиксельная картинка, которая закешируется браузером и не будет создавать никаких лишних запросов.
Пример:

<style>
  picture { display: none }

  @media (min-width: 767px) {
    picture {
      display: block
    }
  }
</style>

<picture>
 <source srcset="#путь-к-изображению" media="(min-width: 767px)">
 <img src="#1x-placeholder">
</picture>

Comments

[Виктор П.]

Привет!
Для этих "относительно новых" тегов нужно смотреть на браузерную совместимость.
Интернет эксплорер, я смотрю, вообще не держит данный тег. Если по спецификации на сайте нет поддержки ИЕ, то можно пользовать. Если в условиях значится поддержка, то использовать нельзя :(
Ну и есть какие-то проблемы с файрфоксом и им же на андройде.

Answer 2

[Виктор П.]

Посмотрите в сторону lazy load. Смысл в том, что вы вначале перегоните основной сайт под эту концепцию (когда картинки загружаются после загрузки основного контента). А после этого для мобильной версии подставите кастыль, чтобы картинки вовсе не грузились.