我的图片会发到服务器吗？

不会。文件用浏览器的 FileReader API 读取，在本地完成编码。不上传任何内容。

为什么 Data URI 比原文件更大？

Base64 把每 3 个字节的二进制数据表示成 4 个 ASCII 字符，所以编码后的字符串比源文件大约大 33%。工具会把两个大小都显示出来供你对照，例如 "logo.png · 4.2 KB · Data URI 5.6 KB"。

什么时候适合把图片做成 Data URI 内嵌？

适合小体积的资源（图标、很小的 logo、内联 SVG 的兜底图），也就是省下一次 HTTP 请求的收益大于体积代价的场合。大图通常还是单独作为文件提供更好，因为 Data URI 会把 HTML/CSS 撑大，而且没法被独立缓存。

图片 → Data URI转换工具

概述

Data URI 用 data:<mime-type>;base64,<data> 的形式把文件内容直接嵌进一个 URL。这个工具把任意图片转成这种形式，于是你可以把它内联到 <img src>、CSS 的 background-image，或者一个 JSON 载荷里。文件是在你的浏览器里用 FileReader.readAsDataURL 读取的，不做任何上传。转换完成后你会得到文件名、原始大小、编码后大小、一张渲染出来的预览，以及可直接复制的完整 URI。

使用方法

点 Choose image 选一个文件。转换会立即进行。
看一眼信息行（文件名、源文件 KB、Data URI KB）和预览图，确认编码的确实是那张图。
按 Copy 把完整的 Data URI 放进剪贴板。

示例

一个 1 KB 的 favicon PNG 会变成以 data:image/png;base64,iVBORw0KGgo… 开头的字符串，可以直接粘进 <link rel="icon" href="…">。
把一个小箭头图标内联到 CSS 里：background-image: url("data:image/svg+xml;base64,…")，从而少发一次请求。

说明

Data URI 不会跟包含它的文档分开缓存，而且极长的字符串会拖慢编辑器和 diff 的速度。请把这个手法留给只有几 KB 的资源。经验法则是：几 KB 的图标和小 logo 值得内联，换来少发一次 HTTP 请求；再大的图还是单独出文件更合适。