Бесспорно хочется, чтобы изображения на сайте были как можно качественнее. Но, за качество приходится платить размером файла и, как следствие, временем для его загрузки. Если скорость приёма/передачи данных при этом небольшая, то наблюдать пустой экран не очень приятно.
Чтобы избежать подобной ситуации, необходимо поставить "заглушки" из изображения низкого качества и фонового цвета:
body {
/* Порядок слоёв важен! Высокое качество, низкое качество, цветовая заглушка */
background-image: url("../img/background.jpg"), url("../img/background_low.jpg"), radial-gradient(#eee, #48f);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
margin: 0;
}
- Изображение низкого качества делаем в графическом редакторе или конвертере из оригинального изображения, путём пропорционального уменьшения размеров сторон и установкой максимальных параметров сжатия (естественно, что в разумных пределах).
- Для цветовой заглушки, лучше использовать какой-либо из градиентов (radial- или linear-), подобрав цвета наиболее подходящие по палитре на изображении (например, если на картинке у Вас изображены облака, то в градиенте будут голубой и белый цвета).
Также желательно использовать медиа-запросы (@media), чтобы на основе разрешения экрана, подгружать картинку с близкими параметрами. Избыточное качество не даст никакого эффекта, кроме увеличения трафика и времени загрузки. Так, на экране 800х600, будут выглядеть одинаково, что картинка с такими же размерами, что картинка в 4K.
блымает
?