图片转 data URI / Base64

关于此工具

什么是 data URI

data URI 把文件直接放在地址里：data:image/png;base64,iVBORw0KGgo…。data: 后面是媒体类型，然后是可选的 ;base64 标记，说明内容的编码方式，最后在逗号之后是内容本身。凡是浏览器接受图片 URL 的地方，比如 HTML 中的 src 或 CSS 中的 url()，都接受 data URI，并且无需额外请求就能显示图片。这种格式由 RFC 2397 定义。

内联的代价

Base64 把每 3 个字节写成 4 个字符，所以编码后的图片比文件大约大 33%。内联图片还与包含它的文档绑定在一起：浏览器无法单独缓存它，每个重复使用它的页面或样式表都会再传输一次。

因此 data URI 适合少量小图片，比如一两 KB 的图标或占位图，不适合照片。结果超过约 10 KB 时，此工具会给出提醒。

SVG 不需要 Base64

SVG 文件是文本，所以可以以文本形式放进 data URI：data:image/svg+xml;charset=utf-8,…。只有部分字符需要百分号编码：会结束 URL 或其外层引号的字符，以及 URL 不能原样携带的字符。未转义的 # 在颜色值中很常见，它会开启 URL 片段，导致图片被截断。此工具会转义 %、#、<、>、"、&、反斜杠、空白字符和控制字符，并把 ASCII 以外的字符写成 UTF-8 转义序列。对结果解码会得到相同的 SVG 文本。只有文件是有效的 UTF-8 时才提供文本形式。

URL 编码形式仍然可读，而且因为它仍是纯文本，gzip 和 Brotli 通常能比 Base64 压缩得更好。压缩前哪种形式更短取决于文件，所以此工具会同时显示两者的大小。

运行方式

图片由你的浏览器读取，并在你的设备上由 JavaScript 编码。反方向也一样：粘贴的 data URI 在页面中解码，然后以文件形式提供给你。图片和 data URI 都不会被上传。