图片 → Base64 转换器

将任意图片编码为 Base64 数据 URI，或粘贴数据 URI 将其解码回图片。复制结果或获取 CSS url() 代码片段。不离开你的设备。

图片转 Base64 的工作原理

图像转 Base64 工具读取你的图像文件并将其编码为 Base64 数据 URI，你可以直接嵌入 HTML、CSS 或 JSON，无需单独的文件请求。转换使用浏览器中的 FileReader API，图像中没有任何字节被发送到服务器。你还可以粘贴一个 Base64 字符串进行解码并预览图像，全程在本地完成。

Base64 数据 URI 比二进制原始文件大约大 33%，因为每组三个字节扩展为四个 ASCII 字符。这种大小增加是将图像内联到文档或样式表中的便利性的预期权衡。工具同时显示原始 Base64 字符串、可直接复制粘贴到项目中的 HTML img 标签代码片段，以及 CSS background-image 代码片段。

作者 Bastien Sulyan

图片转 Base64 的分步使用说明

将图像文件拖到上传区域或点击浏览。支持格式：JPEG、PNG、WebP、GIF、SVG。
Base64 数据 URI 立即出现在输出字段中。
复制原始 Base64 字符串，或使用预格式化的 HTML img 标签或 CSS background-image 代码片段。
要解码，请将 Base64 字符串粘贴到输入字段并切换到解码模式以预览图像。
点击任何代码片段旁边的复制按钮将其复制到剪贴板。

常见使用场景

前端开发者将小图标内联为 CSS 文件中的数据 URI，以消除额外的 HTTP 请求。
开发者将微小的加载动画作为 Base64 src 属性嵌入，使占位符图像在 JavaScript 包加载前即可使用。
QA 工程师复制测试图像的 Base64，直接粘贴到 API 测试的 JSON 负载中。
邮件模板设计师将签名徽标内联为 Base64 数据 URI，因为某些邮件客户端会阻止外部图像请求。

常见问题

为什么 Base64 输出比我的原始文件大约三分之一？

Base64 编码将每三个二进制字节表示为四个 ASCII 字符（4/3 的比例）。一个 100 KB 的二进制图像作为 Base64 字符串大约变为 133 KB。这是编码方案固有的特性，不是工具限制。

编码过程中图像内容会被传输到服务器吗？

不会。FileReader API 从你的本地磁盘读取二进制文件，并将结果直接传递给浏览器标签页内的 JavaScript 编码函数。图像数据不离开你的设备。

数据 URI 输出可以在任何 HTML 或 CSS 上下文中使用吗？

可以。以 data:image/jpeg;base64, 开头后跟编码字符串的数据 URI 可以用作 img 标签的 src 属性，或 CSS background-image 属性中的 url() 值。所有现代浏览器都支持数据 URI。非常大的数据 URI 可能会减慢页面渲染速度，因此内联通常只保留给几千字节以下的小图像。

工具支持动画 GIF 吗？

工具对你提供的任何文件的完整二进制内容进行编码，包括动画 GIF。生成的数据 URI 作为 img 标签的 src 使用时，在支持 GIF 动画的浏览器中将播放动画。

如何反过来将 Base64 字符串解码为图像？

将工具切换到解码模式，粘贴你的 Base64 字符串（带或不带 data: 前缀），工具将解码它并提供二进制图像供下载，同时显示预览。