图片转 Base64 — 在浏览器中将图片转为 Base64 Data URL
将图片转换为 Base64 data URL，用于嵌入 HTML、CSS 或 JSON。完全在浏览器中运行。无上传、无账号、无限制。
Drop your image here
PNG, JPG, WebP, GIF, SVG, BMP (max 10MB)
图片的 Base64 编码解决的是一个具体问题：只接受文本的上下文需要承载一张图片。需要这种处理方式的场景包括 HTML 邮件（大多数邮件客户端默认不加载远程图片）、CSS 文件（没法在没有 URL 的情况下引用二进制数据）、JSON 载荷（必须是合法的 UTF-8）、代码注释和 README（二进制附件无法跨 git 托管平台移植），以及单文件 HTML 导出中内联 SVG 式的用法。编码本身和文本用的 Base64 一样 —— 每 3 个输入字节变成 4 个 ASCII 字符 —— 但 data URL 的包裹（data:image/png;base64,...）告诉解码器该用哪种 MIME 类型。
不那么显然的决策是：什么时候用 data URL，什么时候用单独的文件。小图用 data URL 的理由很充分：2 KB 的 favicon 用 data URL 可以省掉一次额外 HTTP 请求，并随父文档一起发布。大图反着用：500 KB 的首屏大图用 data URL 会把 HTML 撑大 33% 到 665 KB，浏览器没法独立缓存，并且必须把整个载荷解码完才能渲染。实际阈值大约在 10 KB 左右 —— 之下 data URL 胜出，之上单独文件胜出。
最后的交接建议：如果目的地是 HTML 邮件，data URL 通常是保证图片能渲染的唯一办法 —— 大多数邮件客户端默认屏蔽远程图片。如果目的地是包含小重复图案或图标的 CSS 文件，data URL 能让样式自包含。如果目的地是 JSON API 载荷或数据库字段，data URL 是正确格式 —— JSON 不加包装就无法直接承载二进制。如果目的地是多个页面共用同一张图片的公开网站，用 URL 引用的单独文件才是正确选择。
使用方法
拖入一张或多张图片
把 JPG、PNG、WebP、GIF 或 BMP 文件拖入拖放区，或从剪贴板粘贴。每个文件在本地读取，Base64 编码在你的浏览器标签页内完成。
选择输出格式
可选 data URL（`data:image/png;base64,iVBORw0KGgo...`，用于 HTML/CSS 嵌入）、原始 Base64（不带前缀，用于 JSON 或 YAML 载荷），或者对超大图片使用分块输出。
复制或下载结果
把编码字符串复制到剪贴板，或下载为 .b64.txt 文件。输出保留源 MIME 类型，所以 data URL 可以直接粘贴进 `<img src=...>` 属性。
常见问题
什么时候应该把图片以 Base64 data URL 的形式嵌入？
适合那些需要随父文档一起加载、并避免额外 HTTP 请求的小图片（图标、10 KB 以下的 UI 元素）。较大的图片更适合用 URL 引用的单独文件 —— Base64 会让载荷膨胀 33%，并且浏览器无法单独缓存 data URL。
data URL 会保留图片格式吗？
会 —— MIME 类型前缀与源格式对应（PNG 对应 `data:image/png;`，JPG 对应 `data:image/jpeg;`，WebP 对应 `data:image/webp;`，GIF 对应 `data:image/gif;`）。浏览器依据 MIME 类型选择解码器，所以 data URL 可以无损往返。
支持的最大尺寸是多少？
除了浏览器标签页的可用内存外，没有硬性上限。10 MB 的图片编码后大约是 13.3 MB 的 Base64 文本，现代浏览器基本都能容纳。超大图片（50 MB 以上）请慎重考虑是否真的要用 data URL —— 编码后的字符串会变得难以处理。
data URL 能在 CSS 里用吗？
可以 —— `background-image: url(data:image/png;base64,iVBOR...)` 是合法的 CSS。data URL 内联进样式表后随父资源一起发布。如果同一张图片要反复使用，单独的文件更高效，因为编码后的载荷无法被单独缓存。
能这样编码 SVG 图片吗？
可以 —— SVG 同样可以用这种方式编码成 Base64。但 SVG 本身就是文本，可以直接内联到 HTML 里，不需要走 Base64 这步。只有当 SVG 出现在 CSS 上下文里，或 JSON 载荷要求按二进制-文本编码时，Base64 形式才有意义。
限制说明
- 33% 的体积开销Base64 总是把输入膨胀 4/3。100 KB 的图片会变成 133 KB 的 data URL。对大图而言，这是在图片本来体积之上的显著代价 —— 而且浏览器无法单独缓存 data URL。
- 没有解码往返本工具只做编码。要验证输出或把图片还原回去，请使用「Base64 转图片」工具。编码本身是无损且可逆的 —— 解码后的字节与源文件按位一致。
- 不适合大图对 100 KB 以上的图片，嵌成 data URL 通常是错误的选择。HTTP 请求开销本来就很小，data URL 又无法独立缓存，内联的载荷还会撑大父文档。请改用 URL 引用的单独图片文件。
平台说明
- macOS
- Safari 和 Chrome 在 `<img>` 和 CSS 上下文中都能解码 data URL。当需要把图片转为字符串塞进 README 徽章、代码注释或内联 CSS 规则，而单独托管文件又不现实时，浏览器工具是最合适的选择。
- Windows
- Edge 和 Chrome 在 HTML 和 CSS 中渲染 data URL 没有任何问题。当需要把小的 UI 图标塞进 CSS 文件或 JSON manifest，而单独的资源会破坏部署时，浏览器工具是最合适的选择。
- Linux
- 命令行场景下，`base64 -w 0 image.png` 可以直接产出原始 Base64。需要自动补上 `data:image/png;base64,` 前缀，或一次性批量编码多张图片时，浏览器工具是最合适的选择。
- Web
- 完全在客户端运行。页面加载后可离线使用。在没法用命令行工具的受限环境里很实用，也适合把从聊天窗口或邮件里复制来的内容直接变成内联资源。