Можно ли запретить загрузку картинок для десктопа (предназначенных для десктопа) на мобильных и наоборот?

Question

[Shing]

Разные картинки под стилем hidden-on-mobile и is-mobile.
Но получается ведь, что браузер все равно грузит все картинки из кода или нет?

Можно ли сделать, чтобы картинки под стилем hidden-on-mobile не грузились на мобильных, а is-mobile соотв-но на десктопах? Чтобы ускорить загрузку страницы.

Может быть как-то lazy loads прикрутить? Но как бы оно тоже тяжелее не стало из-за js/jquery.

Или сделать на дивах? div id="hidden-on-mobile" div id="is-mobile" и все картинки спрятать в CSS? Тогда прокатит, div is-mobile на десктопе не будет подгружен?

Answer 1

[Можно просто Евгений]

https://www.w3schools.com/tags/tag_picture.asp - вам в помощь ! :)

Comments

[alex-1917]

Поддержка начиная от 13-й IE -> совсем не годно!!)))

[Можно просто Евгений]

Ну смотря от требования ...
Всё это можно запилить с помощью jQuery задавая data-{media}-src ....
Так что уже автору самому решать на вкус и цвет )

Answer 2

[alex-1917]

Если действительно это так важно, то формируй код сразу под нужное моб. устройство, т.е. не формируй лишнего. Есть же https://github.com/serbanghita/Mobile-Detect !!!

В реальной жизни все это фигня, гораздо больше планшеты тратят памяти на новомодную стартаперскую фичу - иконки в svg!)))

Забей!

Comments

[Shing]

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

Answer 3

[iBird Rose]

Через css вряд ли сделаешь красиво.
К примеру можно через js менять аттрибут src. https://jsfiddle.net/0ohaLy6n/8/