是嵌入背景图像数据到CSS作为Base64好或坏的做法?

我正在查看一个greasemonkey用户脚本的源代码，并注意到他们的css中有以下内容:

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

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

  1. 它将减少页面加载中的HTTP请求数量，从而提高性能
  2. 如果没有CDN，那么它将减少通过与图像一起发送的cookie产生的流量
  3. CSS文件可以被缓存
  4. CSS文件可以被gzip压缩

考虑到IE6(例如)在缓存背景图像方面存在问题，这似乎不是最糟糕的主意……

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

更新-测试结果

很好，但我想对于较小的图像来说，它就不那么有用了。

更新:Bryan McQuade，谷歌的软件工程师，致力于PageSpeed，在2013年ChromeDevSummit上表示，CSS中的data:uris被认为是一种渲染阻塞反模式，用于在他的演讲#perfmatters: Instant mobile web apps中交付关键/最小的CSS。看到http://developer.chrome.com/devsummit/sessions并记住它- 实际的幻灯片

178098 次浏览
小开
最佳答案

当您希望图像和样式信息分别缓存时，这不是一个好主意。此外，如果你在你的css文件中编码了一个较大的图像或大量的图像，它将花费浏览器更长的时间来下载文件离开你的网站，而没有任何样式信息，直到下载完成。对于小图像，你不打算经常改变，如果它是一个很好的解决方案。

至于生成base64编码:

小开

如果只引用该图像一次，我认为将其嵌入到CSS文件中没有问题。但是，一旦你使用多个图像或需要在CSS中多次引用它，你可以考虑使用单个图像映射来代替你可以从(参见CSS精灵)中裁剪单个图像。

小开

在我的例子中，它允许我应用CSS样式表，而不用担心复制相关的图像，因为它们已经嵌入其中。

小开

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

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 < / em > < / p >

移动站点绝对应该考虑使用“数据uri”。蜂窝网络上的HTTP访问每个请求/响应都有更高的延迟。因此，在某些情况下，将图像作为数据放入CSS或HTML模板中对移动web应用程序是有益的。你应该根据具体情况来衡量使用情况——我并不是提倡在移动web应用中处处使用数据uri。

请注意，移动浏览器对可以缓存的文件的总大小有限制。iOS 3.2的限制相当低(每个文件25K)，但新版本的Mobile Safari的限制越来越大(100K)。因此，在包含数据uri时，一定要注意文件的总大小。

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

小开
我建议的一件事是有两个独立的样式表: 一个包含常规样式定义，另一个包含base64编码的图像

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

这样可以确保您的常规样式表被尽快下载并应用到文档中，同时还可以从减少http请求和data-uri提供的其他好处中获益。

小开

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

假设图像用于UI目的，它是表示层样式，如前所述，如果你在做移动UI，将所有样式保存在一个文件中绝对是一个好主意，这样它就可以缓存一次。

小开

Base64在gzip后增加了大约10%的图像大小，但当涉及到移动时，这超过了它的好处。由于响应式网页设计是一个整体趋势，所以强烈推荐。

W3C也推荐这种方法用于移动设备，如果你在rails中使用资产管道，这是压缩css时的默认特性

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

小开

我尝试创建一个在线概念的CSS/HTML分析工具:

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

它可以:

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

欢迎提出意见和建议。

安东尼

小开

为Sublime Text 2的用户带来一点，有一个插件，提供了我们在ST中加载图像的base64代码。

调用Image2base64: https://github.com/tm-minty/sublime-text-2-image2base64

PS:永远不要保存插件生成的这个文件，因为它会覆盖文件并销毁。

小开

你可以用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);
?>

Source .

小开
谢谢你提供的信息。 我发现这个嵌入很有用，特别是对于移动，特别是嵌入图像的css文件被缓存

为了让生活更简单，因为我的文件编辑器不能原生处理这个问题，我为笔记本电脑/桌面编辑工作制作了几个简单的脚本，在这里分享，以防它们对其他人有用。我一直坚持使用php，因为它直接处理这些事情，非常好。

在Windows 8.1下使用——

C:\Users\`your user name`\AppData\Roaming\Microsoft\Windows\SendTo
< p >…，作为管理员，您可以在您的路径中建立批处理文件的快捷方式。 该批处理文件将调用一个php (cli)脚本。< / p >

然后，您可以在文件资源管理器中右键单击图像，并发送到批处理文件。

Ok管理员请求，并等待黑色命令shell窗口关闭。

然后只需简单地从剪贴板粘贴到你的文本编辑器的结果…

<img src="|">

或

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

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

批处理文件…

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

在你的路径中有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));


?>
小开

据我调查，

< p >使用: 1. 当你使用svg精灵。 2. 当您的图像是一个较小的大小(最大200mb)

不要用: 1. 当你是更大的图像。 2. 作为svg的图标。因为他们已经很好，压缩后gzip


提交答案