我正在查看油脂猴用户脚本的来源，并在他们的 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 文件可以 GZIPPED

考虑到 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

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

更新： Bryan McQuade 是 Google 的一名软件工程师，负责 PageSpeed，他在 2013 年的 ChromeDevSummit
上表示，CSS 中的 data:uris 在他的演讲中被认为是一种渲染阻塞反模式，用于提供关键/最小的 CSS #perfmatters: Instant mobile web apps。请参阅http://developer.chrome.com/devsum​​mit
/sessions并记住这一点
-实际幻灯片