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

Question

У меня есть трудное масштабирование моего изображения с помощью css и html. CSS-код выглядит следующим образом:

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

}

Тогда HTML выглядит следующим образом:

<header id="header" class="header"> 
<div class="header-wrapper"> <img src="./imag/taikuri.jpg" 
alt="taikureita" width="2050" height="812"/> 

Я хотел бы, чтобы масштабировать изображение каким-то образом получить более быструю скорость загрузки. Испытание страницы GTmetrix дает мне этот совет: Следующие изображения изменяются в формате HTML или CSS. Обслуживание масштабированных изображений может сэкономить 49.1KiB (уменьшение на 69%).

Страница находится на kim wist, и я не смог найти правильный способ сделать это, поэтому я должен попросить о помощи.

Answer 1

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

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

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

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

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

Другой, лучше вариант заключается в

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

Я вижу, вы уже используете это большое изображение с максимальной шириной 979 пикселей. Если это так, настройте изображение шириной 979px и используйте его в этом запросе на медиа. Если вам нужно увеличить размер, создайте более крупное изображение с более высоким сжатием 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; 
    } 
} 

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

@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%; 
    } 
} 

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

Answer 2

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

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

Answer 3

Вы можете использовать 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.