html img加载不同大小图像速度

最近要想法提高网页的性能，在查看图片加载时，产生了试验的想法。一直以来都没有太去深究，还是挖掘一下的好。

 

很简单的试验，<img>加载两个图像，一个2.3MB，5000*5000，一个22kb，160*160。

两个全部在页面上显示限定160*160的尺寸。

<img src="images/***.png" width=160 height=160 />

实际测试结果：5000的图像加载需要383ms，而22kb只需要12ms。差距非常大。

 

但是这只是第一次加载的数据，在后续次数的对比，两者数据就变的完全一样。3-7ms。

原因是直接使用了浏览器的缓存图片，5000的图像在缓存里，依然也是第一次显示之后的160尺寸的缓存图片。

可见，对于网页显示图像，小尺寸的显示区域，还是没必要显示尺寸特别大的图。

使用缩略图是很有必要的。

以上。