图片转 Base64（Data URI）转换器
在浏览器中把图片转换为 Base64 data URI，并复制现成的 HTML img、CSS 背景和 Markdown 代码片段，同时查看大小信息。
完全在浏览器中运行，您的数据不会被上传。
什么是 图片转 Base64？
这个工具把图片文件编码为 Base64，以便直接嵌入 HTML、CSS、JSON 或 Markdown。它会输出完整的 data URI（data:image/png;base64,…）、纯 Base64 字符串，以及可直接复制的 <img>、CSS background-image 和 Markdown 代码片段，并显示图片大小和 Base64 带来的额外开销。
如何使用 图片转 Base64
- 拖放、选择或粘贴图片（PNG、JPEG、GIF、WebP、SVG、ICO 等）。
- 查看检测到的格式、尺寸、文件大小和 data URI 长度。
- 点击所需版本旁边的复制：data URI、纯 Base64、HTML 代码、CSS 背景或 Markdown。
示例
30×30 PNG filled with #3366CC (99 bytes)
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC
何时使用 图片转 Base64
适合内联图标、小 Logo 或占位图等很小的图片以节省一次 HTTP 请求，也适合在单文件 HTML、邮件、JSON API 或必须自包含的 CSS 中嵌入图片。超过约 20 KB 的图片不建议这样做：它们会让 HTML/CSS 变得臃肿，而且无法被单独缓存。
图片转 Base64 的工作原理
工具使用 File.arrayBuffer() 读取文件字节，根据魔数（例如 PNG 的 89 50 4E 47）检测真实格式，而不是相信文件扩展名，然后用 btoa 对字节做 Base64 编码。data URI 的格式为 data:<mime>;base64,<base64>。Base64 把每 3 个字节表示为 4 个字符，因此文本比文件大约大 33%。
常见用例
- 把小图标直接嵌入 CSS 文件。
- 把 Logo 放进 HTML 邮件模板或离线单文件页面。
- 在发送给 API 的 JSON 数据中携带图片。
- 编写自包含的 Markdown 或 Jupyter 文档。
安全提示
图片使用 Canvas API 在你的浏览器本地解码、处理和编码，不会上传到任何服务器。
常见问题
为什么 Base64 比我的文件更大？
Base64 每 3 个字节使用 4 个文本字符，因此编码后的字符串大约大 33%（再加上填充和 data URI 前缀的几个字节）。
工具会修改或压缩我的图片吗？
不会。它编码的是文件的原始字节。如果想要更小的结果，请先使用图片压缩。
可以把 Base64 转回图片吗？
可以，使用 Base64 转图片工具，它接受 data URI 或纯 Base64，并可下载文件。