使用JavaScript检测WEBP支持

发布于:2021-02-16 00:00:47

0

182

0

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的市场份额很大,因此绝对值得。如果您喜欢这样的小技巧,请务必关注我哦!