图片转 Base64 在线工具：开发者完整指南

将图片转为 Base64，意味着将原始二进制像素编码为可打印的 ASCII 字符，使图片可以内嵌在文本负载中——HTML 文件、JSON 对象、CSS 样式表或 MIME 邮件。本指南涵盖你需要了解的一切：数据 URI 格式、浏览器和 Node.js 转换代码、Python 脚本、性能权衡、MIME 类型、邮件嵌入、安全注意事项，以及如何将 Base64 解码回图像文件。

试用我们的免费图片转 Base64 工具 →

1. 什么是图片 Base64 转换？

Base64 是 RFC 4648 定义的二进制转文本编码方案。它将每 6 位二进制数据映射为 64 个可打印 ASCII 字符之一（A–Z、a–z、0–9、+、/）。由于大多数文本格式（HTTP 头部、HTML 属性、CSS 字符串、JSON 值）不能包含任意二进制字节，Base64 提供了一种通用方式将任何二进制文件嵌入为纯文本。

将图片编码为 Base64 后，输出被包装在数据 URI（RFC 2397）中：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

# General syntax:
data:[<mediatype>][;base64],<data>

# Examples by format:
data:image/png;base64,iVBORw0KGgo...
data:image/jpeg;base64,/9j/4AAQSkZJRgAB...
data:image/svg+xml;base64,PHN2ZyB4bWxu...
data:image/webp;base64,UklGRlYAAABXRUJQ...
data:image/gif;base64,R0lGODlhAQABAAAAACH5...

各部分的含义：

所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持数据 URI，可在任何接受 URL 的地方使用：src 属性、CSS url()、JavaScript Image 对象、Canvas API 等。

2. HTML 和 CSS 中的数据 URL

HTML img src

Base64 图片最常见的用法是替换 <img> 标签的 src URL。浏览器内联解码数据 URI 并渲染图片，无需网络请求：

<!-- Base64 PNG in img src -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmH..."
  alt="App logo"
  width="64"
  height="64"
/>

<!-- Base64 SVG in img src -->
<img
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmci..."
  alt="Checkmark icon"
  width="24"
  height="24"
/>

1×1 透明追踪像素——节省一次 HTTP 往返的经典用例：

<!-- 1x1 transparent GIF tracking pixel -->
<img
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
  alt=""
  width="1"
  height="1"
  style="display:none"
/>

<!-- 1x1 transparent PNG (smaller alternative) -->
<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
  alt=""
/>

无障碍提示：始终包含 alt 文本。纯装饰性图片使用 alt=""。

CSS background-image

数据 URI 可在 CSS url() 函数中使用，非常适合需要随样式表一起加载的小图标、渐变和 UI 元素：

/* Small PNG icon as CSS background */
.notification-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76L...);
  background-size: contain;
  background-repeat: no-repeat;
}

/* WebP hero background */
.hero {
  background-image: url(data:image/webp;base64,UklGRlYAAABXRUJQVlA4IEoA...);
  background-size: cover;
  background-position: center;
  height: 400px;
}

在 CSS 中嵌入 SVG 图像有两种选择：

/* SVG as Base64 in CSS */
.arrow-down {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTQgNmw0IDQgNC00IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NjYiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==);
}

/* SVG as URL-encoded in CSS (often 20% smaller) */
.arrow-down-alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23666' stroke-width='2'/%3E%3C/svg%3E");
}

性能提示：CSS 中优先对 SVG 使用 URL 编码而非 Base64——编码输出更小，浏览器还能跳过 Base64 解码步骤。

JavaScript Image 对象与 Canvas

你可以像普通 URL 一样将数据 URI 赋给 image.src。这对于从数据源或 API 预加载图片很有用：

// Preload an image from a Base64 data URI
const image = new Image();
image.src = 'data:image/png;base64,iVBORw0KGgoAAAAN...';
image.onload = () => {
  console.log('Image loaded — dimensions:', image.width, 'x', image.height);
  document.body.appendChild(image);
};

// Use in Canvas
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
image.onload = () => ctx.drawImage(image, 0, 0);

3. 在 JavaScript（浏览器）中转换图片

FileReader API — 文件输入

FileReader API 是浏览器将用户选择的文件转换为 Base64 数据 URI 的标准方式。它完全异步且无需服务器介入：

