什么是Data URI生成器？

Data URI 生成器将文件转换为 base64 编码的 Data URI，可直接嵌入 HTML、CSS 或 JavaScript。为图标、字体等小型资源省去额外的 HTTP 请求。

拖入一个最大 20 MB 的文件，工具会检测 MIME 类型，把字节做 base64 编码，然后给你三段可以直接粘贴的代码：原始 data URI、CSS 背景图规则、HTML img 标签。图片会显示实时预览，方便在投入生产之前发现白屏或损坏的输出。你还可以粘贴纯文本来编码 SVG 或 JSON 字符串、在编码前缩小大图让 URI 更小、在 MIME 类型识别错误时手动改正、一次编码多个文件、直接从网址抓取远程文件，或者切换到解码模式，粘贴 data URI 把原始文件还原下载下来。

使用方法

1. 用选择器上传文件，或切换到文本模式粘贴一段字符串（SVG、JSON、CSS）来编码。
2. 工具自动将其编码为 base64 并生成包含正确 MIME 类型的完整 Data URI。
3. 复制 Data URI，用于 img src 属性、CSS background-image 或 JavaScript 代码。

何时使用

• 在不托管任何资源的单文件 HTML demo 里嵌入小 logo 或图标。
• 把图片内联进邮件,远程加载被拦时也能正常显示。
• 把字体或 SVG 粘进 CSS,省掉一个阻塞渲染的请求。

结果

将一个 2KB 的 favicon.png 转换为 Data URI 后直接粘贴到 HTML 中——每次页面加载少一个网络请求。

常见问题

为什么编码出的 data URI 比原文件大约 33%?

Base64 用 4 个 ASCII 字符表示 3 字节二进制数据,体积增加 33%。HTTP 响应开启 gzip 后大多能压回去,但磁盘上的 HTML 或 CSS 文件确实比原资源大。

data URI 实用大小上限是多少?

未编码前大约 10 KB 是内联的合理上限。超过后浏览器仍然能解析,但缓存优势消失(每次打开页面都要重新解析),HTML 或 CSS 文件也变得难以维护。更大的资源应该正常托管。

可以把 data URI 作为 CSS 背景图吗?

可以。工具会输出完整的 CSS 规则,把 URI 包在 url() 里写进 background-image。首次绘制时由浏览器解码,小图标保持内联,避免一次额外请求拖慢首屏。

浏览器会像普通图片那样缓存 data URI 吗?

不会。data URI 是父文档的一部分,只有父文档被缓存时它才被缓存。同一张图被 20 个页面引用就要被解析 20 次。多页面共享的资源,用普通托管 URL 总体上更快。

data URI 在 HTML 邮件里能用吗?

Gmail 和 Apple Mail 能正常显示,Windows 版 Outlook 会把它们丢掉。如果要兼容主流邮箱,用 CID 引用附件的方式内嵌图片,比直接在 HTML 里塞 data URI 更稳。

相关工具