webp 支持

技术2022-07-11 125

webp 支持

Image optimization is a huge part of improving front-end performance. We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering. If you go to a site like GIPHY in Chrome you'll be served a WEBP, but if you go to the same page in Firefox you'll be served a GIF. Since GIPHY lazy loads its images, GIPHY has the opportunity to use WEBP feature detection with JavaScript.

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

Googler and Service Worker pioneer Jake Archibald recently tweeted a snippet showing how you can use a service worker to detect WEBP support:

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'); } })();

Jake fetches a valid WEBP data URI to determine if the browser supports WEBP -- genius! His script also uses async / await to handle promises which I will be covering soon on this blog. Note that this code works outside a service worker, so you can use it anywhere within your own projects.

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

If your site is heavy on imagery, consider formatting your images with WEBP; Chrome's market share is so large that it will definitely be worth it. If you like small tips like this, be sure to follow Jake on Twitter!

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

翻译自: https://davidwalsh.name/detect-webp

webp 支持