数据 URI 的用途是什么？答案

【问题标题】：What is the purpose of data URIs?数据 URI 的用途是什么？
【发布时间】：2013-08-08 00:25:21
【问题描述】：

为什么资源有时会嵌入在数据 URI 中，而不是使用常规 URI 链接到存储为服务器上文件的资源？

【问题讨论】：

【解决方案1】：

1.减少服务器请求

通过减少获取资源所需的 HTTP 请求数量，数据 URI 可用于降低服务器负载并提高客户端性能。例如，这个 HTML：

<img src="assets/bullet.png">

... 可以替换为：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA
  ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5
  o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9
  D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3
  pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj
  eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38
  k6jyMAAAAASUVORK5CYII="
>

... 生成这样的图像：减少一个 HTTP 请求。

注意：在 Stack Overflow 帖子中嵌入数据 URI 图像似乎是不可能的；但是，上面的图片是使用显示的数据 URI 上传到图片托管服务的。

例如，如果您的网站使用许多小图标，请将它们全部指定为样式表中的数据 URI：

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) }
.icon-bullet-green { background-image: /* ... */ }
.icon-save { background-image: /* ... */ }
.icon-load { background-image: /* ... */ }
.icon-delete { background-image: /* ... */ }
/* ... etc. */

... 可以消除大量 HTTP 请求，但代价是总体下载大小、易读性以及错误编辑导致 URI 无意义（且难以修复）的可能性增加。

为图像实现相同结果的另一种方法是使用CSS sprites。

2。在单个文件中嵌入内容

数据 URI 可用于包含在单个文档中正确显示页面所需的所有资源。这可能在例如与软件一起分发的 README 文件。理论上，数据 URI 也可以作为使用附件在 HTML 电子邮件中嵌入资源的替代方法，但实际上客户端对数据 URI 的支持是 too unreliable，因为这是一种有用的技术。

3.避免浏览器警告

如果页面包含通过 HTTP 和 HTTPS 混合提供的内容，某些浏览器会显示警告。如果您的服务器设置为通常通过 HTTP 提供静态内容（如图像），但通过 HTTPS 提供动态内容，则可以使用数据 URI 嵌入该静态内容。

【讨论】：

很好的答案，也许使用数据 URI 的另一个效果是页面作为一个整体加载。没有更多的预加载使 HTML 更简单。
这里唯一需要注意的是 DATA URIs 实际上会损害性能，因为它们不是从页面本身单独缓存的，而且浏览器的下载引擎的工作方式并不总是针对高性能进行优化当遇到 DATA URI 时。作为最佳实践，请避免使用大型数据 URI，并避免使用未缓存在样式表或某些可重用资源中的 DATA URI。
Data URLs的另一种用途 Data URLs可以根据需要从Javascript动态生成，然后链接到a标签以创建浏览器的“下载”文件- 无需服务器即可生成数据。

【解决方案2】：

除了上一个答案（这是一个很好的总结）之外，我最近一直在使用它的一件事是字体。如果我只需要使用字体中的一小部分字符（例如，用于徽标的 design-y 字体或特殊的 dingbat 项目符号图标），我可以将所需的字符编码到 CSS @font-face 声明中而不是让用户下载整个字体文件。

例如，如果我只想要 Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB) 中的恶魔 (d) 和天使 (e) 面孔，那么我可以使用 FontSquirrel 的 webfont 生成器工具 (http://www.fontsquirrel.com/tools/webfont-generator) 创建如下内容：

@font-face {
    font-family: 'eggfaces';
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff');
    font-weight: normal;
    font-style: normal;
}

请看这个小提琴的例子：http://jsfiddle.net/vuuVh/

【讨论】：