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 !
webp 支持