前端性能优化之图片

图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

优化方法总结：

1.能不用图片解决的就不用

备选技术

• CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得非常清晰，占用的空间也很小。
• 网络字体。现在连很多图标库都是用字体方式提供，保持文字的可搜索性同时扩展显示的样式。
• SVG

2.生成图片的时候可以做很多压缩

一般ui在作图的时候，需要导出web所用格式，然后质量可以根据需求具体来压缩。jpg的图片压缩到60%还是非常清晰的。

3.图片格式的选择

有一种加载先模糊后清晰，另一种是很清晰，但是逐行加载显示。（原因是图片本身压缩算法不同，在图片被生成的时候已经决定了图片在浏览器当中是如何表现的）
模糊到清晰（小波算法），逐行加载显示（离散余弦变换，使用实数）浏览器根据不同图片选择不同算法。更改文件后缀名不会影响加载方式，压缩算法读取是在文件头部。从用户体验来说，小波格式图片效果更友好。

z注：ps生成小波算法图片的方法：

PNG图片使用PS导出时,勾选交错, jpg导出时,勾选连续.导出的图片就是从模糊到清晰的效果了,通常称为交错式PNG和渐进式JPG。

4.使用工程化的图片优化方案

如webpack的image-webpack-loadr。还有很多插件，都可以实现图片的压缩。小图片转换成base64图片等。还有七牛CDN；

使用在线工具压缩：https://zhitu.isux.us/

 

5.响应式图片解决方案 srcset

 

6.减少图片请求的方法

雪碧图,很多在线工具：http://alloyteam.github.io/gopng/

注意点：控制雪碧图的大小，太大容易出现很多按钮同时不出现问题，特别是移动端。

base64：会增加css文件的大小，也是一个权衡，一般是小图片自动转换成base64.

inconfont:小图标可以用字体代替。

 

参考：

https://www.runoob.com/w3cnote/web-image-optimization.html