WebP是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。
在查看性能优化时，浏览器提出建议压缩图片，建议使用webp格式的图片。于是之后就查阅了相关文档资料。记录下自己踩的坑。
用法和使用png/jpg等是相同的。于是就要把图片转化为webp格式。最优的办法当然是自己本地转码。
方法一：使用cwebp命令行工具
使用cwebp的默认压缩设置转换单个文件：
cwebp images/flower.jpg -o images/flower.webp
使用质量级别转换单个文件50：
cwebp -q 50 images/flower.jpg -o images/flower.webp
转换目录中的所有文件：
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
方法二：使用Imagemin包
npm install imagemin npm install imagemin-webp
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
(async () => {
await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminWebp({quality: 50})
]
});
console.log('Images optimized');
})();
注意： 经常用npm包的我们一看就会使用方法二，结果不是报缺失内容就是也成功打印了但是就是没有正确的文件输出。使用方法二也是一定要装webp工具的。
webp工具安装
本人使用的Mac，命令
安装Hombrew
终端运行
brew install webp
我自己的总会报错安装不上
Error: The following directories are not writable by your user:
/usr/local/share/man/man5
/usr/local/share/man/man7
解决办法是运行命令，改变所有权
sudo chown -R $(whoami) /usr/local/share/man/man5 /usr/local/share/man/man7
等装完webp之后方法一和方法二才是可行的
webp兼容性纯在一定的问题目前测试Chrome和火狐上都是没问题的，Safari 14.上还是不支持的
文档借鉴：
