如果只引用该图像一次，我认为将其嵌入到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

移动站点绝对应该考虑使用“数据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/

我尝试创建一个在线概念的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可以保留的请求数

欢迎提出意见和建议。

安东尼

据我调查，

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

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

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

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

源