Без размера изображения влияет на скорость сайта

Question

Я разрабатываю адаптивный сайт. В адаптивном веб-дизайне мы не можем указывать ширину и высоту изображения в тегах "img". Но без ширины и высоты сайт очень медленный. Есть ли решение для этого?

Answer 1

Вы можете дублировать изображение, одно для большого экрана и одно для маленьких экранов (миниатюра).

<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/>
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/>

Css:

.show-for-large {display:block;}
.show-for-small {display:none;}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .show-for-large {display:none;}
  .show-for-small {display:block;}
}

И вы можете отобразить: ни один маленький img для большого экрана и по отзывчивости вы можете сделать display:block;

Браузер не отображает элементы без отображения, так что это может быть хитростью.