What is the purpose of data URIs?
为什么有时资源有时嵌入数据URI中，而不使用链接到作为文件存储在服务器上的资源的常规URI？
1.减少服务器请求
数据URI可通过减少获取资源所需的HTTP请求数量来减少服务器负载并提高客户端性能。例如，以下HTML：
1 | <img src="assets/bullet.png"> |
...可以替换为：
1 2 3 4 5 6 7 8 | <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请求。
注意：似乎不可能将数据URI图像嵌入Stack Overflow帖子中；但是，上面的图像已使用所示的数据URI上传到图像托管服务。
例如，如果您的站点使用许多小图标，则将它们全部指定为样式表中的数据URI：
1 2 3 4 5 6 | .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精灵。
2.将内容嵌入到单个文件中
数据URI可用于包含在单个文档中正确显示页面所需的所有资源。这在例如与软件一起分发的自述文件。从理论上讲，数据URI也可以用作使用附件在HTML电子邮件中嵌入资源的替代方法，但实际上，客户端对数据URI的支持对此并不可靠，以至于无法用作有用的技术。
3.避免浏览器警告
如果页面包含通过HTTP和HTTPS混合提供的内容，则某些浏览器会显示警告。如果将服务器设置为通常通过HTTP提供静态内容(如图像)，但通过HTTPS提供动态内容，则可以将静态内容与数据URI嵌入是一种可能的解决方法。
除了前面的答案(这是一个很好的总结)之外，我最近一直在使用的一件事是字体。如果我只需要使用字体中的一小部分字符(例如，徽标的设计Y字体或特殊的dingbat项目符号)，则可以将我需要的字符编码为CSS @ font-face声明而不是让用户下载整个字体文件。
例如，如果我只想要Eggfaces(http://www.dingbatdepot.com/details/EggfacesTFB)中的魔鬼(d)和天使(e)面孔，则可以使用FontSquirrel的webfont生成器工具(http：// www .fontsquirrel.com / tools / webfont-generator)创建类似以下内容的代码：
1 2 3 4 5 6 | @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/
要从现有图像生成base64 DATAURL，可以使用诸如DataURL.org和data：URI Generator之类的工具。这些工具将帮助您立即将图像/图片转换为数据URI。