Как правильно работать с фоновыми изображениями для высоких разрешений?

Question

[Андрей]

Привет!
Появилась задача сделать на главной блок на всю ширину и высоту экрана с фоновой картинкой, примерно как у

Хочется, чтобы изображение было нормальным на высоких разрешениях (4к), но не хочется грузить мегебайтные исходники, особенно, если юзер не с 4к.

Answer 1

[Денис Инешин]

Mobile first media query.

По мере увеличения разрешения грузить большее изображение.

Примерно так:

.body {
    background-image: SMALL
}

@media (min-width: 1000px) {
    .body {
        background-image: BIG
    }
}

@media (min-width: 2000px) {
    .body {
        background-image: SUPER_BIG
    }
}

Answer 2

[Andrew]

Это помогает

Comments

[Lord_Dantes]

А если background ?

[Андрей]

Да, крутое решение, но присоединяюсь к комментатору выше)

[Andrew]

slave, Андрей, те же медиа только в .css

Answer 3

[dom1n1k]

https://css-tricks.com/snippets/css/retina-display...
Статья относительно старая, сейчас часть префиксов можно выпилить, но общая схема та же.