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

源

我建议使用两个独立的样式表: 一个包含常规样式定义，另一个包含base64编码的图像。

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

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

据我调查，

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

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

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

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

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

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