图片相关优化
1.图片相关优化的核心概念
图片压缩指的是针对图片的情况，舍弃一些相对无关紧要的色彩信息，舍去测部分人眼基本是察觉不出来的。
- 有损压缩在压缩过程中会丢失部分图片资源，但是这部分资源对人眼来说是没有区别，所以不是很重要。
- png8/png24/png32的区别
- png8 256色+支持透明（8bit就可以表示一个颜色）
- png24 2^24色+不支持透明（24bit才可以显示一个像素中的颜色）
- png32 2^24色+支持透明（在24位的基础上增加8位支持透明）
- 根据需要选择文件类型，颜色越丰富，所需的空间就越多
- 不同格式图片常用的业务场景
- jpg有损压缩，压缩率高，不支持透明
- png支持透明，浏览器兼容性好（如果png8能支持的话，那么文件大小会相对更小）
- webp压缩程度更好，在ios webview有兼容性问题（2010年谷歌提出来的文件格式）
- svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景（svg标签在代码中进行图片的绘制，质量相对较高，iconfont这样的库就可以很好的使用svg图）
- jpg多应用于大部分不需要透明图片的业务场景
- png多应用于大部分需要透明图片的业务场景
- webp多应用于安卓部分
- svg多应用于图片样式相对简单的业务场景
- css雪碧图
- 将网站要用的图片都放在一张图片上
- 可以减少网站对于图片的http请求，减少网站的请求数量
- 当雪碧图比较大时，加载会比较慢
- 一旦雪碧图加载失败，那么网站上所有的图标都会消失
- svg矢量图的使用
- svg是html5中一个比较重要的标准
- 可以使用几行代码就实现相对复杂的图标，减少页面的体积，增加网页的请求速度
- image inline 将图片的内容内嵌到html中以减少网站的http请求数量
- image inline会将html文件变大，但是图片不大的话，基本可以忽略，但是可以减少一次http请求，所有小鱼8kb或者4kb的文件，一般是选用image inline将图片内联进来，这样减少网络请求的时间会大大小鱼html文件大小的增加的请求时间
- https://tinypng.com（图片压缩网站）
- https://www.spritecow.com（雪碧图制作网站）
2.facebook和淘宝移动首页案例分析
淘宝移动端首页分析
- 淘宝首页会自动判断是否当前浏览器是否支持webp格式图片，若是，则使用webp格式的文件，若是ios类型的浏览器，不支持webp格式的话，则自动换成jpg格式的文件
- 部分小图标使用了image inline的方式直接将图片内嵌到网页中，减少http的请求数量。
facebook的实例分析
- facebook的网站上使用的css图标是雪碧图，但是对雪碧图也做了一定的处理，将部分具有相同特性的图标放在一张雪碧图上，这样将雪碧图拆分开，增加了请求数量，但是避免了图片过大对网络的压力