Как не загружать background-image на мобильных устройствах?

Question

[TraiDeR]

Здравствуйте! Подскажите пожалуйста, каким образом можно сделать на адаптивном сайте так, чтобы браузер не загружал достаточно тяжелый background из css стилей на мобильных устройствах, а загружался он только на десктопе. Может быть подскажите какие-либо решение, библиотеки, которые сами используете?

UPD: Наверное, нужно уточнить, что в свойстве background задан не цвет, а изображение. И вопрос в том, как не загружать изображение на мобильных устройствах, чтобы ускорить загрузку сайта и сэкономить пользователю мобильный трафик. Я не думаю, что используя media queries помогут это осуществить. С помощью них можно скрыть background-image, но браузер в любом случае подгрузит изображение.

Comments

[Дмитрий]

вот простой пример jsfiddle.net/ct3b03xe

[TraiDeR]

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

[Дмитрий]

для моб устройств использовать другое изображение, оптимизированное для них

[Sanes]

TraiDeR: никак

[TraiDeR]

Я это, конечно, понимаю, но разве мобильный браузер не загрузит сразу оба, а покажет только изображения для мобильного девайса?

Answer 1

[Евгений Петров]

Media Queries
Пример

Comments

[Sanes]

разве это избавит от факта загрузки?

[TraiDeR]

Насколько мне известно, браузер все равно загрузит все изображения, что указаны в css.

[gracer]

Sanes: TraiDeR: Без необходимости изображения не загрузятся.

[Sanes]

gracer: назовите браузер, который не загрузит?

[TraiDeR]

Евгений Петров: спасибо! Chrome действительно не загружает. Как только изменяю окно до мобильных размеров, в запросе видно, что произошла подгрузка.