WebP图片优化

　　关于网站优化，除了减小请求数意外，缩减静态资源体积也很重要，常见的好比压缩js，css文件，还有就是压缩图片体积，使其更快的下载并节省流量，WebP技术的出现，给图片压缩带来了更进一步的优化体验，同时具有了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都至关优秀、稳定和统一。

　　有个网站里面有对比，能够看看转换先后的差异：点击查看WebP

　　我公司是作电商的，产品图片就特别的多，除了已经用到的图片懒加载等优化外，还须要对图片自己瘦身，webp流行起来后，今年也作了web支持,写了个webp检测功能，主要方法是：

　　一张图准备两套，一个是原图，一个是转换后的同名webp图片，dom元素加载完后遍历img把原图替换成webp格式的名字，而后加载写入，核心方法：

　　像这样，准备两套图，而后检测的时候有webp格式的则替换，没有的话用原图

.replace(/(\.jpg|\.png|\.JPG|\.PNG)$/,'$1'+'webp'))

　　替换成功后，就获得了新的webp格式的图片，接着写入就行啦。

　　完整代码：Demo