我应该将图像作为data/base64嵌入CSS或HTML中吗

为了减少服务器上的请求数量，我将一些图像（PNG和SVG）作为BASE64直接嵌入到css中。（其在构建过程中实现了自动化）

像这样：

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAFWHRTb2Z0d2FyZQBBZG etc...);

这是一种好的做法吗？有什么理由避免这种情况吗？是否有一些主要浏览器不支持数据url

奖金问题： 对CSS和JS也这样做有意义吗

这是一种好的做法吗？有什么理由避免这种情况吗

这是一个很好的实践，通常仅适用于将要一起使用的非常小的CSS图像（如CSS精灵），当IE兼容性无关紧要时，保存请求比可缓存性更重要

它有许多明显的缺点：

• 在IE6和IE7中根本不起作用

• 仅适用于资源。这是base64编码后应用的限制。换句话说，长度不超过32768个字符

• 它会保存一个请求，但会使HTML页面膨胀！并使图像不可缓存。每次加载包含页面或样式表时，都会加载它们

• Base64编码使图像大小增加了33%

• 如果在gzip资源中提供，

  数据：

  图像几乎肯定会对服务器的资源造成严重的压力！传统上，图像的压缩需要占用大量的CPU资源，而且几乎不需要缩减大小

---

这不是一个好的做法。某些浏览器不支持数据URI（例如IE6和IE7）或支持有限（例如IE8支持32KB）
有关数据URI的完整详细信息，请参阅这篇Wikipedia文章：
缺点
• 数据URI不会与其包含的文档（例如CSS或HTML文件）分开缓存，因此每次重新下载包含的文档时都会下载数据
• 每次进行更改时，内容必须重新编码并重新嵌入
• Internet Explorer第7版（截至2011年1月市场份额约为15%）缺乏支持
• Internet Explorer 8将数据URI的最大长度限制为32 KB
• 数据以简单流的形式包含，许多处理环境（如web浏览器）可能不支持使用容器（如

  multipart/alternative

  或

  message/rfc822

  ）来提供更高的复杂性，如元数据、数据压缩或内容协商
• Base64编码数据URI的大小比其二进制等价物大1/3。（但是，如果HTTP服务器使用gzip压缩响应，此开销将减少到2-3%）
• 数据URI使安全软件更难过滤内容

---

我更倾向于使用CSS精灵来组合图像并根据请求保存。我从未尝试过base64技术，但它显然在IE6和IE7中不起作用。当然，这也意味着，如果任何图像发生变化，您必须重新交付整个丢失的图像，除非您有多个CSS文件。
我不知道一般最佳做法，但我个人不希望看到这种情况，如果我能帮上忙的话。：）
Web浏览器和服务器内置了大量缓存内容，所以我认为最好的办法是让服务器告诉客户端缓存图像文件。除非你在一个页面上有很多非常小的图片，否则我不会认为多个请求的开销有那么大。浏览器通常会使用相同的连接来请求大量文件，因此不会建立新的网络连接，因此，除非通过HTTP头的流量与图像文件的大小相比非常大，否则我不会太担心多个请求

---

你认为现在有太多的请求发送到服务器，有什么原因吗？
我使用数据uri大约有一个月了，我刚刚停止使用它们，因为它们使我的样式表非常庞大
数据uri在IE6/7中可以工作（您只需要为这些浏览器提供一个文件）
我从使用数据uri中得到的一个好处是，我的背景图像在样式表下载后立即呈现，而不是我们看到的逐渐加载

---

这是很好的，我们有这个技术可用，但我不会使用它太多在未来。不过，我确实建议您尝试一下，让您自己知道，
这里的常见答案似乎表明，出于一系列正当理由，这是不必要的。 然而，所有这些似乎都忽略了现代应用程序的行为和构建过程
设计一个简单的过程来遍历一个文件夹的图像并生成一个包含该文件夹所有图像的CSS并不是不可能的（实际上相当容易）
此css将被完全缓存，并将显著减少到服务器的往返，正如@MemeDeveloper所正确建议的，这是最大的性能影响之一
当然，是哈克。毫无疑问和精灵一样，精灵也是黑客。在完美世界中，这是不需要的，在此之前，如果您需要修复的是：
• 带有多个图像的页面不容易“显示”
• 往返服务器是一个实际的瓶颈（想想移动设备）
• 对于您的用例来说，速度（达到毫秒级）确实非常重要
• 你不关心IE5和IE6（如果你想让网络向前发展，你应该这样做）

---

我的观点。
我建议将其用于经常使用的微小图像，例如web应用程序的常见图标
• 很小，因为Base64编码增加了大小
• 通常使用，因为这证明了较长的初始加载时间是合理的
当然，必须记住旧浏览器的支持问题。另外，使用框架的功能来自动内联数据URL中的图像也是一个好主意