7

可能重复：
将背景图像数据作为 base64 嵌入到 css 中，好的或坏的做法

我只是在我的谷歌浏览器主页上浏览源代码，并注意到图像是在 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;
}
4

2 回答 2

2

它是一个数据 Uri 方案，据我所知，唯一的优点是保存 HTTP 请求（因为所有内容都作为一个加载，而不是获取图像）。

为什么它出现在 google chrome 登录页面上……嗯，谷歌确实喜欢炫耀并在所有东西上使用最新技术。

于 2012-05-03T02:52:02.117 回答
1

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

二进制图像数据在 Data Uri 中进行了 base64 编码，因此可以放入文本文件中。如果二进制数据不是 base64 编码的，它看起来像：

?PNG

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

它可能包含类似"的字符，并且 css 解析器可能会阻塞它。

当它是 base64 编码时，它只会包含如下字符：

0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ+,=

不知道他们为什么选择这样做，也许他们不想管理额外的图像文件。

于 2012-05-04T16:22:02.320 回答