是嵌入背景图像数据到CSS作为Base64好或坏的做法?

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

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

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

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

考虑到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.1 kb GZIP编码服务器端结果大小发送到客户端(YSLOW 元件测试):59.3Kb 保存发送到客户端浏览器的数据:74.3Kb

很好，但我想对于较小的图像来说，它就不那么有用了。

更新:Bryan McQuade，谷歌的软件工程师，致力于PageSpeed，在2013年ChromeDevSummit上表示，CSS中的data:uris被认为是一种渲染阻塞反模式，用于交付关键/最小的CSS，在他的演讲#perfmatters: Instant mobile web apps中。请访问http://developer.chrome.com/devsummit/sessions，并记住这是实际的幻灯片

当前回答

我尝试创建一个在线概念的CSS/HTML分析工具:

http://www.motobit.com/util/base64/css-images-to-base64.asp

它可以:

下载并解析HTML/CSS文件，提取href/src/url元素检测URL上的压缩(gzip)和大小数据比较原始数据大小，base64数据大小和gzip的base64数据大小将URL(图像，字体，css，…)转换为base64数据URI方案。统计数据uri可以保留的请求数

欢迎提出意见和建议。

安东尼

2013-06-24 20:17:41

其他回答

这个答案已经过时，不应该再用了。

1) 2017年移动设备的平均延迟要快得多。https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2) HTTP2多路复用 https://http2.github.io/faq/#why-is-http2-multiplexed