51

基本上问题就在标题中。

很多人都有关于如何创建数据 URI 的问题 stackoverflow 以及其中的问题。

我的问题是为什么要使用数据 URI？

这样做有什么好处：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

过度执行：

<img src="dot.png" alt="Red dot" />

我知道服务器端的开销较小（也许），但是使用数据 URI的真正优点/缺点是什么？

4

5 回答 5

61

根据维基百科：

好处：

  • 嵌入式数据不需要 HTTP 请求和标头流量，因此只要将内联内容编码为数据 URI 的开销小于 HTTP 开销，数据 URI 消耗的带宽就会更少。例如，600 字节长的图像所需的 base64 编码将是 800 字节，因此如果 HTTP 请求需要超过 200 字节的开销，则数据 URI 会更有效。

  • 对于传输许多小文件（每个小于几千字节），这可能会更快。TCP 传输往往开始缓慢。如果每个文件都需要新的 TCP 连接，则传输速度受往返时间而非可用带宽的限制。使用 HTTP keep-alive 可以改善这种情况，但可能无法完全缓解瓶颈。

  • 浏览安全 HTTPS 网站时，Web 浏览器通常要求通过安全连接下载网页的所有元素，否则将通知用户由于安全和不安全元素的混合而降低了安全性。在配置不当的服务器上，HTTPS 请求比普通 HTTP 请求具有显着的开销，因此在这种情况下，将数据嵌入数据 URI 可能会提高速度。

  • Web 浏览器通常配置为仅与域建立一定数量（通常是两个）的并发 HTTP 连接，因此内联数据释放了其他内容的下载连接。

  • 对外部资源的访问受限或受限的环境可能会在不允许或不切实际地从外部引用内容时嵌入内容。例如，高级 HTML 编辑字段可以接受粘贴或插入的图像并将其转换为数据 URI，以向用户隐藏外部资源的复杂性。或者，浏览器可以将基于图像的数据从剪贴板转换（编码）为数据 URI，并将其粘贴到 HTML 编辑字段中。Mozilla Firefox 4 支持此功能。

  • 可以将多媒体页面作为单个文件进行管理。电子邮件消息模板可以包含图像（用于背景或签名），而图像不会看起来是“附件”。

缺点：

  • 数据 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 使安全软件更难过滤内容。

根据其他来源 - 移动浏览器上的数据 URL 明显较慢。

于 2011-07-25T16:36:13.033 回答
6

Data URI 的一个很好的用途是允许下载客户端生成的内容，而无需求助于服务器端的“代理”。这是我能想到的一些例子：

  • 将画布元素的输出保存为图像。
  • 以 CSV 格式提供表格下载
  • 下载任何类型的在线编辑器的输出（文本、绘图、CSS 代码......等）
于 2012-05-23T15:06:00.277 回答
4

主要是如果我不能（由于某种原因）使用CSS sprites并且我不想下载我将用于样式的每一个小图像，我会发现它的用途。

或者由于某种原因，您不希望任何人从外部页面链接图像。这可以通过其他方法来实现，但嵌入也可以。

否则，我个人不会将大图像编码为照片。最好将您的媒体放在不同的服务器上。可能缺少安装的所有 Web 服务器相关软件的服务器。简单地传递媒体。更好地利用资源。

于 2011-07-25T18:04:24.490 回答
4

我在几个（C++、Python）命令行应用程序中使用了数据 URI 方案来生成 包含数据图的报告。

拥有一个文件非常方便通过电子邮件发送报告（或通常移动它们）。与 PDF 相比，我不需要额外的库（除了 base64 编码例程），也不需要处理分页符（而且我几乎不需要打印这些报告）。我通常不会将这些报告放在 Web 服务器上，只需使用浏览器在本地文件系统上查看它们即可。

于 2012-09-08T09:40:25.560 回答
2

我同意BiAiB的观点，即数据 URI 的真正价值在于使客户端生成的内容可作为文件下载使用，而无需任何服务器往返。

在我的博客中描述了一个使用数据 URI 来“提供以 CSV 格式下载表格”的工作示例。

恕我直言，出于性能原因将图像（或其他二进制资源）数据嵌入 HTML 文件是一个红鲱鱼。由于较少的 HTTP 连接而导致的速度增益可以忽略不计，并且打破了（文本）标记和二进制资源（图像文件、视频等）之间分离的良好原则。

我认为 HTTP 1.1 流水线和对 HTTP 的一些建议改进是处理 HTTP 网络速度问题的更清洁和更好的方法。

于 2012-07-21T15:15:42.643 回答