Question

可能重复：
embedding background image data into css as base64, good or bad practice

我刚刚浏览了我的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;
}

Answer 1

它是Data Uri Scheme，据我所知，唯一的好处是保存HTTP请求（因为所有内容都是一个加载，而不是获取图像）。

为什么它在google chrome登陆页面上......好吧，google确实想炫耀并在所有内容上使用最新的技术。

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+,=

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

为什么在CSS中使用base64Encode图像？

2 个答案: