С каким разрешением подключать изображение к background у header, если header тянется на всю высоту?

Question

[Alex Clean]

Есть сайт, где header растягивается на всю ширину и высоту экрана на любом устройстве. Так вот, есть одна проблема, если мы возьмем среднюю + оптимизированную картинку для всех экранов, то при hd 1920x1080, она будет выдавать отвратительное качество. Однако, если мы возьмем картинку в 1920 на 1980, то тогда она будет долго подгружаться на всяких мобилках, да и вообще это извращение какое-то.

Какие есть варианты для решения этой проблемы? Лично мне приходит только 1, а именно использовать media.

Answer 1

[Kanonier8]

Ну разумеется для таких кейсов вы можете использовать media query

header {
	background: url(./mobile_bg.jpg);
}
@media screen and (min-width: 750px) {
	header { 
		background: url(./tablet_bg.jpg);
	}
}
@media screen and (min-width: 992px) {
	header { 
		background: url(./desktop_bg.jpg);
	}
}

Comments

[Alex Clean]

Хорошо, я понял