图片的优化策略

[wangning0]

常规策略

• 能不用图片就不用图片

  透明、边框、圆角、阴影、渐变都可以用css来实现，而且svg和canvas、iconfont等再主流浏览器中的支持非常高

• 压缩

  • 简单压缩，利用在线图片压缩网站
  • 前端构建工具：gulp、webpack等

• CDN部署、合理的缓存设置、多尺寸的支持

  • CDN的部署要求可以支持gzip的压缩
  • 针对不同的图片类型设置不同的浏览器缓存时间
  • 针对不同的设备尺寸、采用不同尺寸的图片大小
  • 针对不同的网络情况，图片的大小不同，但也意味着很有可能失真

• 使用base64编码

  base64的编码都是按字符串长度，以每3个8bit的字符为一组，然后针对每组，首先获取每个字符的ASCII编码，然后将ASCII编码转换成8bit的二进制，得到一组3*8=24bit的字节,然后再将这24bit划分为4个6bit的字节，并在每个6bit的字节前面都填两个高位0，得到4个8bit的字节, 然后将这4个8bit的字节转换成10进制，对照Base64编码表，得到对应编码后的字符

  但是将图片转成Base64编码的话，内嵌在css或者HTML中，存在的问题是转换为Base64编码的体积比原图体积还要大，通常我们只将小雨8KB的图片转换为Base64

• 合并精灵图

  可以减少请求数，但是一旦加载失败，所有的图片都会展示失败

• 接入webP图片格式，减少带宽流量、加快图片加载速度

• 渐进增强

  • 渲染一个div，通过对容器设置宽高使其比例和大小与最终图片的大小相同，避免图片加载出来的时候导致页面的重绘
  • 使用img标签来加载一张原图画质10%-20%左右的小图，由于体积小，所以可以较快的加载并显示
  • 小图加载完成之后，用canvas绘制高斯模糊透明覆盖在小图之上，同时请求最终要加载的大图
  • 最终大图加载完毕之后隐藏canvas

  费流量，适合wifi和有线网络，实现比较复杂

• 按需加载

  懒加载实现

• 请求失败占位图，并且有稍候自动重试功能

• http2.0

  多路复用，头部压缩让图片并行加载更快