数据URI的用途是什么？

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

2013-08-06 Toby Allen

1.降低服务器请求

数据URI可用于减少服务器负荷，提高客户机的性能，通过降低获得所需的资源的HTTP请求的数目。例如，该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请求。

注意：似乎不可能将数据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，因为这是一种有用的技术。如果一个网页包含的内容都通过HTTP和HTTPS的混合物

3.避免浏览器警告

有些浏览器显示一个警告。如果您的服务器已设置为通常通过HTTP提供静态内容（如图像），但通过HTTPS提供动态内容，则使用数据URI嵌入该静态内容是一种可能的解决方法。

来源

2013-08-10 16:43:42

好的答案，也许使用数据URI的一个更多的效果是，页面加载为一个整体。没有更多的预加载使HTML更简单。 – Mehran

@Mehran谢谢;我添加了一些额外的用例。 –

这里唯一需要注意的是DATA URIs实际上可能会损害性能，因为它们不会从页面本身缓存，浏览器的下载引擎在遇到DATA URI时并不总是针对高性能进行优化。作为最佳做法，避免使用大数据URI，并避免使用未在样式表或某些可重用资源中缓存的DATA URI。 – EricLaw

除了以前的答案（这是一个非常好的总结），我最近一直在使用这个东西是字体。如果我只需要使用字体中的一小部分字符（比如，logo-design-y字体或特殊的dingbat bullet图标），则可以将我需要的字符编码到CSS @ font-face声明中而不是让用户下载整个字体文件。

例如，如果我只想要魔鬼（d）和天使（e）由Eggfaces（http://www.dingbatdepot.com/details/EggfacesTFB）脸，然后我可以使用FontSquirrel的web字体生成工具（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-14 16:51:07 andi

数据URI的用途是什么？

回答

相关问题