一分钟速看webP，把握住网页提速小细节！亲测可用！

Posted 2021-06-29 雨果虾滑猫

什么是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/