图片转BASE64编码

图片转 BASE64 编码工具使用说明

一、功能介绍

本工具可以把图片转换为 Base64 编码，用于将小图片内联到 HTML、CSS 或 JavaScript 中，减少一次 HTTP 请求。支持：

• 拖拽或点击上传，支持 PNG、JPG、GIF、WebP、SVG、BMP 等格式，可同时上传多张；
• 输出 Data URI*（data:image/png;base64,xxx）或 *纯 Base64（去掉前缀）；
• 一键生成 HTML <img>*、**CSS background-image**、*JS 变量 代码片段；
• 自动显示原图与 Base64 的体积对比。

二、使用步骤

1. 点击或拖拽图片到左侧上传区（可多张）；
2. 点击左侧图片列表中的任意一张，右侧显示其 Base64 编码；
3. 按需切换「输出格式」（Data URI / 纯 Base64）和「代码片段」（HTML / CSS / JS）；
4. 点击「复制编码」复制结果，或「下载 TXT」保存为文本文件。

三、什么是 Base64？

Base64 是一种把二进制数据*编码成 *64 个可打印 ASCII 字符（A-Z、a-z、0-9、+、/）的编码方式。图片本身是二进制数据，经过 Base64 编码后可以像普通文本一样嵌入 HTML、CSS、JSON 中，无需额外文件请求。

Data URI 格式：

data:[<MIME类型>][;charset=<字符集>][;base64],<数据>

例如一张 PNG 图片的 Data URI：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB...

四、Base64 的优缺点

五、适用场景

• 小图标、装饰图：几 KB 以内的小图内联，省去一次请求；
• 邮件模板：邮件客户端对外链图片支持不一，Base64 内联更稳定；
• 单文件 HTML：把图片内联进单个 HTML 文件，便于分享、离线打开；
• CSS 背景图：小尺寸背景图内联，避免首屏闪烁；
• 数据可视化导出：Canvas 导出图片时使用 Data URI。

六、注意事项

• 体积会变大：Base64 编码后体积约为原图的 4/3（增大约 33%），大图不建议内联；
• 无法缓存：内联图片随宿主文件一起加载，无法单独被浏览器缓存，改动会整体失效；
• GIF 动图：Base64 同样支持，但体积较大；
• SVG 图片：SVG 本身是文本，Base64 后反而更大，建议直接内联 SVG 源码或使用 URL 编码；
• 隐私安全：所有转换均在浏览器本地完成，图片不会上传到任何服务器。

Base64 科普知识

为什么 Base64 会让体积变大？

Base64 用 4 个字符表示 3 个字节（24 位 → 32 位），因此体积会膨胀约 1/3。再加上 Data URI 前缀（data:image/png;base64,），实际增量略高于 33%。

Base64 与 URL 编码的区别

• Base64：把二进制转成可打印字符，用于内联图片、传输二进制数据；
• URL 编码（百分号编码）：把 URL 中的特殊字符转成 %XX 形式，用于安全地拼接 URL 参数。两者用途不同，Base64 不适合直接拼进 URL（+、/、= 需额外处理）。

什么时候用 Base64，什么时候用外链？

浏览器如何解析 Data URI？

浏览器解析 data: URI 时会直接解码并渲染，不会发起网络请求。这也是为什么内联图片在断网时仍能显示，但代价是 HTML/CSS 文件变大，首屏解析时间增加。