Масштабирование фонового изображения с помощью css и html

То, что вы пытаетесь сделать, это уменьшить размер файла изображения, чтобы оно загружалось быстрее.

Ваше решение, опубликованное в вашем вопросе, пытается уменьшить ширину и высоту изображения, чтобы оно отображалось на экране как меньшая ширина и высота. Однако то же самое изображение со всем его огромным размером файла все еще загружается. Браузер просто уменьшает его внешний вид для вас.

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

Подумайте об этом так: я вешу 200 фунтов. Если я сфотографирую себя и уменьшу ее, в реальной жизни я все еще вешу 200 фунтов. Это то, что вы пытаетесь сделать. НО... если я немного похудею, то в реальной жизни я меньше и мне будет не так больно, если я сяду на тебя. Это то, что вы спрашиваете, как сделать. Есть смысл?

В этом случае откройте изображение в фотошопе, сделайте копию, измените его размер на меньшую ширину (вы можете сделать это в меню «Изображение» > «Размер изображения») с включенным контролем соотношения сторон. Загрузите это изображение и используйте его вместо него.

Другой, более удачный вариант —

1. Удалите свой <img> из своего html, так как он дублируется и огромен. Вы можете воссоздать этот эффект масштабирования в css.
2. Настройте больше медиа-запросов, чтобы использовать разные изображения при разной ширине медиа.

Я вижу, вы уже используете это большое изображение с максимальной шириной 979 пикселей. Если это так, настройте изображение шириной 979 пикселей и используйте его в этом медиа-запросе. Если вам нужно увеличить размер, создайте более крупное изображение с более высоким сжатием jpg и создайте более крупный медиа-запрос для его обработки, что-то вроде следующего кода (обратите внимание, что я переименовал ваше изображение в качестве примеров настройки разных изображений):

@media (max-width: 979px) {
    .header-wrapper {
        height: 388px;
        background: url("../images/taikuri_979w.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
}

Вот второй медиа-запрос с увеличенным изображением. Примечание. Я добавил padding-top в процентах с минимальной высотой, чтобы верхняя область масштабировалась соответственно ширине браузера):

@media (min-width: 1000px) {
    .header-wrapper {
        height: auto;
        min-height:388px;
        background: url("../images/taikuri_really_big.jpg") no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        padding-top:35%;
    }
}

Если у вас нет фотошопа, вы можете изменить размер изображения с помощью такого сервиса: http://www.picresize.com/ Я никогда не использовал это, но похоже, что оно делает то, что вам нужно. Кроме того, если вы работаете на Mac, в приложении Preview можно изменить размер изображения. Не уверен, что может быть в Windows или Linux, извините!

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

Вам следует взглянуть на tinypng.com или compressor.io для сжатия вашего изображения. Это поможет вам со скоростью загрузки. Сжатие изображения уменьшает размер файла. Это займет меньше места на жестком диске, а также будет меньше серверу для передачи пользователю.

Вы можете использовать javascript для загрузки изображения после загрузки страницы и поместить что-то вроде этого перед тегом ‹ / body >.

 <script>
 var width = document.getElementById('header').clientWidth;
 if(width>=1000)
 {
     document.getElementById("imageid").src="./images/BigImage.jpg";
 }
 if(width>500 && width<1000)
 {
     document.getElementById("imageid").src="./images/MediumImage.jpg";
 }
 if(width<=500)
 {
     document.getElementById("imageid").src="../images/SmallImage.jpg";
 }
 </script>

Конечно, это предполагает, что в браузере включен javascript.