没有图像尺寸会影响网站速度

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 none渲染元素，因此这可能是一个技巧。