// FileReader API: convert file input to Base64 data URI
const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.onload = (e) => {
    const dataUri = e.target.result;
    // "data:image/png;base64,iVBORw0KGgoAAAAN..."

    // Preview in an <img>
    document.getElementById('preview').src = dataUri;

    // Extract just the Base64 part (without the prefix)
    const base64Only = dataUri.split(',')[1];

    // Get MIME type from the data URI
    const mimeType = dataUri.match(/data:([^;]+)/)[1]; // "image/png"
    console.log({ mimeType, base64Length: base64Only.length });
  };

  reader.onerror = () => console.error('FileReader error');
  reader.readAsDataURL(file);  // Triggers onload with data URI
});

现代 async/await 代码的 Promise 封装：

// Promise wrapper — use with async/await
function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload  = (e) => resolve(e.target.result);
    reader.onerror = ()  => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage
async function handleImageUpload(event) {
  const file = event.target.files[0];
  try {
    const dataUri = await fileToDataUri(file);
    const img = document.createElement('img');
    img.src = dataUri;
    document.body.appendChild(img);
  } catch (err) {
    console.error(err);
  }
}

Canvas API — 跨域和 DOM 图片

对于已在 DOM 中渲染（或从 URL 加载）的图片，Canvas API 允许你绘制图片并将其导出为数据 URI。输出 MIME 类型和质量可配置：

// Canvas API: render any image element and export as data URI
function imageElementToBase64(
  imgElement,
  format = 'image/png',   // 'image/jpeg', 'image/webp'
  quality = 0.92           // 0.0–1.0 (only used for JPEG/WebP)
) {
  const canvas = document.createElement('canvas');
  canvas.width  = imgElement.naturalWidth;
  canvas.height = imgElement.naturalHeight;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0);

  return canvas.toDataURL(format, quality);
}

// Convert a DOM image
const img = document.querySelector('#my-logo');
img.onload = () => {
  const pngUri  = imageElementToBase64(img, 'image/png');
  const jpegUri = imageElementToBase64(img, 'image/jpeg', 0.8);
  const webpUri = imageElementToBase64(img, 'image/webp', 0.8);
  console.log('PNG  length:', pngUri.length);
  console.log('JPEG length:', jpegUri.length);  // Usually much smaller for photos
  console.log('WebP length:', webpUri.length);  // Usually smallest
};

CORS 注意：将跨域图片绘制到 Canvas 会污染画布，调用 toDataURL() 时会抛出安全错误。远程服务器必须设置 Access-Control-Allow-Origin: *，且你必须用 crossOrigin="anonymous" 加载图片。

Fetch API — 远程 URL

将远程 URL（同源或启用 CORS）的图片转换为 Base64：

// Fetch + ArrayBuffer: convert remote image URL to Base64
async function urlToBase64(imageUrl) {
  const response = await fetch(imageUrl);
  const blob = await response.blob();

  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload  = (e) => resolve(e.target.result);
    reader.onerror = ()  => reject(new Error('Conversion failed'));
    reader.readAsDataURL(blob);  // blob preserves the MIME type
  });
}

// Usage
const dataUri = await urlToBase64('https://example.com/logo.png');
document.getElementById('logo').src = dataUri;

4. 在 Node.js 中转换图片

同步方式：fs.readFileSync + Buffer

Node.js 通过 Buffer 内置支持 Base64。这是构建脚本和 CLI 工具最简单的方式：

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

// MIME type lookup by extension
const MIME_TYPES = {
  png:  'image/png',
  jpg:  'image/jpeg',
  jpeg: 'image/jpeg',
  gif:  'image/gif',
  svg:  'image/svg+xml',
  webp: 'image/webp',
  avif: 'image/avif',
  ico:  'image/x-icon',
};

function imageToBase64(filePath) {
  const ext      = path.extname(filePath).slice(1).toLowerCase();
  const mimeType = MIME_TYPES[ext] || 'application/octet-stream';
  const data     = fs.readFileSync(filePath);         // Buffer
  const base64   = data.toString('base64');           // Base64 string
  return `data:${mimeType};base64,${base64}`;
}

// Usage
const dataUri = imageToBase64('./logo.png');
console.log(dataUri.substring(0, 60) + '...');
// data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAA...

