本文目录
什么是 Data URI？
Data URI（统一资源标识符）是一种可以将文件内容直接嵌入到 URL 字符串中、而无需链接外部文件的方案。它由 RFC 2397 定义，使用 data:[mediatype][;base64],data 的格式将内容内联编码。这样便无需再发起单独的 HTTP 请求去获取该资源。
Data URI 常用于将小图片、字体、SVG 等资源直接嵌入 HTML 或 CSS 中。与其通过 URL 引用外部文件，不如把整个文件内容编码（通常采用 base64）后内联放置。对于小型资源，这样可以减少 HTTP 请求并简化部署。
如何创建 Data URI
Data URI 生成器可将文件内容或文本转换为 Data URI 格式。整个过程包括确定 MIME 类型并对内容进行编码。
- 文本输入——直接输入文本并指定 MIME 类型（text/plain、text/html、text/css、application/json）。文本可采用 URL 编码或 base64 编码
- 文件上传——上传任意文件（图片、字体、SVG、文档），生成器会自动判断其 MIME 类型并将内容进行 base64 编码
- MIME 类型选择——媒体类型告诉浏览器如何解读这段数据。常见类型包括 image/png、image/svg+xml、text/css 和 application/javascript
免费试用 —— 无需注册
生成 Data URI →何时使用 Data URI
对于小型且频繁使用的资源，省去一次 HTTP 请求能提升性能，此时 Data URI 最能发挥优势。
- CSS 背景图——将小图标或图案直接嵌入 CSS 以省去额外请求。适用于每个页面都会出现、大小在 2–4 KB 以下的图片
- CSS 中的内联 SVG——当 SVG 无法直接放入 HTML 时，可将 SVG 图标以 Data URI 的形式嵌入 background-image 属性中
- 邮件 HTML 模板——由于许多邮件客户端默认拦截外部图片，可将图片直接嵌入邮件 HTML。Data URI 无需用户开启图片加载即可正常显示
常见问题
Data URI 有大小限制吗？
规范中没有硬性限制，但存在实际上的限制。大多数现代浏览器可以处理达数兆字节的 Data URI，而（旧版）Internet Explorer 将其限制在 32 KB 以内。base64 编码会使数据体积增大约 33%，因此一张 30 KB 的图片作为 Data URI 后约为 40 KB。对于大于 5–10 KB 的资源，配合正确缓存策略的外部文件通常更高效。
Data URI 会影响性能吗？
对于小型资源，Data URI 通过省去 HTTP 请求来提升性能。但 base64 编码后的数据比原始文件大约 33%，而且 Data URI 无法被浏览器单独缓存（它们随所在文档一起缓存）。对于大文件或跨多个页面使用的资源，带缓存头的外部文件表现更好。
Data URI 安全吗？
Data URI 存在一些安全隐患。大多数浏览器会阻止 Data URI 中的 JavaScript 执行（以防范 data: 协议的 XSS 攻击）。不过，如果配置不当，Data URI 可能绕过内容安全策略（CSP）规则。在接受用户生成的 Data URI 时，请务必校验其 MIME 类型，并考虑设置限制 data: 来源的 CSP 指令。