什么是webP
2010年，Google公司推出的图片格式，目的是减少文件大小，提高在图片在网上的传播效率，同时，因为图片体积变小，对应的网络资源占用也会变小，最终达到降低成本的目的。
怎么得到webP的图片
手动转换
如果是单个的图片资源，想要变成webp的格式，使用在线转换工具手动操作即可。
CDN供应商
目前大部分CSDN供应商，都会提供在线转码服务，可以将自己上传的图片转码成webP的图片格式。
IE浏览器不支持显示webP
很遗憾，IE浏览器到现在也没有支持webP格式的图片，如果页面上有webP的图片，页面控制台会报错
dom7009无法解码URL处的图像
js插件 webp-hero
webp-hero可以让不支持展示webP图片的IE浏览器显示图片，安装方式很简单。
项目地址是 https://github.com/mrgaogang/webp-hero
<script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.0-dev.27/dist-cjs/webp-hero.bundle.js"></script>
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>但是他也是存在限制的，这些限制可能让你没办法使用这个插件。
- 不支持css背景图像
- 不支持元素
- 不支持web workers
- 当前仅检测文件名以**.webp扩展名结尾的webp图像**
- 没有wasm（因为旧的浏览器）
判断浏览器不支持展示其他图片
下面直接给出判断当前浏览器是否支持webP的代码，有需要的朋友可以直接使用！
var isSupportWebp = function () {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch(err) {
return false;
}
}在页面加载的生命周期做判断，如果不支持webP，就展示png或者jpg的图片。
webP格式面临的不足
尽管webP从推出到现在已经有十年以上了，但是，针对webP相关的生态实际上并不完善，比如
- 个别浏览器的兼容性
- 图片编辑软件的适配性
- win下的图片查看器的兼容性
- 非开发人员对webP图片格式的认知
webP未来的展望
最近微软出的新闻，说是要彻底放弃IE浏览器，这对于向webP这种最近发展起来的为了web而生的图片格式是利好的。
webP格式会逐渐放下之前行业的历史包袱，进一步提高覆盖率，为网络服务降低成本进一步发力。
授人以渔，能打开就行
- https://chromium.googlesource.com/webm/libwebp/