// Extract just the Base64 string (no prefix) for APIs
const base64Only = fs.readFileSync('./logo.png').toString('base64');

异步方式：fs.promises.readFile

对于生产服务器，优先使用异步版本以避免阻塞事件循环：

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

async function imageToBase64Async(filePath) {
  const ext      = path.extname(filePath).slice(1).toLowerCase();
  const mimeType = { png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg',
                     gif: 'image/gif', svg: 'image/svg+xml', webp: 'image/webp' }[ext]
                   || 'application/octet-stream';
  const data   = await fs.readFile(filePath);    // Buffer (async)
  const base64 = data.toString('base64');
  return `data:${mimeType};base64,${base64}`;
}

// Express.js endpoint: convert uploaded image to Base64 JSON response
app.post('/api/image-to-base64', upload.single('image'), async (req, res) => {
  const dataUri = await imageToBase64Async(req.file.path);
  res.json({ dataUri, size: req.file.size, mimeType: req.file.mimetype });
});

反向转换：Base64 转图像文件

在 Node.js 中将 Base64 字符串解码回二进制文件：

const fs = require('fs');

// Input: full data URI like "data:image/png;base64,iVBOR..."
function dataUriToFile(dataUri, outputPath) {
  // Strip the "data:image/png;base64," prefix
  const base64Data = dataUri.replace(/^data:[^;]+;base64,/, '');
  const buffer = Buffer.from(base64Data, 'base64');
  fs.writeFileSync(outputPath, buffer);
  console.log(`Saved ${buffer.length} bytes to ${outputPath}`);
}

// Input: bare Base64 string (no data URI prefix)
function base64ToFile(base64String, outputPath) {
  const buffer = Buffer.from(base64String, 'base64');
  fs.writeFileSync(outputPath, buffer);
}

// Usage
dataUriToFile('data:image/png;base64,iVBORw0KGgo...', './output.png');
base64ToFile('iVBORw0KGgoAAAANSUh...', './icon.png');

5. 在 Python 中转换图片

base64 模块

Python 标准库的 base64 模块无需外部依赖即可处理编码和解码：

import base64
import mimetypes

def image_to_data_uri(file_path: str) -> str:
    """Convert an image file to a Base64 data URI."""
    # Auto-detect MIME type from file extension
    mime_type, _ = mimetypes.guess_type(file_path)
    if mime_type is None:
        mime_type = 'application/octet-stream'

    with open(file_path, 'rb') as f:
        raw_bytes = f.read()

    encoded = base64.b64encode(raw_bytes).decode('utf-8')
    return f'data:{mime_type};base64,{encoded}'


def data_uri_to_file(data_uri: str, output_path: str) -> None:
    """Decode a Base64 data URI back to a binary file."""
    # Split at the first comma: "data:image/png;base64," + "<data>"
    _header, data = data_uri.split(',', 1)
    binary = base64.b64decode(data)
    with open(output_path, 'wb') as f:
        f.write(binary)


# Usage
uri = image_to_data_uri('logo.png')
print(f"MIME: image/png, Length: {len(uri)} chars")
print(uri[:80] + '...')
# data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...

# Decode back
data_uri_to_file(uri, 'logo_copy.png')

使用 pathlib 的更现代写法：

from pathlib import Path
import base64, mimetypes

def image_to_base64_pathlib(image_path: str | Path) -> str:
    path = Path(image_path)
    mime_type, _ = mimetypes.guess_type(path.name)
    mime_type = mime_type or 'application/octet-stream'
    encoded = base64.b64encode(path.read_bytes()).decode()
    return f'data:{mime_type};base64,{encoded}'

# Works with Path objects or string paths
print(image_to_base64_pathlib(Path('icons') / 'logo.svg')[:80])

提示：使用 mimetypes.guess_type() 从文件扩展名自动确定正确的 MIME 类型，而不是硬编码。

批量处理多张图片

将整个目录的图片转换为内联 CSS 精灵文件：

import base64, mimetypes
from pathlib import Path

