Отзывчивый дизайн: разные изображения для разных размеров экрана

Наш клиент хочет иметь другое изображение баннера на меньших экранах, чем на больших экранах. Не просто сжимайте/растягивать, чтобы соответствовать, но на самом деле замените другое изображение. Полноразмерное изображение довольно сложно - несколько человек, два логотипа и некоторый декоративный текст - и поэтому для меньшего изображения они хотят вырезать некоторых людей, отбросить логотипы и т.д. Поэтому им нужен самый большой, наиболее сложное изображение для настольных компьютеров, меньшее упрощенное изображение для устройств среднего размера, а затем меньшее и простое для самых маленьких.

Каков наилучший способ сделать это?

Моя первая мысль состоит в том, чтобы включить все три изображения и использовать ширину @media min/max, чтобы сделать две из них невидимыми при любом заданном размере. Как:

@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px)  { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px)  { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }

Это должно работать, но оно будет загружать все три изображения каждый раз, что кажется довольно пустой тратой пропускной способности.

Я мог бы изменить изображения из img-тегов на css-фоновые изображения. Будет ли это лучше? Это позволит избежать загрузки всех трех или будет ли это делать?

Я подумывал написать некоторый JavaScript для динамического обновления URL-адреса в теге img на основе размера экрана, но это похоже на сложность.

Я кратко подумал о том, чтобы сделать логотипы и текст отдельными изображениями и разбить фактическое изображение на куски, а затем попытаться собрать их все как перекрывающиеся изображения. Но это звучит, как много работы, чтобы получить право, и тогда я должен убедиться, что он выглядит правильно на всех возможных размерах, не так просто, чтобы просто сжиматься или растягиваться и т.д. И хотя это, вероятно, Я предпочел бы общее решение, которое я смогу использовать в будущем.

Кто-нибудь сделал что-то подобное и получил некоторые идеи о том, как это сделать?

Ответ 1

Вы можете использовать css background в media queries. Изображения загружаются только в том случае, если этого требует CSS, поэтому, если ничто не соответствует селектору, загрузка изображения не будет беспокоить.

Эта статья наверняка поможет вам.