Data URI 生成器

Q: 如何在 HTML 和 CSS 中使用 Data URI？

在任何需要 URL 的地方直接使用即可：HTML 中写 ，CSS 中写 background-image: url("data:image/svg+xml,...")。在 CSS 中请给值加上引号，百分号编码的 SVG 尤其如此。

Q: 需要指定字符集吗？

如果是含有非 ASCII 字符（例如中文）的 text/plain、text/html 等文本类型，需要在媒体类型后加上 ;charset=UTF-8，否则默认的 US-ASCII 可能导致乱码。image/png 等二进制类型不需要字符集。

Q: 如何把图片转换为 Data URI？

可以直接在这里选择图片文件，也可以使用 图片转 Base64，它还能先调整图片尺寸或转换格式，并输出现成的 HTML、CSS 和 Markdown 代码片段。

把文本或文件转换为可用于 HTML、CSS 或 JSON 的 data: URL，可选 Base64 或百分号编码。粘贴现有的 Data URI，还能查看其 MIME 类型、字符集和大小，预览并下载内容。

MIME 类型编码方式文本编码

输入

打开文件

Data URI

完全在浏览器中运行，不会上传任何数据。

使用方法

输入文本，或选择要嵌入的文件。
检查或填写 MIME 类型，例如 image/png 或 image/svg+xml，然后选择 Base64 或百分号编码。
把生成的 Data URI 复制到 HTML、CSS 或 JSON 中。
如需检查现有的 Data URI，把它粘贴到解析区域，即可查看 MIME 类型、字符集、大小和预览，并下载其中的文件。

Data URI 的语法

Data URI 由 RFC 2397 定义，它把一个小文件直接放在 URL 里：

data:[<mediatype>][;base64],<data>

data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...

媒体类型告诉浏览器如何解释这些数据；如果省略，则默认为 text/plain;charset=US-ASCII。;base64 标记表示逗号后面的内容是 Base64；没有这个标记时，数据就是普通文本，其中的特殊字符需要做百分号编码。

Base64 还是百分号编码

PNG、JPEG、WebP、字体和 PDF 等二进制文件应使用 Base64，它固定会让体积增加约 33%。对于文本格式，百分号编码往往更小：大多数字符保持原样，只有 <、>、#、% 和双引号等少数字符需要转义。因此它很适合 SVG 图标，而且结果仍然可读，经过 gzip 或 Brotli 压缩后效果也更好。不过非 ASCII 文本的每个字节都会变成三个字符，所以中文或西里尔文文本通常用 Base64 更短。拿不准时，可以两种方式都试一下，选择较短的结果。

/* CSS 中百分号编码的 SVG：内部使用单引号，# 写作 %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }

什么时候适合内联

Data URI 可以省去一次 HTTP 请求，但数据会成为所在文档的一部分：

无法单独缓存。内联在 HTML 中的图片会随每个页面重新下载；内联在样式表中的图片随样式表一起缓存，修改它就会让整个样式表的缓存失效。
首次渲染变慢。CSS 中体积较大的 Data URI 会推迟渲染，因为浏览器必须先下载并解析完整个样式表。
体积增加。Base64 会增加三分之一的体积，对 HTML 或 CSS 进行压缩只能弥补一部分。

在 HTTP/2 和 HTTP/3 下，额外请求的开销很小，所以只建议内联几 KB 以内的小资源，例如图标、小占位图或首屏关键背景，其余资源仍以普通文件提供。如果网站设置了内容安全策略（CSP），需要在 img-src 或 font-src 中允许 data:，内联的图片和字体才能加载。

常见问题

Data URI 有大小限制吗？

RFC 2397 没有规定上限，现代浏览器在图片和样式表中可以处理几 MB 的 Data URI。但过大的 Data URI 仍然不可取：它会让页面臃肿，无法单独缓存，解析也更慢。

为什么点击指向 Data URI 的链接打不开？

为了防范钓鱼攻击，大多数浏览器会阻止网页把主窗口跳转到 data: URL。请在图片、CSS 或下载链接中使用 Data URI，或者把它粘贴到本页的解析区域进行预览和下载。

如何在 HTML 和 CSS 中使用 Data URI？

在任何需要 URL 的地方直接使用即可：HTML 中写 <img src="data:image/png;base64,...">，CSS 中写 background-image: url("data:image/svg+xml,...")。在 CSS 中请给值加上引号，百分号编码的 SVG 尤其如此。

需要指定字符集吗？

如果是含有非 ASCII 字符（例如中文）的 text/plain、text/html 等文本类型，需要在媒体类型后加上 ;charset=UTF-8，否则默认的 US-ASCII 可能导致乱码。image/png 等二进制类型不需要字符集。

如何把图片转换为 Data URI？

可以直接在这里选择图片文件，也可以使用图片转 Base64，它还能先调整图片尺寸或转换格式，并输出现成的 HTML、CSS 和 Markdown 代码片段。