2、图片相关优化

图片类型：

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

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

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

png是无损压缩，JPEG是有损压缩，每种图片格式都有本身的特色，针对不一样的业务场景选择不一样的图片格式很重要。

不一样格式图片经常使用的业务场景：

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

如何进行图片压缩：

针对真实图片状况，舍弃一些相对可有可无的色彩信息。

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

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

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

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

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

优势：减小你的网站的HTTP请求数量

缺点：总体的size会变大

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

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

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