二、图片相关优化

图片类型：

png8——256色支持透明，8比特

png24——2的24次方色，不支持透明，24比特

png32——2的24次方色，支持透明，32比特

png是无损压缩，JPEG是有损压缩，每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要。

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

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

如何进行图片压缩：

针对真实图片情况，舍弃一些相对无关紧要的色彩信息。

1、CSS雪碧图：把你的网站上用到的一些图片整合到一张单独的图片中

优点：减少你的网站的HTTP请求数量
缺点：合并的图片太大，一次加载比较慢，如果没有加载出来那么整个页面就失去了icons。

解决办法：雪碧图不能太大，将icons分在多个雪碧图中。根据业务相关、将雪碧图进行拆分。

制作雪碧图样式：www.spritecow.com,选择一个区域会生成样式，width和height就是想要的那个icons的大小。left,top就是相对于左上角那个点，我们的icons要怎么偏移，icons的左上角才能和整个图片的左上角重合。

2、Image inline：将图片的内容内嵌到html当中（base64）

优点：减少你的网站的HTTP请求数量

缺点：整体的size会变大

小与4kb的或者8kb的图片就应该inline进去

3、使用矢量图：使用SVG进行矢量图的绘制，使用iconfont解决icon问题。

4、在安卓下使用webp：WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。