关于网站优化，除了减少请求数意外，缩减静态资源体积也很重要，常见的比如压缩js，css文件，还有就是压缩图片体积，使其更快的下载并节省流量，WebP技术的出现，给图片压缩带来了更进一步的优化体验，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
有个网站里面有对比，可以看看转换前后的差别：点击查看WebP
我公司是做电商的，产品图片就特别的多，除了已经用到的图片懒加载等优化外，还需要对图片本身瘦身，webp流行起来后，今年也做了web支持,写了个webp检测功能，主要方法是：
一张图准备两套，一个是原图，一个是转换后的同名webp图片，dom元素加载完后遍历img把原图替换成webp格式的名字，然后加载写入，核心方法：
像这样，准备两套图，然后检测的时候有webp格式的则替换，没有的话用原图
.replace(/(.jpg|.png|.JPG|.PNG)$/,'$1'+'webp'))
替换成功后，就得到了新的webp格式的图片，接着写入就行啦。
完整代码：Demo