Question

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

Answer 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="
>

...生成这样的图像： bullet icon 少一个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嵌入静态内容。

Answer 2

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

数据URI的目的是什么？

2 个答案: