css - 将背景图像数据作为 Base64 嵌入到 CSS 中是好事还是坏事？

Question

我正在查看 greasemonkey 用户脚本的源代码，并在他们的 CSS 中注意到以下内容:

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

我能理解 greasemonkey 脚本想要在源代码中捆绑任何它能捆绑的东西，而不是将它托管在服务器上，这很明显。但由于我以前没有见过这种技术，所以我考虑了它的用途，它看起来很有吸引力，原因有很多:

1. 它将减少页面加载时的 HTTP 请求量，从而提高性能
2. 如果没有 CDN，那么它将减少通过与图像一起发送的 cookie 产生的流量
3. 可以缓存 CSS 文件
4. CSS 文件可以压缩

考虑到 IE6(例如)在背景图像缓存方面存在问题，这似乎不是最糟糕的想法...

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

更新 - 测试结果

• 测试图像:http://fragged.org/dev/map-shot.jpg - 133.6Kb

• 测试网址:http://fragged.org/dev/base64.html

• 专用 CSS 文件: http://fragged.org/dev/base64.css - 178.1Kb

• GZIP编码服务器端

• 发送给客户端的结果大小(YSLOW 组件测试):59.3Kb

• 保存发送到客户端浏览器的数据:74.3Kb

不错，但我想它对于较小的图像来说用处会稍微小一些。

UPDATE: Bryan McQuade, a software engineer at Google, working on PageSpeed, expressed at ChromeDevSummit 2013 that data:uris in CSS is considered a render-blocking anti-pattern for delivering critical/minimal CSS during his talk #perfmatters: Instant mobile web apps. See http://developer.chrome.com/devsummit/sessions and keep that in mind - actual slide

Answer 1

当您希望单独缓存图像和样式信息时，这不是一个好主意。此外，如果您将大图像或大量图像编码到您的 css 文件中，那么浏览器将花费更长的时间来下载文件，而在下载完成之前，您的网站将没有任何样式信息。对于您不打算经常更改的小图像，这是一个很好的解决方案。

就生成 base64 编码而言:

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp (上传)
• http://www.greywyvern.com/code/php/binary2base64 (来自下面的小教程的链接)