为什么资源有时会嵌入到数据 URI 中，而不是使用链接到服务器上作为文件存储的资源的常规 URI？
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="
>
... to produce an image like this: 
with one fewer HTTP request.
Note:似乎不可能在 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 精灵 https://stackoverflow.com/tags/css-sprites/info.
2. 将内容嵌入到单个文件中
数据 URI 可用于包含在单个文档中正确显示页面所需的所有资源。这可能有用，例如与软件一起分发的自述文件。理论上，数据 URI 也可以用作使用附件在 HTML 电子邮件中嵌入资源的替代方案，但实际上，客户端对数据 URI 的支持是有限的。太不可靠 https://stackoverflow.com/a/9330720/1014938这将是一项有用的技术。
3. 避免浏览器警告
如果页面包含通过 HTTP 和 HTTPS 混合提供的内容，某些浏览器会显示警告。如果您的服务器设置为通常通过 HTTP 提供图像等静态内容，但通过 HTTPS 提供动态内容，则使用数据 URI 嵌入该静态内容是一种可能的解决方法。