将Base64背景图像数据embedded到CSS中是好还是坏的做法？

我正在查看一个greasemonkey userscript的来源，并注意到他们的CSS中的以下内容：

.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} 

我可以理解的是，一个greasemonkey脚本可能想要在源代码中捆绑任何东西，而不是将其托pipe在服务器上，这足够明显。 但是由于我以前没有见过这种技术，所以我考虑过它的使用，这似乎很有吸引力，原因有很多：

1. 它将减less页面加载时的HTTP请求量，从而提高性能
2. 如果没有CDN，那么它将减less通过与图像一起发送的cookie产生的通信量
3. CSS文件可以被caching
4. CSS文件可以被GZIPPED

考虑到IE6（例如）有背景图像caching的问题，这似乎不是最糟糕的想法…

那么，这是一个好的或不好的做法，为什么不使用它，你会用什么工具来base64编码图像？

更新 – testing结果

• testing与图像： http : //fragged.org/dev/map-shot.jpg – 133.6Kb

• testingurl： http ： //fragged.org/dev/base64.html

• 专用CSS文件： http : //fragged.org/dev/base64.css – 178.1Kb

• GZIP编码服务器端

• 产生的大小发送到客户端（YSLOW组件testing）： 59.3Kb

• 保存发送给客户端浏览器的数据： 74.3Kb

不错，但是对于较小的图像来说，它会略微有用，我猜。

更新：在Google工作的Google工程师Bryan McQuade在ChromeDevSummit 2013上表示：数据：uris在CSS中被认为是在他的演讲中提供关键/最小CSS的渲染阻止反模式#perfmatters: Instant mobile web apps 。 请参阅http://developer.chrome.com/devsum​​mit/sessions，并牢记 – 实际的幻灯片

Answer 1

当您希望将图像和样式信息分开caching时，这不是一个好主意。 此外，如果你编码一个大的图像或大量的图像到您的CSS文件，它将使浏览器下载离开您的网站的文件没有任何风格的信息，直到下载完成。 对于小图像，如果您经常更改，那么这是一个很好的解决scheme。

至于生成base64编码：

• http://b64.io/
• http://www.motobit.com/util/base64-decoder-encoder.asp （上传）
• http://www.greywyvern.com/code/php/binary2base64 （从下面的小教程链接）

Answer 2

这个答案是过时的，不应该使用。

1）2017年移动平均延迟要快得多。https://opensignal.com/reports/2016/02/usa/state-of-the-mobile-network

2）HTTP2复用https://http2.github.io/faq/#why-is-http2-multiplexed

移动网站一定要考虑“数据URI”。 蜂窝networking上的HTTP访问每个请求/响应都有较高的延迟。 所以有一些使用情况下，将图片作为数据干扰到CSS或HTML模板可能对移动Web应用程序有益。 你应该根据具体情况来衡量使用情况 – 我并不是主张应该在移动networking应用程序的任何地方使用数据URI。

请注意，移动浏览器对可caching文件的总大小有限制。 iOS 3.2的限制相当低（每个文件25K），但是对于较新版本的Mobile Safari，限制越来越大（100K）。 因此，在包含数据URI时，请务必留意总文件大小。

http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/

Answer 3

如果仅仅引用该图像一次，我不会看到将其embedded到CSS文件中的问题。 但是，一旦你使用了多个图片或者需要在CSS中多次引用它，你可能会考虑使用一个图片地图，然后你可以从你的单张图片中剪下 （参见CSS Sprites ）。

Answer 4

我build议的一个事情是有两个独立的样式表：一个用你的常规样式定义，另一个用base64编码包含你的图像。

当然，您必须在图像样式表之前包含基本样式表。

通过这种方式，您可以确保您将常规样式表下载并尽快应用到文档中，同时您还可以利用简化的http请求和其他数据优势为您带来好处。

Answer 5

