webP介绍

WebP是一种现代图像格式，可为Web上的图像提供出色的无损和有损压缩。使用WebP，网站管理员和Web开发人员可以创建更小，更丰富的图像，使网络更快。

与PNG相比，WebP无损图像的尺寸缩小了26％。在等效的SSIM质量指数下，WebP有损图像比同类JPEG图像 小25-34％。

无损WebP 支持透明度（也称为alpha通道），仅需22％的额外字节。对于有损RGB压缩可接受的情况，有损WebP也支持透明度，与PNG相比，通常提供3倍的文件大小。

webP对比jpg

使用七牛imageView2转换格式

通过七牛imageView2转换的图:http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg?imageView2/0/format/webp

不通过imageView2的图:
http://img2.soyoung.com/origin/20180823/0/278cf95c55a3586e6421997e89df23c0.jpg

webP缺点

1. 兼容性要做处理..
   https://caniuse.com/#search=webP
   

   image.png

2. 格式要特殊处理(我司有七牛..imageView2)
   https://blog.qiniu.com/archives/5793

3. 加载展示会比之前慢，不过可以基本忽略不计

4. 展示不如JPG好看(鲜艳,清晰等等)，不过放到手机上权衡文件大小来说可以接受

判断浏览器是否支持webP

其实很简单，在加载前通过 JS判断下是否支持 webP即可。

async function supportsWebp() {
  if (!self.createImageBitmap) return false;
  
  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
}

(async () => {
  if(await supportsWebp()) {
    console.log('does support');
  }
  else {
    console.log('does not support');
  }
})();

相关材料

google对于webP的介绍 https://developers.google.com/speed/webp
七牛对于webP的介绍 https://blog.qiniu.com/archives/5793