def build_css_sprite(image_dir: str, output_css: str, class_prefix: str = 'img') -> None:
    """Convert all images in a directory to a CSS file with Base64 backgrounds."""
    image_dir = Path(image_dir)
    lines = ['/* Auto-generated Base64 CSS sprite */']

    for img_path in sorted(image_dir.glob('*')):
        if img_path.suffix.lower() not in {'.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif'}:
            continue

        mime_type, _ = mimetypes.guess_type(img_path.name)
        mime_type = mime_type or 'application/octet-stream'
        encoded = base64.b64encode(img_path.read_bytes()).decode()
        data_uri = f'data:{mime_type};base64,{encoded}'

        class_name = f'{class_prefix}-{img_path.stem}'
        lines.append(f'.{class_name} {{')
        lines.append(f'  background-image: url({data_uri});')
        lines.append(f'  background-repeat: no-repeat;')
        lines.append(f'  background-size: contain;')
        lines.append(f'}}')
        lines.append('')

    Path(output_css).write_text('\n'.join(lines), encoding='utf-8')
    print(f'Generated {output_css} with {len(lines)} lines')

build_css_sprite('./icons', './dist/icons.css', class_prefix='icon')

6. 常见图像格式的 MIME 类型

数据 URI 中的 MIME 类型告诉浏览器使用哪个图像解码器。类型错误会导致图片静默渲染失败：

注意：对于 image/svg+xml，在很多场景下完全不需要 Base64——可以使用 URL 编码的 SVG，甚至在 HTML 中直接用内联 <svg> 元素。只有当值必须是不含特殊字符的单一连续字符串时，才需要 Base64。

7. CSS 精灵图 vs. Base64 内联图片

HTTP/2 之前，CSS 精灵图是减少图标 HTTP 请求的主流技术。Base64 内联图片是另一种各有权衡的替代方案：

CSS 精灵图

/* CSS Sprites — external file, cached by browser */
.icon {
  background-image: url('/sprites/icons.png');
  background-repeat: no-repeat;
  display: inline-block;
  width: 24px;
  height: 24px;
}
.icon-home     { background-position:   0    0; }
.icon-settings { background-position: -24px  0; }
.icon-search   { background-position: -48px  0; }
.icon-user     { background-position: -72px  0; }

优点：文件被浏览器缓存并跨页面共享。合并图片只需下载一次并无限期留在浏览器缓存中。更新一个图标不会使其他图标的缓存失效。

缺点：需要构建步骤来生成精灵表并更新 background-position 值。随着图标集增长维护难度增加。无法使用纯 CSS 样式（改变颜色需要新的精灵图）。

Base64 内联图片

/* Base64 inline — zero HTTP requests, not cached separately */
.icon-home {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTMgOWw5LTcgOSA3djExYTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yeiIvPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
}

优点：零 HTTP 请求。自包含——无外部依赖。非常适合单文件 HTML 文档、邮件模板和便携小部件。

缺点：无法单独缓存——嵌入在 HTML/CSS 中，每次页面加载都会重新发送图片字节。共享同一图标的每个页面都必须包含自己的 Base64 字符串副本。

结论：有了 HTTP/2，精灵图和 Base64 的重要性都降低了，因为浏览器可以通过单个连接多路复用许多小请求。大多数生产场景建议使用配合 CDN 的外部文件。

8. 性能：Base64 vs. 外部图片的选择

Base64 嵌入是一种性能权衡，并非万能优化：

适合使用 Base64 的情况：

应该避免 Base64 的情况：

经验法则：如果这张图片小到你不会为它创建单独文件，就内联它。否则，作为外部文件提供并充分利用浏览器缓存。

9. 文件大小影响：约 33% 的开销

Base64 将 3 字节二进制数据编码为 4 个 ASCII 字符（每个字符携带 6 位，4 × 6 = 24 位 = 3 字节）。这个比例使编码字符串的大小增加 33.33%：

# The math behind Base64 size increase:
# Base64 encodes 3 bytes → 4 characters
# Ratio: 4/3 = 1.3333... → 33.33% larger

# Example encoding:
# Input:   3 bytes   [0x48 0x65 0x6C]  (binary: "Hel")
# Binary:  01001000 01100101 01101100
# Split 6: 010010 000110 010101 101100
# Index:   18     6      21     44
# Chars:   S      G      V      s       ("SGVs")

# Padding: if input is not a multiple of 3, = is appended
# 1 remaining byte  → 2 Base64 chars + "=="
# 2 remaining bytes → 3 Base64 chars + "="

真实大小对比：

