在线图片转 Base64 工具：将图片编码为文本字符串

encode2026-07-252 分钟阅读

什么是 Base64 编码

Base64 是一种将二进制数据转换为 ASCII 文本的编码方式。它使用 64 个可打印字符（A-Z、a-z、0-9、+、/）来表示任意二进制数据。

编码原理

原始数据（图片）：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 | 不适合大图片 |

如何使用在线工具

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

拖拽或点击上传图片
支持 PNG、JPG、GIF、WebP 等格式
实时显示 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}`;
}