将背景图像数据嵌入到CSS中作为Base64的好坏做法？

456

我一直在寻找一个Greasemonkey的userscript的来源，发现在他们的CSS如下：将背景图像数据嵌入到CSS中作为Base64的好坏做法？

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

我可以理解，Greasemonkey的脚本将要捆绑源内任何它可以相对于在承载它一个服务器，这很明显。但因为我还没有看到这种技术以前，我认为它的使用，似乎吸引了许多的原因：

这将减少对页面加载的HTTP请求的数量，从而提高性能
如果没有CDN，那么它会降低通过cookie产生的业务量，图像
CSS文件可以被缓存
CSS文件可以用gzip压缩

考虑到被一起发送的IE6（FO r实例）有背景图像缓存的问题，这似乎是不是最坏的想法...

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

更新 - 测试的结果与图像

测试：http://fragged.org/dev/map-shot.jpg - 133.6Kb
测试网址：http://fragged.org/dev/base64.html
专用CSS文件： http://fragged.org/dev/base64.css - 178.1Kb
GZIP编码服务器侧
发送到客户机得到的尺寸（YSlow的组件测试）：59.3Kb
发送到的客户端浏览器的数据保存：74.3 Kb

不错，但会略少我猜，对较小的图像有用。

UPDATE：布莱恩·麦奎德，在谷歌的软件工程师，上的PageSpeed工作，表达了ChromeDevSummit 2013的数据：在CSS的URI被认为是阻止呈现反模式为他的演讲#perfmatters: Instant mobile web apps期间提供关键/最少的CSS 。请参阅http://developer.chrome.com/devsummit/sessions并记住这一点 - actual slide

来源

2009-07-14 Dimitar Christoff

做一些测试运行？有趣的是，压缩能够弥补你base64对它进行编码的事实。 – Dykam 2009-07-14 08:39:24

发布了测试的结果，也可以在我的博客http://fragged.org/compressing-jpeg-images-via-base64-data-and-gzip-deflating_1264.html – 2011-02-18 15:35:39

好问题。只是想补充说，它不适用于IE7及以下版本。但是有一些解决方法。这是一个很好的文章http://jonraasch.com/blog/css-data-uris-in-all-browsers – MartinF 2011-06-29 14:46:32

155

当您希望将图像和样式信息分开缓存时，这不是一个好主意。此外，如果您将大图或大量图像编码到您的css文件中，则需要更长的时间才能下载离开您的网站的文件，而无需任何样式信息，直到下载完成。对于小图像，如果您经常更改这些图像，那么这是一个很好的解决方案。

至于产生的base64编码：

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

来源

2009-07-14 08:36:12

如果您引用图片只是有一次，我没有看到将它嵌入到CSS文件中的问题。但是，一旦您使用多个图像或需要多次在CSS中引用它，您可能会考虑使用单个图像地图，而不是您可以从中裁剪单个图像（请参阅CSS Sprites）。

来源

2009-07-14 08:44:16 Gumbo

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

来源

2011-02-11 14:35:13 Rolf

此答案已过期，不应使用。

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” 绝对应该考虑移动网站。蜂窝网络上的HTTP访问每个请求/响应的延迟较高。所以有一些用例将数据干扰成CSS或HTML模板可能对移动网络应用程序有益。您应该根据具体情况来衡量使用情况 - 我并不是主张应该在移动网络应用的任何地方使用数据URI。

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

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

来源

2011-03-25 17:41:16

的事情之一，我建议是有两个不同的样式：一个与正常样式定义，另一个包含在base64编码图像。

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

通过这种方式，您可以确保您将常规样式表下载并尽快应用到文档中，但同时您还可以从减少的http请求和其他数据利润中获益。

来源

2011-07-07 15:36:23 ximi

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

假设图像是出于UI的目的，它是表示层样式，并且如上所述，如果您正在做移动UI，将所有样式保留在单个文件中以使其可以被缓存一次绝对是一个好主意。

来源

2011-08-03 22:31:37 tim

在GZip之后，Base64增加了约10％的图像尺寸，但在移动设备上的优势超过了它。由于响应式网页设计的总体趋势是强烈推荐。

W3C还建议这种方法进行移动，如果你使用的轨道资产的管道，这是压缩你的CSS

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

来源

2012-01-16 08:33:44 Greg

，当我试图创建CSS/HTML分析器的联机概念的默认功能工具：

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

它可以：

下载并解析HTML/CSS文件，提取HREF/SRC/url元素
检测压缩（gzip）而且尺寸数据在URL
比较原始数据大小，BASE64数据大小和gzip压缩的base64数据大小
将URL（图像，字体，css，...）转换为base64数据URI方案。这可以通过数据URI幸免请求
计数

的意见/建议欢迎。

安东尼

来源

2013-06-24 20:17:41

带来一点的崇高文本2的用户来说，是一个插件，让我们在ST加载图像以base64编码。

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

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

来源

2013-07-31 18:15:54

可以用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

来源

2014-01-31 21:22:32 ucefkh

感谢这里的信息。我发现这种嵌入方式非常有用，尤其是对于移动设备，特别是在嵌入式图像的css文件被缓存的情况下。

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

在Windows 8.1 ---说

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

...有作为管理员，你可以在你的路径建立一个快捷方式到批处理文件。该批处理文件将调用一个php（cli）脚本。

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

Ok Admiinstartor请求，并等待黑色命令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（CLI）脚本的php.exe ...

<?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)); 

?>

来源

2014-03-27 02:48:23 PaulANormanNZ

据我研究，

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

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

来源

2017-11-09 12:54:24

将背景图像数据嵌入到CSS中作为Base64的好坏做法？

回答

相关问题