12

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

4

2 回答 2

29

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 的支持太不可靠，因此这不是一种有用的技术。

3. 避免浏览器警告

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

于 2013-08-10T16:43:42.310 回答
10

除了上一个答案（这是一个很好的总结）之外，我最近一直在使用它的一件事是字体。如果我只需要使用字体中的一小部分字符（例如，用于徽标的 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/

于 2013-08-14T16:51:07.530 回答