如何将图片转换为 Base64 data URL

2026-07-19· 标签: image-to-base64, base64, data-url, image-embedding, web-performance, html, css

什么是 Base64 图片 data URL？

Base64 图片 data URL 将整个图片文件以文本字符串的形式直接嵌入 Web 文档中，无需单独的 HTTP 请求来加载图片。无需浏览器获取外部文件，图片数据已经存在于 HTML 或 CSS 中。

格式如下所示：

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

分解一下：

data: — data URI 方案前缀
image/png — 嵌入图片的 MIME 类型
;base64 — 表示 Base64 编码
,iVBORw0... — 实际的 Base64 编码图片数据

为什么要将图片转换为 Base64？

在以下几种场景中，将图片嵌入为 Base64 很有用：

减少 HTTP 请求

每张外部图片文件都需要一个单独的 HTTP 请求。Base64 data URL 消除了这些请求，从而可以改善页面加载时间——尤其是在高延迟连接或包含许多小资源的页面上。

自包含文档

Base64 图片使你的 HTML 文件完全可移植。包含 Base64 图片的电子邮件模板即使在收件人的邮件客户端阻止外部资源时也能正常工作。同样，包含嵌入图片的 HTML 文档可以作为一个单独的文件共享，无需担心图片路径失效的问题。

性能关键型页面

对于首屏以上的 hero 图片和关键 UI 元素，消除额外的往返请求可以改善 Largest Contentful Paint（LCP）等指标。然而，这仅对小图片有益——对于大图片，内联反而会适得其反。

离线可用

当图片以 data URL 形式嵌入时，它无需网络访问即可工作。这对于离线 Web 应用和渐进式 Web 应用（PWA）很有价值。

如何将图片转换为 Base64

方法 1：使用在线工具（最简单）

将图片转换为 Base64 最快的方法是使用专用的在线工具。将图片上传或拖放到我们的免费在线 Base64 编码器，你将获得完整的 data URL，可直接粘贴到你的代码中。

方法 2：在浏览器中使用 JavaScript

FileReader API 提供了一种将用户选择的图片转换为 Base64 的简单方法：

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// 与文件输入一起使用
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // 输出：data:image/jpeg;base64,/9j/4AAQ...
});

方法 3：使用 Canvas API

如果需要在转换为 Base64 之前调整大小、裁剪或压缩图片，Canvas API 是正确的方法：

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// 示例：在转换前调整图片大小
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

方法 4：使用 Node.js

在服务器端，使用 fs 模块和 Buffer 将图片文件转换为 Base64：

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

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // 从扩展名检测 MIME 类型
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

方法 5：使用命令行

在 Linux 和 macOS 上，你可以使用内置的 base64 命令：

# 编码为 Base64 并包装为 data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

如何在 HTML 中使用 Base64 图片

直接放在 <img> 标签中：

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="内联 Logo"
  width="200"
  height="100"
/>

如何在 CSS 中使用 Base64 图片

作为背景图片：

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

性能注意事项和最佳实践

Base64 图片有帮助的情况

小于 10 KB 的小图标和 UI 元素
阻塞渲染的关键首屏图片
页面中使用的精灵图和 SVG 图标
外部图片经常被阻止的电子邮件模板
离线优先的 Web 应用和自包含文档

Base64 图片有害的情况

大型照片或高分辨率图片（100 KB 以上）——Base64 的开销和解析延迟会损害性能
频繁变化的图片——为大型 HTML 负载使浏览器缓存失效是浪费的
在多个页面间共享的图片——外部文件受益于共享的浏览器缓存
CDN 托管的图片——CDN 比内联数据能更好地优化文件交付

10 KB 经验法则

一个被广泛引用的准则：如果图片小于 10 KB，考虑将其内联为 Base64。如果更大，则作为单独的文件提供。这平衡了 HTTP 请求的开销与 HTML 中 Base64 编码数据的开销。

然而，最佳阈值取决于你的具体情况：

HTTP/2 多路复用降低了多个请求的代价，使外部文件更具吸引力
在慢速连接上，即使对较大的图片，消除请求也可能很有价值
对于关键渲染路径上的资源，即使图片较大也内联，只要这意味着少一次往返请求

压缩考虑

如果你正在将 JPEG 或 PNG 图片转换为 Base64，请考虑改用 WebP。WebP 在相同质量水平下提供更优越的压缩比，从而产生更小的 Base64 字符串。许多在线工具允许你在转换为 Base64 之前重新编码图片。

将你的图片转换为 Base64

准备好直接在代码中嵌入图片了吗？使用我们的免费在线 Base64 编码器和解码器上传图片，并为 HTML、CSS 和 JavaScript 获取完整的 data URL——无需安装。