webp 支持_使用JavaScript检测WEBP支持

刺骨的言语ヽ痛彻心扉 2023-02-22 01:19 11阅读 0赞

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最近发布][Jake Archibald recently tweeted]了一个摘要，显示了如何使用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][follow Jake on Twitter] ！

> 翻译自: [https://davidwalsh.name/detect-webp][https_davidwalsh.name_detect-webp]

webp 支持

[Jake Archibald recently tweeted]: https://twitter.com/jaffathecake/status/893109104205496320
[follow Jake on Twitter]: https://twitter.com/jaffathecake
[https_davidwalsh.name_detect-webp]: https://davidwalsh.name/detect-webp