Как отменить загрузку img на мобильных?

Question

[Darya Shvakh]

Скажите пожалуйста как запретить (именно - запретить) загрузку - img на мобильных ?
Изображения (png) в html - img (паралакс).

Если потом на мобильных через медиа-запрос просто скрывать через display - none, то это отражается на скорости т.е. они всё-равно загружаются, но просто не отображаются.

Если через source то тоже - нет, для мобильных грузится по средствам css bg-img.

Может можно как-нибудь ещё запретить загрузку этих img на мобильных?

Comments

[Михаил]

css bg-img

<img> с object-fit ?

[Darya Shvakh]

Михаил, Добрый день и Спасибо за Участие))

Answer 1

[ThunderCat]

Скорее всего это должно подойти:

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

Comments

[Darya Shvakh]

ThunderCat, Добрый вечер!
Я сейчас - попробую.
Спасибо!

[ThunderCat]

Darya Shvakh, скорее всего вам придется поиграться с параметрами медиа запросов, но в целом это вроде наилучший вариант на сегодня.

[Darya Shvakh]

ThunderCat, в моём случае ещё нужен был pixel.png ( 1*1) для альтернативы.
Вам БОЛЬШОЕ - БОЛЬШОЕ СПАСИБО!!!
P.S a cute kitten - танцует для Вас))

Answer 2

[Роман Ямчук]

Можете использовать любой lazy-load плагин, которому можно запретить подгрузку изображений при определённой ширине экрана. Также не подгружаются изображения установленные через background у блоков с display: none

Comments

[Darya Shvakh]

Роман Ямчук, Добрый день.
img в html - в библиотеки паралакс эффект - 5 блоков, bg - не подходит.
lazy-load плагин это же отложенная загрузка ?
Спасибо!

[Роман Ямчук]

Darya Shvakh, src-аттрибут всегда осуществляет запрос, поэтому без js-никак

[Darya Shvakh]

Роман Ямчук, а какой плагин lazy-load используете - вы?

[Роман Ямчук]

Darya Shvakh, для моих задач хватало bLazy, но возможно есть библиотеки по-лучше

[Darya Shvakh]

Роман Ямчук, Спасибо!

Answer 3

[antonwx]

Отдавать разный код в зависимости от юзерагента. Можно и на клиентской стороны с помощью JS - если клиент не мобильный, вставляем картинку, мобильный - не вставляем.

Comments

[Darya Shvakh]

antonwx, Добрый день.
Ну как-бы с JS у нас .... вообщем вообще ни как))
А по средствам html 5 или css ни как ?
Спасибо!

[antonwx]

Darya Shvakh, не обойтись, увы, но код будет очень не сложным