如何将图片转换为 Base64 字符串

为什么要将图片转为 Base64

将图片转换为 Base64 字符串有多种实际用途：可以将图片直接嵌入 HTML 或 CSS 中，减少页面的 HTTP 请求数；可以通过 JSON API 传输图片数据；可以在不使用文件系统的环境中存储和处理图片；还可以创建独立的单文件 HTML 页面，其中所有图片都内嵌为 Base64。

这种技术特别适合小图标（favicon、按钮图标、装饰性元素），这些元素体积小，作为 Base64 嵌入不会显著增加页面大小。对于大型图片，则建议仍然使用 URL 引用方式，以保持浏览器缓存的优势。

使用在线工具转换图片

最简单的方法是使用在线 Base64 图片转换工具。只需上传图片文件，工具会自动读取图片的二进制数据，进行 Base64 编码，并生成完整的 Data URI 字符串（包含 MIME 类型前缀）。通常工具还会提供即时预览和一键复制功能。

使用在线工具时，建议处理不含敏感信息的图片资源。对于包含个人隐私的照片，应使用本地方法（命令行或代码）进行转换，避免将图片上传到第三方服务器。

在浏览器中用 JavaScript 转换

// 方法1：使用 FileReader API
// Method 1: Using FileReader API
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result); // 完整 Data URI
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 方法2：使用 Canvas API（可同时压缩/转格式）
// Method 2: Using Canvas API (can also compress/convert format)
function imageToBase64WithCanvas(file, format = 'image/jpeg', quality = 0.8) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      URL.revokeObjectURL(url);
      resolve(canvas.toDataURL(format, quality));
    };
    img.src = url;
  });
}

在 Python 中转换图片

import base64
import mimetypes
from pathlib import Path

def image_to_base64(image_path):
    """将图片文件转换为 Data URI 格式的 Base64 字符串"""
    path = Path(image_path)
    mime_type, _ = mimetypes.guess_type(image_path)
    if mime_type is None:
        mime_type = 'application/octet-stream'

    with open(path, 'rb') as f:
        encoded = base64.b64encode(f.read()).decode('ascii')

    return f"data:{mime_type};base64,{encoded}"

# 使用示例 / Usage
data_uri = image_to_base64('logo.png')
print(data_uri[:60])  # 预览前60字符

# 在 HTML 中使用 / Use in HTML
html = f''

在 Node.js 中转换图片

const fs = require('fs');
const path = require('path');

function imageToBase64(imagePath) {
  const ext = path.extname(imagePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
  };
  const mimeType = mimeTypes[ext] || 'application/octet-stream';
  const data = fs.readFileSync(imagePath);
  const base64 = data.toString('base64');
  return `data:${mimeType};base64,${base64}`;
}

const dataURI = imageToBase64('./images/banner.jpg');
console.log(`Image size: ${dataURI.length} chars`);

在 HTML 和 CSS 中使用 Base64 图片

获得 Data URI 后，可以在多种场景中使用。在 HTML img 标签中：<img src="data:image/png;base64,..." alt="图片">。在 CSS background-image 中：background-image: url('data:image/png;base64,...')。在 CSS 的 content 属性中（伪元素）：content: url('data:image/png;base64,...')。

Data URI 也可以在电子邮件模板中使用，但需注意部分邮件客户端（如 Gmail）会过滤或阻止 Data URI 的显示。对于邮件图片，通常更可靠的方式是使用 CID（Content-ID）引用内嵌附件，或直接使用外部 URL。

性能注意事项

Base64 图片嵌入虽然减少了 HTTP 请求，但也有代价。首先，Base64 编码使图片体积增大约 33%。其次，浏览器无法对内嵌的 Base64 图片进行单独缓存——每次页面加载都需要重新解析整个文档，而如果图片通过 URL 引用，浏览器可以将图片单独缓存在磁盘上。

经验法则：对于小于 5KB 的图片（如 favicon、小图标），Base64 嵌入是合适的。对于 5–20KB 的图片，需要根据具体场景权衡。对于超过 20KB 的图片，强烈建议使用 URL 引用。现代 Web 开发工具（如 Webpack、Vite）通常有阈值配置，自动决定是否将图片转为 Base64。

批量转换多张图片

import base64
import json
from pathlib import Path

def batch_convert_to_base64(image_dir, output_json):
    """批量将目录中所有图片转为 Base64 并输出 JSON"""
    result = {}
    image_extensions = {'.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'}

    for img_path in Path(image_dir).iterdir():
        if img_path.suffix.lower() in image_extensions:
            with open(img_path, 'rb') as f:
                encoded = base64.b64encode(f.read()).decode('ascii')
            result[img_path.name] = encoded

    with open(output_json, 'w') as f:
        json.dump(result, f, indent=2)

    print(f"Converted {len(result)} images")

batch_convert_to_base64('./icons', './icons_base64.json')