DevToolkit Pro

什么是 Base64 编码

Base64 是一种将二进制数据转换为 ASCII 文本的编码方式。它使用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示任意二进制数据。你可以使用我们的 图片转 Base64 工具，快速将任意图片转换为可内联的 Data URI。

编码原理

原始数据（图片）：2 字节二进制
    ↓ Base64 编码
Base64 文本：约 4 字节 ASCII 文本

Base64 编码后的数据大小约为原始数据的 133%（增加约 1/3）。

为什么需要图片转 Base64

1. 内联图片：HTML/CSS 中直接嵌入小图片，减少 HTTP 请求
2. Data URI：在 HTML 中使用 data:image/png;base64,... 内联图片
3. JSON 传输：通过 API 传输图片数据（Base64 字符串）
4. 邮件附件：邮件系统中传输二进制文件
5. 数据库存储：某些数据库不支持二进制类型，用文本存储
6. 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 | 不适合大图片 |

如何使用在线工具

使用 DevToolkit Pro 的 图片转 Base64 工具：

1. 拖拽或点击上传图片
2. 支持 PNG、JPG、GIF、WebP 等格式
3. 实时显示 Base64 编码结果
4. 一键复制编码后的文本
5. 显示编码后的文件大小对比

代码中的图片转 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 的图片
• ❌ 频繁更新的图片

FAQ

Base64 编码后的字符串能还原成图片吗？

可以。Base64 是无损编码，任何 Base64 编码器都能还原。使用 atob() 解码为二进制数据，再写入文件即可。

为什么 Base64 后的图片体积变大了约 33%？

Base64 使用 6 个 bit 表示原始 8 个 bit 的数据，导致编码后数据量增加约 1/3。这是编码方式的固有开销。

小图用 Base64 还是引用？

小于 5KB 的图标建议用 Base64，可以减少 HTTP 请求。大于 10KB 的图片建议传统引用，因为文件大小增加会抵消请求减少的收益。

本文由 DevToolkit Pro 提供。更多开发者工具请访问 首页。