Data URI 生成器

把任意文件或文本转换为带正确 MIME 类型的 data: URI，可选 Base64 或百分号编码，并提供现成的 <img> 和 CSS 背景代码。在本地运行。

来源

将文件拖放到此处或点击选择

MIME 类型

Base64 编码（关闭后对文本和 SVG 使用百分号编码）

什么是 Data URI 生成器？

data URI 以 data:<mime>;base64,<data> 的形式把文件直接嵌入 HTML、CSS 或 JSON 中，因此无需单独的请求。这个工具可把任意文件（图片、字体、SVG、PDF 等）或输入的文本转换成 data URI，识别 MIME 类型，让你选择 Base64 或百分号编码，并给出对应的 HTML 和 CSS 代码。

如何使用 Data URI 生成器

选择文件并拖入文件，或选择文本并输入内容。
检查或修改 MIME 类型。
二进制文件请保持开启 Base64 编码（关闭后对文本和 SVG 使用百分号编码）；关闭它则对文本和 SVG 使用百分号编码（通常更小）。
复制 Data URI 或 HTML / CSS 代码。

示例

输入

Text: Hello, World! (Base64 on)

输出

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

何时使用 Data URI 生成器

data URI 适合小型资源：图标、很小的 SVG、占位图、单文件演示或邮件模板中的字体，以及测试夹具。在网站上，对于超过几 KB 的文件请避免使用：Base64 会使体积增加约 33%，并且嵌入的数据无法与页面或样式表分开缓存。

Data URI 生成器的工作原理

文件在浏览器中按字节读取。MIME 类型来自浏览器或文件扩展名。使用 Base64 时，字节用标准字母表（RFC 4648）编码，并写成 data:<mime>;base64,…（RFC 2397）。不使用 Base64 时，内容按 UTF-8 解码并用 encodeURIComponent 转义，文本类型会加上 ;charset=utf-8。图片会显示预览，并显示结果的大小。