我正在查看一个greasemonkey用户的来源,并在他们的css中注意到以下内容:
.even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}
我可以理解,一个greasemonkey脚本想要在源代码中捆绑任何东西,而不是在服务器上托管它,这是显而易见的。但由于我之前没有见过这种技术,我考虑过它的用途,看起来很有吸引力:
考虑到IE6(例如)有背景图像缓存问题,这似乎不是最糟糕的想法......
那么,这是一个好的还是坏的做法,为什么你不使用它以及你用什么工具对图像进行base64编码?
更新 - 测试结果
使用图片进行测试:http://fragged.org/dev/map-shot.jpg - 133.6Kb
专用的CSS文件: http://fragged.org/dev/base64.css - 178.1Kb
GZIP编码服务器端
发送给客户端的结果大小(YSLOW 组件测试): 59.3Kb
保存发送到客户端浏览器的数据: 74.3Kb
很好,但对于较小的图像,它会稍微有点用,我猜。
更新:Google的软件工程师Bryan McQuade正在研究PageSpeed,在ChromeDevSummit 2013上表达了数据:CSS中的uris被认为是一种渲染阻止反模式,用于在他的谈话中提供关键/最小的CSS {{1} }。请参阅http://developer.chrome.com/devsummit/sessions并牢记这一点 - actual slide
答案 0 :(得分:162)
当您希望单独缓存图像和样式信息时,这不是一个好主意。此外,如果您将大图像或大量图像编码到css文件中,则在下载完成之前,浏览器需要更长时间才能下载文件而不会显示任何样式信息。对于您不打算经常更改的小图像,如果它是一个很好的解决方案。
生成base64编码:
答案 1 :(得分:55)
此答案已过期,不应使用。
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模板可能对移动Web应用程序有益。您应该根据具体情况衡量使用情况 - 我并不是主张数据URI应该在移动网络应用程序的任何地方使用。
请注意,移动浏览器对可缓存的文件总大小有限制。 iOS 3.2的限制相当低(每个文件25K),但是对于较新版本的Mobile Safari,它们会变得更大(100K)。因此,在包含数据URI时,请务必密切关注文件总大小。
http://www.yuiblog.com/blog/2010/06/28/mobile-browser-cache-limits/
答案 2 :(得分:23)
如果您仅引用该图像一次,我认为将其嵌入您的CSS文件时没有问题。但是,一旦您使用多个图像或需要在CSS中多次引用它,您可以考虑使用单个图像映射,然后可以从中裁剪单个图像(参见CSS Sprites)。
答案 3 :(得分:21)
我建议的一件事是有两个单独的样式表: 一个包含常规样式定义,另一个包含base64编码的图像。
当然,您必须在图像样式表之前包含基本样式表。
通过这种方式,您可以确保您可以尽快下载常规样式表并将其应用到文档中,同时您可以从减少的http请求和uris提供的其他好处中获益。
答案 4 :(得分:20)
在GZipped之后,Base64增加了大约10%的图像尺寸,但是在移动设备方面,这超过了它的优势。由于响应式网页设计存在整体趋势,因此强烈建议使用。
W3C还推荐这种方法用于移动,如果你在rails中使用资产管道,这是压缩你的css时的默认功能
答案 5 :(得分:4)
我不同意为非编辑图像创建单独的CSS文件的建议。
假设这些图片是用于UI目的,它是表示层样式,如上所述,如果您正在使用移动UI,那么将所有样式保存在单个文件中绝对是一个好主意,因此可以缓存一次。
答案 6 :(得分:3)
在我的情况下,它允许我应用CSS样式表而不必担心复制相关图像,因为它们已经嵌入其中。
答案 7 :(得分:3)
我尝试创建CSS / HTML分析工具的在线概念:
http://www.motobit.com/util/base64/css-images-to-base64.asp
它可以:
欢迎提出意见/建议。
安东尼
答案 8 :(得分:3)
你可以用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);
?>
答案 9 :(得分:2)
为Sublime Text 2的用户带来一点,有一个插件给出了我们在ST中加载图像的base64代码。
名为Image2base64:https://github.com/tm-minty/sublime-text-2-image2base64
PS:永远不要保存插件生成的这个文件,因为它会覆盖文件并会破坏。
答案 10 :(得分:0)
感谢此处提供的信息。 我发现这种嵌入很有用,特别是对于移动设备,特别是嵌入式图像的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.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));
?>
答案 11 :(得分:0)
据我所研究,
使用: 1.当你使用svg精灵时。 2.当您的图像尺寸较小(最大200mb)时。
不要使用: 1.当你是更大的图像。 2.图标为svg's。因为他们已经很好并且在压缩之后压缩了。