Как правильно адаптировать изображение под разные размеры экрана?

Question

[galina_nj]

Добрый день!

У меня есть web страница на которой размещен баннер.
Сейчас это div для которого я задала background.
Для элемента div я прописала свойства
width: 100%;
background-repeat: no-repeat;
background-size: cover;

и для разных разрешений экрана прописала media запрос, в котором указала конкретное изображение, например
media screen and (min-width: 1681px){
.banner {
background: url('../img/1920x563.jpg');
}
}
media screen and (min-width: 1601px) and (max-width: 1680px){
.banner {
background: url('../img/1680x492.jpg');
}
}
и т.д

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

Comments

[Руслан Галиев]

Зачем вы загружаете разные размеры баннера под разные разрешения? Чем не устраивает максимальный размер изображения, который обрезается и уменьшается, в соответствии с размером DIV'а?

[galina_nj]

Продублирую сюда тоже ответ для пользователя kulaeff
Решила сделать так, чтоб не грузить большие изображения, когда этого не надо.
Ведь размер картинки 1920 у меня 111КВ, а например 960px - 45KB. Больше чем в 2 раза больше.

[Артём Ведищев]

Статья в тему:
https://webformyself.com/vybor-resheniya-dlya-adap...

Answer 1

[kulaeff]

А зачем так делать? Пусть будет одно изображение шириной 1920, браузер сам отмасштабирует, если указан background-size: cover. А если вам пофиг на IE, то можно использовать тег picture.

Comments

[galina_nj]

Решила сделать так, чтоб не грузить большие изображения, когда этого не надо.
Ведь размер картинки 1920 у меня 111КВ, а например 960px - 45KB. Больше чем в 2 раза больше.

[kulaeff]

В таком случае у вас вполне рабочее решение. Если бы IE поддерживал тег picture, то было бы еще красивее и оптимальнее, но, увы...

[galina_nj]

kulaeff: понятно, спасибо