Data URI 生成器

如何创建 data URI

1. 选择模式。从文本（默认）编码你输入或粘贴的内容。从文件 接受拖入、粘贴或选择的任意类型文件。解析 则反过来，把 URI 拆开。
2. 在 从文本 模式下，设置 MIME 类型（例如 text/css 或 application/json）、字符集 和 编码：Base64 或 URL 编码。在 从文件 模式下，MIME 类型会根据文件自动填写，也可以修改。
3. 选择 输出格式：Data URI、CSS url()、带下载文件名的 HTML <a>，或 Markdown。图片会额外出现 HTML <img>，字体会出现 @font-face。
4. 点击 复制输出。下载文件 保存载荷本身，另存为 .txt 保存输出文本。

按钮下方，载荷 是数据的大小，URI 长度 是结果的大小，额外开销 是两者之差的百分比。

data URI 的语法

data URI 把整个文件装进一个 URL：

data:[<media type>][;charset=<charset>][;base64],<data>

几个示例：

逗号是必需的，即使数据为空也一样：data:, 是一个有效的空 URI。

Base64 还是 URL 编码

两种编码都能生成有效的 URI，区别在于大小和可读性。

纯 ASCII 文本用 URL 编码更短，在源码中也依然可读。每个非 ASCII 字节要占三个字符（é 是 %C3%A9），所以其他文字的文本很快就会变成 Base64 更划算。图片、字体、PDF 和其他二进制文件请使用 Base64；如果你为二进制数据选择了 URL 编码，生成器会发出警告。

这里的 URL 编码比较保守：字母、数字和 - . _ ~ ! $ * + , ; = : @ / ? 保持不变，其他一律转义，包括 #、%、引号、括号和空格。未转义的 # 会让 URI 提前结束，因为浏览器会把它当作片段的开头。对于 SVG，SVG 转 Data URI 还提供第三种更短的选择。

data URI 能用在哪里

• 图片：<img src>、CSS background-image、<link rel="icon"> 以及视频的 poster。
• 字体：@font-face 的 src，适合单个小型图标字体。当 MIME 类型是字体时，生成器会替你写好这条规则。
• 下载：通过 <a href="data:..." download="report.csv">，用于在页面中生成、不经过服务器的文件。
• 样式表和脚本：用 <link href> 或 <script src> 加载，前提是页面的内容安全策略允许它们使用 data:。
• 测试夹具和 JSON 载荷，需要内联一个小文件的场合。

它们并非处处可用。Chrome 和 Firefox 会阻止页面发起的整个标签页跳转到 data: URL，所以指向 data:text/html,... 的链接点击后不会有任何反应。内容安全策略必须在 img-src、font-src 或相应指令中列出 data:。许多网页邮箱（包括 Gmail）会完全丢弃 data URI 图片；参见 电子邮件中的 Base64。

大小与性能

Base64 会让二进制数据大约增大 33%，而且包含它的每个页面或样式表都要重复一遍这段 URI，它没有独立的缓存条目。对于几 KB 的小资源，这笔交易是划算的；对于照片则不然。data URI 的性能 详细分析了这些数字。特别是图片，图片转 Base64 可以在编码前调整尺寸和转换格式。

在代码中生成 data URI

JavaScript 中的 URL 编码文本：

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

Python 中的 Base64 JSON：

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

详见 JavaScript 中的 Base64 和 Python 中的 Base64。要查看你在某处发现的 data URI，请使用 Data URI 解析器。

常见问题