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