Как использовать миниатюры в мобильной версии сайта?

Question

[roxik]

Здравствуйте!

Если делать:

<img class="mobile" src="..." alt="">
<img class="desktop" src="..." alt="">

на десктопе:

.mobile {
   display: none;
}

на мобильной:

.desktop {
   display: none;
}

то грузится будет одна или две картинки?

Хотелось бы чтобы не грузились большие картинки в мобильной версии сайта.

Какие есть кейсы решения проблемы?

Answer 1

[tyzberd]

https://developer.mozilla.org/en-US/docs/Web/HTML/...
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
только смотрите поддержку srcset, source

Comments

[roxik]

так да или нет?

[Gortyser]

roxik, да, грузиться будет одна или две картинки?

[roxik]

Gortyser, да

[tyzberd]

да, будут грузиться две картинки, можете в network посмотреть.

[Саша]

tyzberd roxik будет грузиться только актуальная картинка.

[tyzberd]

Саша, почему jsfiddle.net/RzFG2
если посмотреть в нетворк она всеравно загружается.
https://timkadlec.com/2012/04/media-query-asset-do...

[Саша]

tyzberd, мы же не об этом говорим, а srcset)

[tyzberd]

мы еще отвечали на вопрос про display: none; "то грузится будет одна или две картинки?"
по srcset так да, будет актуальная

[roxik]

Саша, а если указать scrset и он не поддерживается браузером, то покажется картинка с src и проблем нет?

и еще вопрос: есть кроссбраузерный вариант?

[Саша]

roxik, так точно, покажется дэфолтная, которая просто указана в src

по кроссбраузерности
https://caniuse.com/#search=srcset
https://caniuse.com/#search=picture

В ИЕ 11 будет отображена дэфолтная, которая просто указана в src