🔗
Data URI 生成器
把文本、SVG 或小图转成 data: URI，直接内联进 HTML/CSS。
本地处理 · 不上传
加载工具中…
相关：datauri · data-uri · 内联 · base64 · svg
Data URI 生成器把文件转成可直接嵌入 HTML 或 CSS 的 data: 链接，无需单独的文件请求。转换在浏览器本地完成。
使用步骤
- 选择或拖入文件
- 查看生成的 data URI
- 复制到 HTML 或 CSS 中
- 或反向解析已有的 data URI
使用场景
- 把小图标内联进样式表
- 制作单文件的 HTML 页面
- 在邮件模板中嵌入图片
- 减少小资源的请求次数
小贴士
- 体积会膨胀约三分之一，且内联资源无法被浏览器单独缓存，因此只适合几 KB 以内的小文件。
- MIME 类型必须正确，写错浏览器会拒绝渲染。SVG 用 image/svg+xml，PNG 用 image/png。
- SVG 可以不做 Base64 而直接内联源码，只需对 `#` 和 `<` 等字符做 URL 编码，这样体积反而更小。
常见问题
什么时候该用 data URI？
文件小于几 KB、且在首屏必需时，省下一次请求是划算的。文件稍大或会被多个页面复用时，外链加缓存的总体收益更高。
为什么图片显示不出来？
多半是 MIME 类型写错，或者 SVG 内联时特殊字符没有正确编码。`#` 必须写成 `%23`，否则后面的内容会被当成片段标识符。
会影响性能吗？
减少了请求次数但增大了主文档体积，且内联内容无法单独缓存。大量使用会让 CSS 文件变得臃肿，每次页面加载都要重新传输。
Data URI 生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Data URI 生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。
相关工具
更多编码转换工具 ›⇄Base64 编码 / 解码热门文本 Base64 在线编码与解码，支持中文 UTF-8，本地即时处理。%URL 编码 / 解码URL / URI 组件在线编码解码（encodeURIComponent），处理中文与特殊字符。▚二维码生成热门把网址、文本一键生成二维码，可下载 PNG。纯前端生成，内容不外传。#哈希计算 MD5/SHA热门对文本计算 MD5、SHA-1、SHA-256、SHA-512 摘要，本地计算不上传。U+Unicode 编解码中文/字符与 \u 转义、码点互转，处理 JS/JSON 转义字符串。&HTML 实体编解码HTML 特殊字符与实体（< & 等）在线互转，防 XSS 转义与还原。