Data URI Encoder / Decoder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Drop a file to encode it as a data URI
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Data URI Encoder / Decoder

data URI 把文件内容直接装进 URL 本身，因此图片、字体或 SVG 可以直接嵌入 HTML 或 CSS，而不必再去请求。

How it works

格式是 data:<mime-type>;base64,<payload>——例如 data:image/svg+xml;base64,PHN2Zy4uLg==。你键入的文本会先按 UTF-8 编码再做 Base64；拖到工具上的文件会按原始字节读取，其 MIME 类型来自文件本身。Base64 会让体积增大约三分之一，这就是你为省下一次 HTTP 请求所做的交换。

When to use it

  • 把小图标或 SVG 内联进 CSS，使它随首次绘制一起呈现，而不是等到第二次请求之后。
  • 在 HTML 邮件中嵌入图片，许多邮件客户端默认会拦截外部图片 URL。
  • 构建单文件 HTML 页面或小书签脚本，它们必须在没有服务器的情况下工作。
  • 把样式表中发现的 data: URL 的载荷取出来，看清它到底包含什么。

Watch out for

  • data URI 无法被单独缓存。这些字节会随每一份引用它的文档一起分发，因此超过大约 5 KB 后，外部文件在回访时通常更划算。
  • 解码要求是 ;base64, 形式。百分号编码的 data URI——data:image/svg+xml,%3Csvg...——完全合法，但这里不予处理。
  • 解码会把载荷按文本呈现，因此 PNG 或 WOFF 解出来是不可读的字符。而 SVG 等文本格式则能拿回真正的源码。
  • 除非 Content-Security-Policy 的指令明确允许，否则它会阻止 data: URL，因此发送 img-src 'self' 的页面不会渲染内联图片。浏览器还会阻止顶层导航到 data: URL，因此你无法通过把它粘进地址栏来预览。

Frequently Asked Questions

什么时候该使用 data URI？

data URI 可以为小资源省去 HTTP 请求。适用场景：CSS 中的小图标和 SVG（url("data:image/svg+xml,...")）、外部链接被拦截的 HTML 邮件中的内嵌图片、单文件 HTML 应用，以及在 CSS 中内嵌字体以省去一次网络请求。

base64 编码带来多少体积开销？

base64 编码会带来约 33% 的体积开销。一个 30KB 的 PNG 作为 data URI 约为 40KB。对于超过约 5KB 的资源，体积增长加上无法单独缓存，通常会让外部文件比 data URI 更高效。

可以用 data URI 承载 JavaScript 打包产物吗？

不可以——出于安全（XSS）顾虑，浏览器在许多场景下会阻止从 data: URL 执行脚本。data URI 适用于图片、字体、样式表，以及用在非脚本元素的 background-image 或 src 属性中的 SVG。

How to Use Data URI Encoder / Decoder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.