作为Base64，将背景图像数据嵌入CSS是好做法还是坏做法？

  • Z时代
  • 2024-01-10
  • 分类：问答

我一直在查看油脂猴子用户脚本的来源，并在他们的CSS中注意到以下内容：

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

我可以理解，滑脂脚本希望将其可以捆绑的所有内容捆绑在源代码中，而不是将其托管在服务器上，这很明显。但是由于我以前没有看过这种技术，因此我考虑了它的使用，并且由于许多原因，它似乎很有吸引力：

  1. 它将减少页面加载时的HTTP请求数量，从而提高性能

  2. 如果没有CDN，则它将减少通过Cookie与图像一起发送而产生的流量

  3. 可以缓存CSS文件

  4. CSS文件可以GZIPPED

考虑到IE6（例如）在背景图片缓存方面存在问题，这似乎不是最糟糕的主意…

那么，这是好事还是坏事，为什么您不使用它，以及使用哪种工具对图像进行base64编码？

  • GZIP编码服务器端

  • 发送给客户端的结果大小（YSLOW组件测试）：

  • 发送到客户端浏览器的数据保存：

不错，但是我猜它对较小的图像用处不大。

更新：Google的软件工程师Bryan McQuade在PageDevSummit 2013上表示，PageSpeed在ChromeDevSummit

2013上表示，CSS中的data：uris被认为是在演讲期间提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant

mobile webapps。

回答：

如果要分别缓存图像和样式信息，这不是一个好主意。同样，如果您在css文件中编码大图像或大量图像，则浏览器将花费更长的时间下载文件，而无需任何样式信息即可离开网站，直到下载完成。对于小型图像，您不打算经常更改，这是一个很好的解决方案。

以上是 作为Base64，将背景图像数据嵌入CSS是好做法还是坏做法？ 的全部内容， 来源链接： utcz.com/qa/404010.html

回到顶部