web性能优化三图片的相关优化

有损压缩-一张jpg图片的解析过程，损失的信息不会构成用户使用困扰

可以看出，在一张紧jpg解析过程中会有损失，但是图片的损失还不会影响到用户的视觉
png8/png24/png32之间的区别

png8 png24 png32 256色 2^24色 2^24色 支持透明 不支持透明 支持透明 文件小 介于两者之间 文件大

在实际项目中选择png图片的时候，可以按照实际场景进行抉择，因为每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要

不同格式图片常用的业务场景

• jpg有损压缩，压缩率高，不支持透明—大部分不需要透明图片的业务场景
• png支持透明，浏览器兼容好—大部分需要透明图片的业务场景
• webp压缩程度更好， 在ios webview 有兼容性问题 –安卓全部
• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景 —图片样式相对简单的业务场景（字体图标）

css雪碧图

把你网站上用到的一些图片整合到一张单独的图片中

• 优点是减少你的网站的HTTP请求数量
• 缺点是如果这张图片比较大的话，浏览器没有加载完全，会导致页面失去图片信息，一次加载比较慢

Image inline

将图片的内容内嵌到html当中（base64）
- 减少你的网站的HTTP请求数量(思考，图片很小的icon 较多的时候，时间损失主要在网络请求上，最好还是使用base64内嵌)

如下图所示：

<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==”/>

base64在线转码网站

使用矢量图

使用SVG 进行矢量图的绘制，使用iconfont 解决icon 问题,比如网页的一些小图标可以使用iconfont网站开源的一些图标库

webp图片格式

由于webp图片格式是由谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。所以现在还有兼容性的问题，但是一些大厂都已经使用上了，比如Google，Facebook，还有阿里等公司，这个格式在安卓系统下没有兼容问题

图片优化的在实际网站的应用：淘宝触屏版

以上就使用了Image inline 和webp

总结下，在web端页面所要展示的图片，大家可以根据实际场景进行优化和选择，合适的方式会让页面的加载速度和渲染速度提升很多。