图片 ↔ Base64 双向转换,一键复制,前端内联图片必备
Base64 是一种用 64 个可打印字符(A-Z、a-z、0-9、+、/)表示二进制数据的编码方式。它把每 3 个字节(24 位)拆成 4 组 6 位,每组对应一个字符。
因为 6 位只能表示 0–63,正好对应 64 个字符,所以编码后的数据体积会膨胀约 33%(3 字节变 4 字符)。这也是 Base64 图片比原文件大的原因。
用在网页里时通常写成 Data URL 形式:data:image/png;base64,xxxx。浏览器能直接识别并把这段文本当作图片资源加载,省掉一次 HTTP 请求。
下面这些情况用它最顺手:
把小图标转成 Base64 写进 CSS/HTML,减少请求数
把接口返回的 Base64 图片还原出来看效果
部分邮件客户端要求图片以 Base64 内嵌
把图片嵌入 JSON 或 YAML 配置
| 输入 | 图片文件 或 Base64 字符串(带不带 data: 前缀均可) |
|---|---|
| 输出 | Data URL 形式(data:image/...;base64,) |
| 支持格式 | PNG / JPG / WebP / GIF / SVG |
| 体积变化 | 编码后约为原文件的 1.33 倍 |
| 隐私 | 本地转换,不上传 |
Base64 编码本身会让体积增加约 33%,这是编码方式的固有开销。所以大图不建议内联,一般只在几 KB 的小图标上使用。
可以。工具会自动补上 data:image/png;base64, 前缀再解析。如果原图是 JPG 但前缀按 PNG 补,多数浏览器仍能正确识别。
会。请粘贴连续的字符串。如果 Base64 中有换行符,先删除再转换。
图片转 Base64 受浏览器内存限制,通常几十 MB 以内没问题。但超过 1 MB 的图片转成 Base64 后体积会很大,不建议这样用。