如何使用WebP

webp是google推出的web图片格式。

优点显而易见，它为web图片优化而生，在质量相同的情况下，webp格式的体积要比jgp格式小40%。
缺点是只有chrome上能放心使用webp，其它浏览器支持的非常差，新版本也已经开始支持，这确实是一个利好消息

支持程度略感人，所以如果想webp的话，为不同浏览器做兼容是项必不可少的工作，但如果你的网站中会用到大量的图片资源，多做这一点事绝对是值得的。
让我们看一下淘宝是怎么做兼容的

Safari下图片路径：
https://img.alicdn.com/tfs/TB1oQefPBr0gK0jSZFnXXbRRXXa-520-280.jpg_q90
Chrome下图片路径：
https://img.alicdn.com/tfs/TB1oQefPBr0gK0jSZFnXXbRRXXa-520-280.jpg_q90_.webp
区别在于淘宝团队为支持webp的浏览器增加了_.webp后缀，京东也是一样的做法。

下面来实现以下：
我们可以通过jsnew Image()来判断当前环境下是否支持webp

/*
利用Image加载一个宽高为1px的webp
如果宽高为1则说明正确加载webp，即callback(true)
*/
const canIUseWebP = callback => {
  const _img = new Image()
  // width, hegith = 1px | image/webp
  _img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
  _img.onload = _img.onerror = e => callback(e.target.width === 1 && e.target.height === 1)
}
canIUseWebP(isSupportWebp => {
  // isSupportWebp = true 表示支持
  if (isSupportWebp) {
    // 遍历元素替换url
  }
})

注意： 由于_img加载图片为异步操作，所以我们把isSupportWebp放到回调中，判断逻辑千千万，以上只是给大家抛砖引玉。

再次整理一下实现步骤为：

1. 资源中我们保存两种格式的图片xxx.jpg、xxx.jpg.webp，如果资源存在七牛资源，七牛imageView2会提供格式转换，其它的图片处理服务商也会提供类似的服务
2. 通过js判断浏览器是否支持webp
3. 如果支持webp，遍历所有img元素，将url替换成webpUrl