responsive-design - 没有图像尺寸影响网站速度

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

并且您可以 display:none 用于大屏幕的小 img 和响应性您可以执行 display:block;

浏览器不会渲染不显示的元素，所以这可能是一个技巧。