是嵌入背景图像数据到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，并记住这是实际的幻灯片

当前回答

Base64在gzip后增加了大约10%的图像大小，但当涉及到移动时，这超过了它的好处。由于响应式网页设计是一个整体趋势，所以强烈推荐。

W3C也推荐这种方法用于移动设备，如果你在rails中使用资产管道，这是压缩css时的默认特性

http://www.w3.org/TR/mwabp/#bp-conserve-css-images

2012-01-16 08:33:44

其他回答

如果只引用该图像一次，我认为将其嵌入到CSS文件中没有问题。但一旦你使用多个图像或需要在CSS中多次引用它，你可以考虑使用单个图像映射，而不是你可以从中裁剪单个图像(参见CSS精灵)。

2009-07-14 08:44:16

我不同意为非编辑图像创建单独的CSS文件的建议。

假设图像用于UI目的，它是表示层样式，如前所述，如果你在做移动UI，将所有样式保存在一个文件中绝对是一个好主意，这样它就可以缓存一次。

2011-08-03 22:31:37

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