数据URI是以“data”方案开头的URI，允许您轻松地在网页中嵌入各种对象。

与Blob URI非常相似，数据URI已存在一段时间，并且在所有主流浏览器上都受支持。数据URI是具有以下模式的格式化字符串：

data:[media type][;base64],[data]

您可以在HTML或CSS代码中使用数据URI，无论您在何处放置文件路径。例如，您可以使用数据URI在CSS中指定背景图像：

li {  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...) no-repeat;}

您还可以在src属性中使用HTML <img>元素的数据URI 。

<img width="64" height="69" alt="Treehouse Logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABFCAYAAAD6pOBtAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gMbBwwfAKopzQAAEfdJREFUeNrVW3uUHFWZ...">

注意：我在这些示例中略微缩短了数据URI。他们往往很长！

为什么要使用数据URI？

使用数据URI的主要好处是，您可以减少站点加载页面所需的HTTP请求数。CSS或HTML代码中引用的每个单独文件都将创建一个新的HTTP请求。通过使用数据URI，您实际上是直接在HTML或CSS文件中嵌入文件数据，因此无需发出HTTP请求来获取资源。

减少HTTP请求最终意味着您的网页加载速度更快，因为浏览器不必加载任意数量的文件。除了实际下载文件之外，浏览器还需要一段时间才能为每个发出的HTTP请求与服务器建立连接。使用数据URI可以消除这种开销。

值得注意的是，数据URI字符串的大小通常比原始二进制文件的大小大三分之一。这意味着您将整体下载大量数据，但它将被压缩为单个文件，只有一个HTTP请求。没关系，因为在单个连接上下载大量数据通常比使用多个连接下载相同数量的数据更快（由于我们之前谈到的请求开销）。