使用 gzip/brotli 压缩后，实际传输增加仅约 10–15%，而非完整的 33%，因为 Base64 输出（重复的 ASCII 模式）压缩效果很好。大多数现代 HTTP 服务器和 CDN 默认应用 gzip。在决策时考虑这一点——一张 5 KB 的图片经过 33% 开销后未压缩为 6.67 KB，但压缩后约为 5.5 KB。

填充：Base64 使用 = 填充字符确保输出长度始终是 4 的倍数。10 字节输入产生 16 个 Base64 字符（14 个数据字符 + 2 个填充字符）。填充在某些场景（如 JWT）中可以省略，但在数据 URI 中必须保留。

10. 邮件嵌入：Content-Transfer-Encoding

电子邮件是 Base64 最重要的使用场景之一，但规则与 HTML 不同。MIME 邮件标准定义了 Content-Transfer-Encoding 来指示 MIME 部分的编码方式：

方法 A：内联数据 URI（支持有限）

将 Base64 数据 URI 直接嵌入 src 属性在 Apple Mail 和 Thunderbird 中有效，但 Gmail 会将其过滤作为安全措施。Outlook 的支持不一致：

<!-- Inline data URI in email (Apple Mail + Thunderbird only) -->
<html>
<body>
  <img
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU..."
    alt="Company Logo"
    width="200"
    height="50"
    style="display:block;"
  />
  <p>Thank you for your order!</p>
</body>
</html>

客户端支持：

方法 B：CID（Content-ID）嵌入——推荐

生产邮件的正确方式是使用多部分 MIME 消息进行 CID 嵌入。图片作为独立的 MIME 部分附加并通过 Content-ID 引用：

// Node.js + Nodemailer: CID image embedding (works in all clients)
const nodemailer = require('nodemailer');

const transporter = nodemailer.createTransport({ /* SMTP config */ });

await transporter.sendMail({
  from: 'no-reply@yourcompany.com',
  to: 'customer@example.com',
  subject: 'Your Order Confirmation',
  html: `
    <div style="font-family: Arial, sans-serif;">
      <img
        src="cid:company-logo"
        alt="Company Logo"
        width="180"
        height="45"
        style="display:block; margin-bottom:20px;"
      />
      <h1>Order #12345 Confirmed!</h1>
      <p>Thanks for your purchase. We will ship within 24 hours.</p>
      <img
        src="cid:product-image"
        alt="Your product"
        width="300"
        height="300"
      />
    </div>
  `,
  attachments: [
    {
      filename: 'logo.png',
      path: './assets/logo.png',
      cid: 'company-logo',     // matches src="cid:company-logo"
    },
    {
      filename: 'product.jpg',
      path: './assets/product.jpg',
      cid: 'product-image',    // matches src="cid:product-image"
    },
  ],
});

CID 嵌入被 Gmail、Outlook、Apple Mail、Thunderbird 以及几乎所有其他邮件客户端支持。这是事务性和营销邮件的推荐方式。

11. 安全注意事项：数据 URL XSS 风险

数据 URI 功能强大，但存在每位开发者都应了解的安全隐患：

通过 data:text/html 和 data:application/javascript 注入 HTML 和 JavaScript

数据 URI 不限于图片。恶意行为者可以构造执行 JavaScript 的数据 URI：

// Malicious data URI examples — DO NOT execute
// data:text/html,<script>alert('XSS')</script>
// data:text/html;base64,PHNjcmlwdD5hbGVydCgnWFNTJyk8L3NjcmlwdD4=
// data:application/javascript,alert(document.cookie)

// These can be used to steal cookies, perform CSRF, and exfiltrate data
// if injected into an unsanitized innerHTML or href attribute

现代浏览器已逐步限制数据 URI：

数据 URI 的 CSP 配置

在 Content Security Policy 头部中，明确指定仅允许图片使用数据 URI：

# Nginx: strict CSP allowing data URIs only for images
add_header Content-Security-Policy "
  default-src 'self';
  img-src 'self' data: https:;
  script-src 'self';
  style-src 'self' 'unsafe-inline';
" always;

# Express.js with helmet
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc:  ["'self'"],
    imgSrc:      ["'self'", "data:", "https:"],
    scriptSrc:   ["'self'"],
    styleSrc:    ["'self'", "'unsafe-inline'"],
  },
}));

