Data URI 生成器
将任意文件转换为 Data URI——并获取可直接粘贴的 HTML 嵌入代码、CSS background-image、@font-face 规则或 JSON 载荷。全程在浏览器中运行。
拖拽文件到此处或点击选择文件
图片 · SVG · PDF · 字体 · 音频 · 文本 · 最大 25 MB
上传文件后生成 Data URI
如何生成 Data URI
上传文件
拖放或点击选择任意文件——图片、SVG、PDF、字体、音频或文本。MIME 类型会自动检测。
选择输出格式
选择 Data URI、HTML、CSS 或 JSON。HTML 和 CSS 输出会根据文件类型自动适配——字体输出 @font-face，音频文件输出 <audio>，图片输出 background-image。
复制并使用
点击「复制」将结果发送到剪贴板，可直接粘贴到代码中。如需处理大文件，请使用「下载 .txt」。
支持的文件类型
每种文件类型会生成专为其实际用途优化的 HTML 和 CSS 输出。
在 HTML <img> 标签和 CSS background-image 中内联图片。无需额外的文件请求。
data:image/png;base64,iVBORw0KGgo...
在 HTML 或 CSS 中内联嵌入可缩放矢量图形，无需外部文件。同时支持 <img> 和 background-image 两种用法。
data:image/svg+xml;base64,PHN2ZyB4bWxu...
使用 <object> 标签在 HTML 中嵌入 PDF。适用于无需外部 URL 即可渲染的独立文档或小型报告。
data:application/pdf;base64,JVBERi0x...
直接在 CSS @font-face 规则中嵌入字体。消除外部字体请求，防止关键渲染路径中出现 FOUT（无样式文本闪烁）。
data:font/woff2;base64,d09GMgABAAAA...
在 HTML <audio> 元素中内联嵌入短音频片段。适合小型 UI 音效、通知提示音或离线应用。
data:audio/mpeg;base64,SUQzBAAAAAA...
无需服务器托管即可为文本文件生成下载链接。也支持在 iframe 中内联 HTML 以实现沙箱内容隔离。
data:text/plain;base64,SGVsbG8gV29ybGQ...
在 HTML 和 CSS 中使用 Data URI
将文件数据直接嵌入标记和样式表的常用方式。
.hero {
background-image: url("data:image/png;base64,iVBOR...");
background-size: cover;
}@font-face {
font-family: 'MyFont';
src: url("data:font/woff2;base64,d09GMgAB...") format("woff2");
font-weight: normal;
font-style: normal;
}<img
src="data:image/svg+xml;base64,PHN2Zy..."
alt="logo"
width="48"
height="48"
/>{
"filename": "icon.png",
"mime": "image/png",
"encoding": "base64",
"size": 4218,
"data": "iVBORw0KGgoAAAANSUhEUg..."
}何时使用 Data URI
Data URI 最适合小型资源，此时消除 HTTP 请求比缓存能力更重要。
减少 HTTP 请求
Data URI 将文件直接嵌入 HTML 或 CSS——无需单独请求，无需 CDN 依赖，即使服务器宕机也不会出现资源丢失。
独立的 HTML 文件
创建包含图片、字体和图标的可移植 HTML 文件，所有内容均已内嵌。可离线打开、作为单个附件分享，或导出为快照。
内联字体加载
在 CSS @font-face 规则中嵌入 WOFF2 字体，消除 Web 字体请求，减少 FOUT，使样式表完全自给自足。
关键路径资源
将小图标、Logo 和背景图片直接内联到页面 HTML 中，确保它们随第一个字节一同渲染，不产生任何阻塞渲染的请求。
常见问题
什么是 Data URI？
Data URI（也称为 data URL）是一种 URI 方案，使用 data:[mimetype];base64,[encoded-data] 格式将文件数据内联嵌入。它让您可以在 HTML 或 CSS 中直接嵌入图片、字体、PDF 等文件，无需引用外部 URL。
哪些文件类型可以生成 CSS Data URI？
CSS Data URI 适用于图片（background-image: url(...)）和字体（@font-face）。PDF、音频、文本等其他文件类型没有标准的 CSS 使用场景，因此这些文件类型的 CSS 选项卡会被禁用。
大文件适合使用 Data URI 吗？
不适合。Data URI 会使文件大小增加约 33%（Base64 编码开销），且浏览器无法对其单独缓存。Data URI 最适合 10 KB 以内的小型资源。对于较大的文件，建议通过 URL 提供服务。
Data URI 和 Base64 字符串有什么区别？
Base64 字符串只是编码后的数据。Data URI 在其基础上添加了 MIME 类型前缀（data:image/png;base64,...），使其可以直接作为 src、href 或 CSS url() 的值使用。
所有浏览器都支持 Data URI 字体吗？
是的。所有现代浏览器均支持在 CSS @font-face 规则中使用 Data URI 字体。WOFF2 是最高效的格式——建议将其作为 src 的第一选项。
文件会上传到服务器吗？
不会。所有编码均在浏览器中通过 File API 完成。您的文件不会离开设备——断网后使用，工具依然正常运行。