Css 什么时候考虑BASE64（数据：URI）图像？

哪些因素会触发将图像切换到嵌入CSS的Base64的想法

似乎有很多通用的赞成/反对类型的东西在那里。维基百科似乎有一个不错的概述：

据我所知，让base64成为一个简单决策的一个因素是，如果您的站点必须访问大量单独的小图像，并且拥有一个大文件，则比为每个图像点击服务器50次效率更高

但是……同时，由于Sprite和我很少在一个页面上需要50个单独的图像这一事实，Base64并没有为一般网站提供太多的功能

是否有我应该寻找的关键因素（赞成/反对）

（这可能更适合作为社区wiki条目，而不是问题）

更新：

也许用一种更简洁的方式来表达这个问题：

鉴于这两种选择：

1） 所有转换为base64并嵌入外部css文件的图像

2） 图像被收集到一些sprite图像中，在外部css文件中引用

---

是否存在明显的情况，其中一种情况优于另一种情况，或者这只是一个具体情况，两者都做，并测试这类事情？

这里有两个不同的问题：

1） 基地64。嗯，这里没有优势。这些文件比二进制文件更胖，并且不太可能被缓存。资源应该位于外部文件中，以便可以缓存它们

2） 精灵。CSS精灵是一种使用单个图像而不是多个图像的技术。部分图像通过CSS“显示”。由于网络请求的数量大大减少，因此这些方法更加有效。这是值得的

是否有我应该寻找的关键因素（赞成/反对）

最大的缺点是IE6/7中缺少支持，而IE8中的支持不完整（

data:

uri不能大于32KB）

---

在这种情况下，使用CSS精灵是非常优越的技术。

当您可以使用CSS精灵时，这肯定会更好

---

我更喜欢base64数据URI的一种特殊情况是，当我们有一个小的图像文件，它将被用作带有repeat-x或repeat-y的背景时。由于repeat不能很好地使用css精灵，因此需要使用单个图像作为源。在这种情况下，我发现使用base64版本是一个更好的选择，它可以为您节省对web服务器的请求。

这实际上不是关于base64图像，而是关于

数据：

URI方案（通常需要base64编码，但与之不同）。我会相应地编辑这个问题，目前它有点误导。佩卡：我很乐意编辑它。你能帮我理解它应该如何改写吗？标题是否真的应该指数据：而不是base64？我可能需要改写这个问题。我想这归结起来就是比较一个CSS文件中的两个…Base64编码图像与利用Sprite。在各种情况下，有没有强有力的理由选择一个而不是另一个呢？啊，我明白了。我想你需要对它进行基准测试。取决于图像的大小和数量+解码时间与仅使用图像的时间。？？？但是css也可以/应该被缓存。。。所以如果您对精灵的额外请求（缓存或不缓存）与嵌入的数据uri图像。。。在缓存的css中。。。然后完全取决于上下文，但不明显是精灵赢了。取决于contextSprite技术的详细信息，限制您在布局中对齐和缩放图像的方式。在这里赢取base64：可以轻松使用背景尺寸道具，在任意轴上使用左/中/右对齐。@Tadas Sasnauskas:哦，我明白了。。。这是个好问题。感谢你指出这一点。在我职业生涯的历史上，这是一个非常罕见的案例……IE实际上甚至没有出现在桌面上（我们是为一款移动设备而做的——尽管我认为他们迟早会想要支持win7手机）虽然在大多数情况下，这当然是关键因素。@DA:注意，iPhone不支持大屏幕的sprite表单。@DA取决于你的职业（我很嫉妒），2013年我还要处理很多IE6！这是因为大公司客户用定制的应用程序和死气沉沉的it部门（或外包it部门）紧紧盯着it。不好玩。你们真幸运，但在大型企业内部网世界里，还是2001年；(