图片转换成WebP格式

今天用chrome打开微信公众号阅读的时候，突然发现里面的图片都是WebP格式的，用IE打开来图片就都变成了PNG格式，微信应该用了渐进式增强来让图片兼容不同的浏览器，进行了资源优化。
一般渐进式优化我们可以这么来：

<picture>
    <source srcset="demo.webp" type="image/webp">
    <source srcset="demo.jpg" type="image/jpg">
    <img src="demo.jpg" alt="">
</picture>

那么问题来了，我们要如何获取WebP的图片格式呢？
我百度了很多方法，大多都不太靠谱，有一个免费的网站https://cloudconvert.com/可以转换成功，然而速度太感人，果断放弃。
这时候前端er就应该想到用npm包去解决这个问题啦~
imagemin-webp 就提供了很好的解决方案，下面贴代码：

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*.{jpg,png}'], 'build/images', {
  use: [imageminWebp({ quality: 50 })]
}).then(() => {
  console.log('Images optimized');
});

安装 imagemin-webp 需要先安装imagemin哦~imagemin有很多衍生插件用于处理图片，但我觉得与其自己手残把图片压缩得太失真还不如用tinypng科学的压缩呢。
另外我们注意到压缩率是50，默认值是75，我们可以把原图跟不同压缩率的转换图进行对比：

压缩率	转换后尺寸/转换前尺寸
75	0.3+
50	0.2+

我们可以看到图片真的变小了好多呢~
至于转换后图片的清晰度我们也可以来看下:

comparison.jpg

这是图片放大后局部的截图，我们可以看到部分细节进行了删减，原图其实看不到什么差异的，所以北鼻们可以用起来了，安全可靠不要钱哈~