web前端优化（2）

图片相关优化

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图标是雪碧图，但是对雪碧图也做了一定的处理，将部分具有相同特性的图标放在一张雪碧图上，这样将雪碧图拆分开，增加了请求数量，但是避免了图片过大对网络的压力