在GZip之后，Base64增加了大约10％的图像尺寸，但是在移动方面则超过了这个优势。 由于响应式网页devise的整体趋势，强烈build议。

W3C也build议这种方法适用于移动设备，如果您在rails中使用资产pipe道，这是压缩您的css时的默认function

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

Answer 6

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

假设图像是用于UI的目的，它是表示层样式，如上所述，如果你在做移动用户界面，将所有样式保存在单个文件中，这样可以caching一次。

Answer 7

在我的情况下，它允许我应用CSS样式表，而不用担心复制相关图像，因为它们已经embedded在里面了。

Answer 8

我试图创build一个CSS / HTML分析器工具的在线概念：

http://www.motobit.com/util/base64/css-images-to-base64.asp

它可以：

• 下载并parsingHTML / CSS文件，提取href / src / url元素
• 检测URL上的压缩（gzip）和大小数据
• 比较原始数据大小，base64数据大小和gzip base64数据大小
• 将URL（图像，字体，css，…）转换为base64数据URIscheme。
• 统计数据URI可以保留的请求数量

欢迎提出意见/build议。

安东尼

Answer 9

你可以编码在PHP中:)

 <img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>"> Or display in our dynamic CSS.php file: background: url("data:image/gif;base64,<?php echo base64_encode(file_get_contents("feed-icon.gif")); ?>"); 1 That's sort of a “quick-n-dirty” technique but it works. Here is another encoding method using fopen() instead of file_get_contents(): <?php // convert image to dataURL $img_source = "feed-icon.gif"; // image path/name $img_binary = fread(fopen($img_source, "r"), filesize($img_source)); $img_string = base64_encode($img_binary); ?> 

资源

Answer 10

为Sublime Text 2的用户带来一点点，有一个插件可以让我们加载ST中的图像。

叫Image2base64： https ： //github.com/tm-minty/sublime-text-2-image2base64

PS：永远不要保存这个由插件生成的文件，因为它会覆盖文件并破坏。

Answer 11

感谢这里的信息。 我发现这个embedded有用，特别是对于移动，尤其是embedded式图像的css文件被caching。

为了使生活更轻松，由于我的文件编辑器本身不处理这个问题，所以我为笔记本电脑/桌面编辑工作做了一些简单的脚本，在这里分享，以防其他人使用。 我坚持使用PHP，因为它直接处理这些东西，非常好。

在Windows 8.1下说—

 C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo 

…作为pipe理员，您可以在path中build立batch file的快捷方式。 该batch file将调用一个php（cli）脚本。

然后，您可以右键单击文件资源pipe理器中的图像，然后发送到batch file。

Ok Admiinstartor请求，并等待黑色命令shell窗口closures。

然后，只需将剪贴板中的结果粘贴到文本编辑器中即可

 <img src="|"> 

要么

  `background-image : url("|")` 

以下应该适用于其他操作系统。

batch file…

 rem @echo 0ff rem Puts 64 encoded version of a file on clipboard php c:\utils\php\make64Encode.php %1 

并在您的path中的php.exe，调用一个PHP（CLI）脚本…

 <?php function putClipboard($text){ // Windows 8.1 workaround ... file_put_contents("output.txt", $text); exec(" clip < output.txt"); } // somewhat based on http://perishablepress.com/php-encode-decode-data-urls/ // convert image to dataURL $img_source = $argv[1]; // image path/name $img_binary = fread(fopen($img_source, "r"), filesize($img_source)); $img_string = base64_encode($img_binary); $finfo = finfo_open(FILEINFO_MIME_TYPE); $dataType = finfo_file($finfo, $img_source); $build = "data:" . $dataType . ";base64," . $img_string; putClipboard(trim($build)); ?> 

Answer 12

据我研究，

使用：1.当你使用一个SVG精灵。 2.当您的图像尺寸较小（最大200mb）时。

不要使用：1.当你是更大的图像。 2.图标作为svg的。 因为压缩之后它们已经很好并且被压缩了。