作为Base64，将背景图像数据嵌入CSS是好做法还是坏做法？

据我研究，

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

不要使用：1.当您放大图像时。2.图标为svg。由于它们已经很好并且在压缩后会压缩。

感谢您在此提供的信息。我发现这种嵌入很有用，尤其是对于移动设备而言，尤其是在缓存嵌入式图像的css文件的情况下。

为了使生活更轻松，因为我的文件编辑器本身无法解决这个问题，所以我为笔记本电脑/台式机编辑工作制作了一些简单的脚本，请在此处共享，以防其他人使用。我坚持使用php，因为它可以直接很好地处理这些事情。

在Windows 8.1下说-

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

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

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

确定Admiinstartor请求，然后等待黑色命令外壳窗口关闭。

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

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

?>

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

资源

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

称为Image2base64：https : //github.com/tm-minty/sublime-text-2-image2base64

PS：切勿保存该插件生成的文件，因为它会覆盖该文件并破坏。

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

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

它可以：

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

欢迎提出意见/建议。

安东宁

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

假设图像是用于UI的，它就是表示层样式，如上所述，如果您要进行移动UI，则将所有样式都保存在一个文件中绝对是个好主意，因此可以将其缓存一次。

就我而言，这使我可以应用CSS样式表，而不必担心复制关联的图像，因为它们已经被嵌入其中了。

我建议的一件事是有两个单独的样式表：一个带有常规样式定义，另一个带有以base64编码形式包含图像的样式表。

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

这样，您将确保下载常规样式表并尽快将其应用于文档，但与此同时，您将从减少的http请求和data-uris给您的其他好处中受益。

G64压缩后，Base64将图像大小增加了约10％，但超过了移动功能带来的好处。由于响应式网页设计存在总体趋势，因此强烈建议您这样做。

W3C还建议将此方法用于移动设备，并且如果您在导轨中使用资产管道，则这是压缩CSS时的默认功能

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

If you reference that image just once, I don’t see a problem to embed it into your CSS file. But once you use more than one image or need to reference it multiple times in your CSS, you might consider using a single image map instead you can then crop your single images from (see CSS Sprites).

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

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应用程序有利。您应该根据具体情况来衡量使用情况-我并不主张在移动Web应用程序中的任何地方都应使用数据URI。

Note that mobile browsers have limitations on total size of files that can be cached. Limits for iOS 3.2 were pretty low (25K per file), but are getting larger (100K) for newer versions of Mobile Safari. So be sure to keep an eye on your total file size when including data URIs.

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

如果要分别缓存图像和样式信息，这不是一个好主意。同样，如果您在css文件中编码大图像或大量图像，则浏览器将花费更长的时间下载文件，而无需任何样式信息即可离开您的网站，直到下载完成。对于小型图像，您不打算经常更改，这是一个很好的解决方案。

就生成base64编码而言：

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