使用JavaScript检测WEBP支持

图像优化是提高前端性能的重要组成部分。传统上，我们使用JPG / JPEG，GIF和PNG图像，但是Google和Chrome小组开发了WEBP格式，该格式可处理文件大小并优化渲染。如果您在Chrome浏览器中访问GIPHY之类的网站，则将获得WEBP，但如果在Firefox中访问同一页面，则将获得GIF。由于GIPHY延迟加载其图像，因此GIPHY可以将WEBP特征检测与JavaScript结合使用。

Googler和Service Worker的先驱Jake Archibald最近发布了一个摘要，显示了如何使用Service Worker来检测WEBP支持：

async function supportsWebp() {
  if (!self.createImageBitmap) return false;
  
  const webpData = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
  }
  
  (async () => {
  if(await supportsWebp()) {
    console.log('does support');
  }
  else {
    console.log('does not support');
  }
})();

获取有效的WEBP数据URI，以确定浏览器是否支持WEBP！他的脚本还使用async / await来处理promise，我将在此博客上稍后介绍。请注意，此代码在服务人员外部运行，因此您可以在自己的项目中的任何位置使用它。

如果您的网站关注图像，请考虑使用WEBP格式化图像；Chrome的市场份额很大，因此绝对值得。如果您喜欢这样的小技巧，请务必关注我哦！