Data URI 生成器
将任何上传的文件或粘贴的文本转换为具有所选MIME类型的data URI（data:<mime-type>;base64,<data>）— 包括原始尺寸与编码尺寸的字节大小统计，准备好在HTML、CSS或JSON中内联嵌入。
输入
文件在本地读取 — 永远不会上传。
输出
对于图像MIME类型，此处会显示图像预览。
| 指标 | 值 |
|---|---|
| No data yet | |
使用此工具的更多方式
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/data-uri-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Data URI 生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
也可通过
使用指南
Data URI（或data URL）将文件内容直接嵌入到字符串中 — data:<mime-type>;base64,<data> — 以便可以在任何需要普通URL的地方使用，无需单独的HTTP请求。此工具从上传的文件或粘贴的文本创建一个，并报告编码版本比原始版本大多少。
如何使用
- 选择来源：上传文件（任何文件类型 — 图像、字体、PDF、音频等）或输入文本（粘贴纯文本、HTML、CSS、JavaScript或SVG标记，并选择其MIME类型）。
- 对于文件上传，浏览器会自动从文件本身检测MIME类型。如果检测有误或您需要不同的类型，请勾选覆盖检测到的MIME类型并手动输入一个（例如
image/png、font/woff2）。 - 复制生成的Data URI — 准备好粘贴到
<img src>、CSSbackground-image: url(...)、JSON字段或@font-facesrc中。 - 查看大小与类型表格，了解检测/选择的MIME类型、原始字节大小、编码data URI大小和百分比增加。
- 如果来源是图像，实时预览会显示在data URI下方，以便您可以在使用之前确认它解码正确。
一切都在您的浏览器中本地运行 — 上传的文件永远不会发送到服务器。
为什么data URI比原始文件大得多？
Base64编码将每3字节的二进制数据表示为4个ASCII字符，这本身就增加了大约33%的大小。此外，data:<mime-type>;base64,前缀增加了一个小的固定开销。对于短代码段，此开销可能占主导地位 — 编码13字节的"Hello, World!"会生成一个长度超过原始长度3倍的data URI — 但对于较大的文件，百分比增加会收敛到~33%的base64开销。
何时应使用data URI而不是常规文件？
Data URI对于小型的、经常重用的资源非常有用 — 图标、小背景图像、网络字体、小占位符图像 — 其中节省HTTP请求的好处超过了~33%的大小罚款，以及资源不再能独立缓存或在页面间共享的事实。对于任何大于几千字节的内容，或在许多页面中重用的资源，浏览器可以缓存的常规链接文件几乎总是更好的选择。
这适用于非英文文本或表情符号吗？
是的。粘贴的文本在Base64编码之前进行UTF-8编码，因此带重音的字符、CJK文本和表情符号都能正确往返。（一些较旧的工具使用btoa(unescape(encodeURIComponent(text)))技巧，这会误处理某些Unicode文本 — 此工具直接使用TextEncoder。）
我应该为粘贴的文本选择什么MIME类型？
匹配内容：纯文本使用text/plain，HTML片段使用text/html，样式表使用text/css，脚本使用text/javascript，SVG标记使用image/svg+xml（这也是SVG预览呈现的原因）。获得正确的MIME类型很重要，如果data URI被检查它的内容 — 例如，呈现<img>标签的浏览器需要image/*类型。
相关
要反向操作 — 将data URI或Base64字符串解码回纯文本 — 请使用Base64 Decode。对于SVG，SVG to Base64 Encode也会生成准备好粘贴的HTML <img>和CSS background-image代码片段以及data URI。