避免使用 default-src data:——这会允许脚本、样式等资源类型使用数据 URI，打开 XSS 攻击面。

SVG 特有风险

嵌入的 SVG 图片可以包含 <script> 标签。当 SVG 通过 <img src="data:image/svg+xml..."> 加载时，大多数浏览器会对脚本进行沙箱化。但如果通过 innerHTML 将 SVG 渲染为内联 HTML，脚本会执行。在渲染用户提供的 SVG 内容之前，始终使用 DOMPurify 等库进行净化。

// UNSAFE: rendering user-supplied SVG as innerHTML
// NEVER do this with untrusted input:
document.getElementById('icon').innerHTML = userSuppliedSvg;
// <svg><script>alert(1)</script></svg>  →  executes!

// SAFE: use DOMPurify to sanitize before rendering
import DOMPurify from 'dompurify';
const cleanSvg = DOMPurify.sanitize(userSuppliedSvg, {
  USE_PROFILES: { svg: true },   // Allow safe SVG elements
  FORBID_TAGS: ['script'],       // Explicit block (also covered by default)
});
document.getElementById('icon').innerHTML = cleanSvg;

// ALSO SAFE: load SVG via <img src="data:image/svg+xml;base64,...">
// Scripts inside SVGs are sandboxed in <img> context (cannot access parent DOM)

Gmail 过滤数据 URI

Gmail 在渲染前会故意从邮件中去除所有 data: URI 属性。这是防止邮件中钓鱼和 XSS 攻击的安全特性。邮件图片请使用 CID 嵌入或外部 HTTPS 图片 URL。

12. 将 Base64 解码回图片

浏览器：触发下载

在浏览器中解码 Base64 数据 URI 并作为文件下载：

