页面加载性能之图片内容

图片占了网站大概60%-85%的一个带宽，本文档主要解决图片加载的耗时问题。

移除没必要要的图片

首先要考虑的是，若是没有这个图片，是否会影响用户体验？若是不影响，放后续加载。

若是图片既不是为了陪衬文本，也不是为了给用户带来视觉上的体验，对用户而言并不是有意义的信息，则移除。

最快的图片加载，就是不去加载它。

选择更优的图片类型

PNG用来展现有透明度的图片。

JPG用来展现通常的图片。

GIP用来展现动画图片。

通常选择更小的JPG。

移出图片摘要信息（Metadata）

通常手机或者数码相机拍摄的图片，都会携带一些摘要信息，好比什么时候何地？用什么设备？曝光度如何？

这些信息有时候占据了10%的体积。

能够用如下工具对其进行移除：

http://www.verexif.com/en/

调整图片大小

基于使用调整

实际上用到的可能只有200 200，这时就不须要去加载一个1000 1000的图片。

只有在真正须要的时候，去加载对应尺寸的图片。

缩略图就该加载缩略图，而非原图。

裁剪图片，展现重点内容

对一张图片来讲，有重点和非重点的划分，重点是你想让用户看的区域，针对这部分区域能够裁剪出来。

下降图片质量

一张图片原始大小是227k，此时若是将质量下降至80%，只剩60k的大小。

针对不须要高分辨率的图片，能够适当下降图片质量，来减小图片体积，就好像你不会放大一我的的照片，来看他的毛孔粗细

相关工具：

• paint.net
• XNConvert
• ImageOptim
• ResizeIt
• PicResize
• Gimp

压缩图片

保持质量不变的状况下，用技术手段作图片压缩，经常使用网站：

https://tinypng.com/

总结

图片内容是主要优化空间，不只容易实施，并且对网站的加载速度有显著提高。

参考

https://developers.google.com...