Data URI

您是否知道，在 HTML 中使用 <img> 元素或在 CSS 中声明背景图像时，无需链接到外部图像文件？您可以使用**Data URI**将图像数据直接嵌入文档中。

（说“Data URL”也同样正确，我个人更喜欢这种说法。）

使用 CSS，它看起来像这样

li {
  background:
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  padding: 5px 0 5px 25px;
}

使用 HTML，它看起来像这样

<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">

具体格式如下

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

基本上是一长串乱七八糟的字符。当然，对于浏览器来说，它并不是乱码。这些数据被解释为您所声明的文件类型。

您可以在此处查看一个非常简单的演示页面。接下来我将介绍重要的部分。

为什么要这样做？

最大的原因：它可以节省 HTTP 请求。除了纯文档大小外，这是影响页面加载速度的首要因素。越少越好。

如何获取代码？

使用此在线转换工具。这是我发现的最好的一个。还有一个拖放工具。

另请注意，base64 并不是 Data URI 的唯一可能格式，有时它甚至不是一个好主意。ASCII 是另一种格式，其中代码本质上是 URL 编码的，或者 UTF-8。

浏览器兼容性

Data URI 在 IE 5-7 中不起作用，但在 IE 8 中受支持。您可以

• 使用仅限 IE 的样式表来放置图像，或者，
• 仅将其用于渐进增强类型的内容，在这些内容中，没有图像是可以接受的，或者，
• 不关心
• 阅读这篇文章，了解一种确实有效的替代技术。

重要说明

• 嵌入代码的大小略大于资源本身的大小。GZip 压缩将有所帮助。
• IE8 的最大 Data URI 大小最低为 32768 字节。（嘿？！那个奇怪的数字又出现了。）
• 对于所有内容都嵌入 Data URI 的网站，很难进行维护。更新图像并替换它更容易。
• 如果您使用的是 PHP（或将 PHP 用作 CSS），您可以像这样动态创建 Data URI：<?php echo base64_encode(file_get_contents("../images/folder16.gif")) ?>
• 您应该仅在缓存频繁的文档中使用此方法，例如您的 CSS 应该缓存。如果 CSS 文件可以节省 6 个 HTTP 请求，那么它的大小为 300k 而不是 50k 是可以接受的，但这仅在 CSS 文件的缓存效果与这些图像一样好的情况下才成立。在 CSS 文件上设置较长的过期时间应该会有所帮助。
• Data URI 不限于图像，它们实际上可以是任何东西。
• 当 <canvas> 获得更多支持并且人们为其构建了很酷的工具时，它可能会使所有这些变得过时。
• Compass有一个辅助函数。

关于性能

Peter McLachlan 的一些相关研究

……在衡量数十万个移动页面浏览量的性能时，使用 Data URI 加载图像的平均速度比使用二进制源链接（例如带有 src 属性的 img 标签）慢 6 倍！