为什么在CSS中使用base64编码图像？

Question

可能是重复问题:
将背景图片数据作为base64嵌入css中，好还是坏的做法

我刚刚在我的Google Chrome首页上浏览源代码时注意到图像在CSS中是以base64编码的。这有什么优点？我倾向于认为这只是为了减少http请求，但由于它是本地应用程序，所以无论如何都没关系，对吗？它可以直接从本地加载图像吗？

menu > [checked]:before {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAARklEQVQYlWNgwA+MgViQkIJ3QKzEAFVpjEPBf5giJaiAMRYF72DWKSEJlKMpgNsgiCTxH5sCbG7AqgBZ4V2sCv7//08QAwAUfjKKBs+BFgAAAABJRU5ErkJggg==");
  display: inline-block;
  height: 9px;
  margin: 0 5px;
  vertical-align: 50%;
  width: 9px;
}

- Ben

Answer 1

这是一个数据URI方案，据我所知，唯一的优点就是可以减少HTTP请求（因为所有东西都作为一个整体加载，而不是获取图像）。

为什么它出现在Google Chrome的首页上...嗯，谷歌喜欢炫耀并在所有事情上使用最新的技术。

- Thomas Jones

---

他们为什么仍然在所有地方使用表格布局？Google只想要快速。 - albert

@albert，这不仅仅是快。menu > [checked]:before 不是一个快速选择器。此外，对于本地应用程序来说，这些都是毫秒级别的时间，不会有影响。Google Chrome团队充满了喜欢尝试和玩耍的Web开发人员。 :) 也许这就是原因。 - Om Shankar

Answer 2

我认为Kirean是正确的，但要详细说明具体的问题标题...

二进制图像数据以Data Uri的形式进行base64编码，因此可以放入文本文件中。如果二进制数据没有进行base64编码，它将看起来像：

?PNG

IHDR           ??FIDAT?c`???X???w@??Ui?C??"%??1?`?)!    ??)?? ?$??ln??Y?]?
???O~2?ρIEND?B`?

它可能包含像"这样的字符，CSS解析器可能会因此而出错。

当它被Base64编码时，它只会包含像下面这样的字符：

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+,=

不知道他们为什么选择那种方式，也许是因为他们不想管理额外的图像文件。

- Joe Flynn