Как адаптировать изображения на сайте?

Question

[kop_vlad]

Прошу помочь знающих людей в моем вопросе.

Есть сайт. В его шапке есть изображение с большим разрешением.
Хочется уменьшить время загрузки сайта при заходе с мобильного устройства.
Как сделать так что бы при заходе на сайт с мобильного устройства в шапке загружалось другое изображение (с меньшим разрешением)?
Именно загружалось другое изображение, а не масштабировалось текущее.

Подскажите как это делается или что гуглить.

Answer 1

[exilim]

делается это на back-end, браузер всегда посылает в запросе user-agent. В зависимости от того какой user-agent выдается различное изображение.

Answer 2

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

В идеале определять на сервере user-agent, но для ряда случаев можно обратиться и к CSS media queries.
Вот в дополнение статья Адаптивный и мобильный дизайн с CSS3 Media Queries.

Answer 3

[A K]

Можно так:

<img id="im" src="http://placehold.it/350x180" data-src-600-400="http://placehold.it/600x400" data-src-800-500="http://placehold.it/800x500" alt="1">

Вставлять нужный сорц из атрибута дата