// Browser: trigger download of a Base64 image
function downloadBase64Image(dataUri, filename = 'image.png') {
  const link = document.createElement('a');
  link.href     = dataUri;      // full "data:image/png;base64,..." string
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// Usage
downloadBase64Image('data:image/png;base64,iVBORw0KGgo...', 'logo.png');
downloadBase64Image('data:image/svg+xml;base64,PHN2Zy...', 'icon.svg');

浏览器：在 img 标签中显示

直接将数据 URI 赋给图片元素——浏览器自动处理解码：

// Browser: render decoded image without downloading
const base64String = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY...';
const mimeType     = 'image/png';

const img = document.getElementById('output');
img.src = `data:${mimeType};base64,${base64String}`;
img.alt = 'Decoded image';

Node.js：写入磁盘

使用带 "base64" 编码的 Buffer.from() 转换回二进制：

const fs = require('fs');

// From a data URI string
const dataUri = 'data:image/png;base64,iVBORw0KGgoAAAAN...';
const base64  = dataUri.replace(/^data:[^;]+;base64,/, '');
fs.writeFileSync('decoded.png', Buffer.from(base64, 'base64'));

// From a bare Base64 string (no prefix)
const rawBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY...';
fs.writeFileSync('icon.png', Buffer.from(rawBase64, 'base64'));

console.log('File written:', fs.statSync('decoded.png').size, 'bytes');

Python：使用 base64.b64decode 解码

Python 标准库通过单个函数调用处理解码：

import base64

# Decode from data URI
data_uri = 'data:image/png;base64,iVBORw0KGgoAAAAN...'
header, encoded = data_uri.split(',', 1)
image_bytes = base64.b64decode(encoded)
with open('decoded.png', 'wb') as f:
    f.write(image_bytes)

# Decode from bare Base64 string
raw_base64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAY...'
image_bytes = base64.b64decode(raw_base64)
with open('icon.png', 'wb') as f:
    f.write(image_bytes)

print(f'Decoded {len(image_bytes)} bytes')

命令行（Linux / macOS）

从仅包含 Base64 字符串（无数据 URI 前缀）的文件中解码：

# Decode Base64 file to image (Linux / macOS)
base64 --decode < image.b64 > decoded.png

# Or using openssl
openssl base64 -d -in image.b64 -out decoded.png

# If the input has the data URI prefix, strip it first:
# data:image/png;base64,iVBOR... → iVBOR...
sed 's/^data:[^,]*,//' image-with-prefix.txt | base64 --decode > decoded.png

# PowerShell (Windows)
$base64 = Get-Content -Path 'image.b64' -Raw
$bytes = [Convert]::FromBase64String($base64.Trim())
[System.IO.File]::WriteAllBytes('decoded.png', $bytes)

试用我们的免费图片转 Base64 工具 →

常见问题

Base64 和数据 URI 有什么区别？

Base64 是编码算法。数据 URI 是一种 URL 方案，用 MIME 类型前缀包装 Base64 编码的数据。所以 "data:image/png;base64,iVBOR..." 是包含 Base64 编码 PNG 的数据 URI。你不能在 img src 中直接使用裸 Base64 字符串——需要完整的数据 URI，包括方案、MIME 类型和编码指示符。

转换图片时如何自动获取 MIME 类型？

在浏览器中，FileReader API 根据文件的魔术字节返回包含正确 MIME 类型的完整数据 URI——无需猜测。在 Node.js 中，使用 "mime-types" npm 包；在 Python 中使用标准库的 "mimetypes"。也可以通过文件扩展名查找表推断 MIME 类型：{ "png": "image/png", "jpg": "image/jpeg", "svg": "image/svg+xml", "webp": "image/webp" }。

可以在 React 和 Next.js 中使用 Base64 图片吗？

可以。在 React 中，直接将 Base64 数据 URI 用作 src 属性：<img src="data:image/png;base64,..." alt="..." />。在 Next.js 中，next/image 组件在 blurDataURL 属性中接受数据 URI 用于渐进式加载效果。对于构建时优化，在构建时导入图片，转换为数据 URI 并作为模块常量导出。避免嵌入大图——Next.js 图片优化仅适用于外部文件。

Base64 嵌入会影响核心 Web 指标或 SEO 吗？

Base64 嵌入的图片无法被搜索引擎单独索引——不会出现在 Google 图片搜索中。对于 LCP（最大内容绘制），将关键首图内联为 Base64 实际上可以通过消除图片请求改善 LCP，但仅适用于小图。大型 Base64 图片会使 HTML 负载膨胀，延迟解析，损害 FCP 和 LCP。出于 SEO 考虑，内容图片始终使用带描述性文件名和 alt 文本的外部 URL。

Base64 数据 URI 的最大大小是多少？

RFC 2397 未定义大小限制。实际浏览器限制各有不同：Internet Explorer 有 32 KB 的限制（旧版）。现代浏览器（Chrome、Firefox、Edge、Safari）支持数兆字节的数据 URI。但性能影响使超过 10 KB 的情况不可取。某些旧版浏览器的 CSS 解析器对嵌入样式表中的超长数据 URI 也存在问题。

为什么我的 Base64 图片显示为损坏图标？

常见原因：(1) MIME 类型错误——如写了 "data:image/png;base64,..." 但数据实际上是 JPEG；(2) Base64 字符串被截断——字符串被切断；Base64 长度必须是 4 的倍数（必要时用 = 填充）；(3) 数据 URI 前缀缺失或格式错误——"data:" 方案、MIME 类型和 ";base64," 必须全部存在；(4) Base64 字符串内有换行符——某些编码器每 76 个字符插入换行；在数据 URI 中使用前去除所有空白字符；(5) 双重编码——Base64 字符串被二次编码。

Base64 是一种加密方式吗？

不是。Base64 纯粹是一种编码方案——它在视觉上混淆数据但提供零安全性。任何人都可以立即解码 Base64 字符串。不要使用 Base64 来"隐藏"敏感信息。真正的加密请使用 AES-256 等密码学算法。Base64 有时被误认为是加密，因为编码后的数据看起来像随机字符，但它完全可以无需密钥地逆转。

如何减小 Base64 编码图片的文件大小？

在编码前优化源图片：(1) 使用合适的格式——矢量图用 SVG，照片用 WebP 或 AVIF；(2) 减小图片尺寸——48x48 的图标不需要是 512x512；(3) 编码前用 Squoosh、ImageOptim 或 sharp 等工具压缩；(4) PNG 图标使用索引色（8 位）而非 RGBA（32 位）；(5) 考虑将 SVG 转换为 URL 编码格式而非 Base64——通常小 20–30%。我们的工具在编码前会自动去除不必要的元数据。