在线图片转 Base64 工具：将图片编码为文本字符串
什么是 Base64 编码
Base64 是一种将二进制数据转换为 ASCII 文本的编码方式。它使用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示任意二进制数据。你可以使用我们的 图片转 Base64 工具，快速将任意图片转换为可内联的 Data URI。
编码原理
原始数据（图片）：2 字节二进制
↓ Base64 编码
Base64 文本：约 4 字节 ASCII 文本
Base64 编码后的数据大小约为原始数据的 133%（增加约 1/3）。
为什么需要图片转 Base64
- 内联图片：HTML/CSS 中直接嵌入小图片，减少 HTTP 请求
- Data URI：在 HTML 中使用
data:image/png;base64,...内联图片 - JSON 传输：通过 API 传输图片数据（Base64 字符串）
- 邮件附件：邮件系统中传输二进制文件
- 数据库存储：某些数据库不支持二进制类型，用文本存储
- SVG 外的图标：小图标用 Base64 内联避免额外请求
Base64 在前端的应用
Data URI 内联图片
<!-- 传统方式：需要 HTTP 请求 -->
<img src="/images/logo.png" alt="Logo">
<!-- Base64 内联：零额外请求 -->
<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo">
CSS 内联背景
/* 传统方式 */
.logo { background-image: url('/images/logo.png'); }
/* Base64 内联 */
.logo {
background-image: url('data:image/png;base64,iVBORw0KGgo...');
}
内联图片的优缺点
| 优点 | 缺点 |
|---|---|
| 减少 HTTP 请求 | 图片体积增大约 33% |
| 适合小图标（<5KB） | 无法被浏览器缓存 |
| 无跨域问题 | 增加 HTML/CSS 文件大小 |
| 适合邮件 HTML | 不适合大图片 |
如何使用在线工具
使用 ToolVault 工具匣 的 图片转 Base64 工具：
- 拖拽、点击上传，或从剪贴板粘贴图片
- 支持 PNG、JPG、GIF、WebP 等常见格式
- 用输出芯片切换：Data URI、纯 Base64、HTML
img、CSSurl()、Markdown - 对照体积提示（原文件 → 编码后大约涨多少），再一键复制
- 大图建议先走 图片压缩，再编码；还原用 Base64 转图片
代码中的图片转 Base64
JavaScript（浏览器端）
// 使用 FileReader
function imageToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
// 使用
const base64 = await imageToBase64(imageFile);
console.log(base64); // data:image/png;base64,iVBORw0KGgo...
Node.js
const fs = require('fs');
function imageToBase64(filePath) {
const data = fs.readFileSync(filePath);
const base64 = data.toString('base64');
const ext = filePath.split('.').pop();
const mime = { png: 'image/png', jpg: 'image/jpeg', gif: 'image/gif' };
return `data:${mime[ext]};base64,${base64}`;
}
使用建议
什么时候用 Base64？
- ✅ 小图标（<5KB）
- ✅ 装饰性图片
- ✅ 邮件中的图片
- ✅ 减少首屏 HTTP 请求
什么时候不用 Base64？
- ❌ 大图片（>10KB）
- ❌ 需要被缓存的图片
- ❌ 需要独立 URL 的图片
- ❌ 频繁更新的图片
data URI 的得失：哪里赚哪里翻车
内联小图省一次请求——关键路径上 2-4KB 以内的资产（图标、小 logo）合算，请求开销占主导。超过这个阈值天平反转：base64 膨胀 33%、阻塞所在文档（外链图并行加载）、废掉浏览器缓存（图片随每次 HTML 重下，除非文档本身被缓存）。HTTP/2 多路复用已消掉大部分请求开销——data URI 的大多数老场景已被「外链+正确缓存头」取代。保留给真正小且每次渲染可变的图（本次请求生成的图表、外链被禁的邮件）。
邮件：唯一必须 base64 的场合（且仍不可靠）
邮件客户端默认挡外链图（隐私），内联 data URI 是唯一免用户点击就显示的图——但 Outlook 的 Word 渲染器弄坏大 URI、Gmail 剪掉约 102KB 以上的信、部分企业网关整个剥离。能活的模式：内联图压缩后控制在 20-30KB 内、给剥离后也能活的 alt 文本、链到网页版。邮件也是最保守选格式的场合：PNG/JPEG 通吃，WebP/AVIF 支持仍是抽奖。
输出格式怎么选
| 芯片 | 典型粘贴位置 |
|---|---|
| Data URI | img src、部分配置字段 |
| 纯 Base64 | JSON 字段、只要载荷不要前缀 |
| HTML img | 文档或静态页直接贴一整段标签 |
| CSS url() | background-image |
| Markdown | README、Issue、文档站点 |
工具页会显示编码膨胀百分比，方便你在「先压缩」和「直接内联」之间做取舍。
FAQ
Base64 编码后的字符串能还原成图片吗？
可以。Base64 是无损编码。用本站 Base64 转图片 可本地预览并下载；代码里也可用 atob() 解码后写文件。
为什么 Base64 后的图片体积变大了约 33%？
Base64 使用 6 个 bit 表示原始 8 个 bit 的数据，导致编码后数据量增加约 1/3。这是编码方式的固有开销。
小图用 Base64 还是引用？
小于 5KB 的图标适合用 Base64，可以减少 HTTP 请求。大于 10KB 的图片更适合传统引用，因为体积增加会抵消请求减少的收益。
排查注记
「data URI 的得失」把阈值说得很实：关键路径上 2-4KB 以内请求开销占主导、合算，超过就天平反转——膨胀 33%、阻塞所在文档、废掉浏览器缓存；HTTP/2 多路复用消掉大部分请求开销之后，data URI 的大多数老场景已被「外链 + 正确缓存头」取代。邮件一节的标题自带结论——唯一必须 base64 的场合且仍不可靠：Outlook 的 Word 渲染器弄坏大 URI、Gmail 剪掉约 102KB 以上的信、部分网关整个剥离，能活的模式是压缩后控制在 20-30KB 并配好 alt 文本。输出芯片按粘贴位置区分五种形态，因为正确用法取决于载荷要不要 MIME 前缀。
来自 ToolVault 工具匣 的开发手记。相关工具：图片转 Base64、Base64 转图片、图片压缩。首页 汇集了更多浏览器本地工具。