图片转 Base64：HTML、CSS 嵌入与多语言代码示例

你需要将图片直接嵌入 HTML、CSS 或 API 请求中，而不需要单独托管一个图片文件。Base64 编码就能实现这一点——将任何图片转换为一串文本字符串，可以内联粘贴到任何接受文本的地方。

本指南介绍什么是 Base64 编码、编码过程、Data URI 方案、如何在 HTML 和 CSS 中嵌入 Base64 图片、大小与性能的取舍，以及如何使用 BestPNG 转换——并附 JavaScript 和 Python 代码示例。

什么是 Base64 编码？

Base64 是一种将二进制数据（如图片文件）编码为纯 ASCII 文本的方法。它将图片的原始字节转换为由 64 个字符组成的字符串：A-Z、a-z、0-9、+ 和 /，= 用于填充。「base64」这个名字指的就是这套 64 字符字母表。

例如，一个 1x1 像素的红色 PNG 图片编码后变成：

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

这个字符串可以直接用在 HTML 或 CSS 中，无需额外的图片文件或 HTTP 请求。

编码过程详解

将图片转为 Base64 是一个简单、确定性的转换：

1. 图片文件以原始二进制数据（字节序列）的形式读取
2. 字节按每 3 个一组分块（24 位）
3. 每个 24 位块被分为四个 6 位组
4. 每个 6 位组映射到 64 个 base64 字符中的一个
5. 如果最后一块不足 3 个字节，则用 = 字符填充

由于每 3 个字节的数据会变成 4 个字符的文本，编码后总是比原始文件大约 33%。整个过程是确定性的——同一张图片总是生成相同的字符串——解码则完全相反，能无损恢复原始字节。

Data URI 方案

单独的 base64 只是一个字符串。要在 HTML 或 CSS 中将其用作图片，需要将其包装在 data URI 中——一种将数据内联嵌入而非指向外部文件的特殊 URL 格式。

格式如下：

data:[MIME类型];base64,[编码数据]

例如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB...

MIME 类型告诉浏览器要渲染什么类型的图片。常见类型：

在 HTML 和 CSS 中嵌入 Base64 图片

有了 data URI，就可以把它放到任何接受文本的地方。以下是最常用的场景。

在 HTML 中（<img> 标签）

最直接的用法——将 src 的 URL 替换为 data URI：

<!-- 常规图片（外部文件） -->
<img src="/images/icon-check.png" alt="对勾" />

<!-- Base64 嵌入图片（内联） -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAA
AQCAYAAAAf8/9hAAAAM0lEQVR42mNk..." alt="对勾" />

其他属性完全不变——alt 文本、width、height、CSS 类名和事件处理器无论来源是 URL 还是 data URI 都一样工作。

在 HTML 邮件中内联

邮件模板是 base64 图片最常见的应用场景。外部图片经常被邮件客户端屏蔽，显示「点击加载图片」的提示，但内联的 base64 图片可以立即显示。

<table>
  <tr>
    <td>
      <img src="data:image/png;base64,iVBORw0KGgo..."
           alt="公司Logo" width="200" height="50" />
    </td>
  </tr>
</table>

注意： 某些邮件客户端（特别是 Outlook 桌面版）对 base64 图片的支持有限。部署前请在多个客户端中测试，并考虑使用 CID（Content-ID）附件作为备选方案。

在 CSS 中（背景图片）

Base64 data URI 可以在 CSS 中任何使用 url() 的地方使用：

/* 常规背景图片 */
.icon-success {
  background-image: url('/images/check-green.svg');
}

/* Base64 嵌入的背景图片 */
.icon-success {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i
  aHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIg...);
}

这对纯 CSS 图标系统特别有用，可以避免 JavaScript 雪碧图加载或额外的 HTTP 请求。

在 CSS 自定义属性中

你可以将 base64 图片存储在 CSS 自定义属性（变量）中以便复用：

:root {
  --icon-arrow: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);
}

.button-next::after {
  content: '';
  background-image: var(--icon-arrow);
}

作为自定义光标

自定义光标也可以使用 base64：

.draggable {
  cursor: url(data:image/png;base64,iVBORw0KGgo...) 12 12, grab;
}

在 API 请求中（JSON 负载）

通过 JSON API 发送图片时（例如上传小头像或签名），base64 可以将图片数据作为字符串字段包含在内，无需处理 multipart 表单：

{
  "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...",
  "name": "User"
}

在 Markdown 中（支持有限）

![替代文本](data:image/png;base64,iVBORw0KGgo...)

注意：大多数 Markdown 平台（GitHub、Reddit）出于安全原因会阻止 data URI，因此在自有渲染器之外很少能用。

SVG：特殊情况

SVG 图片可以不经过 base64 编码直接内联。由于 SVG 本身就是文本格式（XML），可以改用 URL 编码：

/* Base64 编码的 SVG（可行但浪费） */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...);

/* URL 编码的 SVG（更小，无解码开销） */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
  width='24' height='24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'
  fill='%234CAF50'/%3E%3C/svg%3E");

对于 SVG 文件，URL 编码版本通常比 base64 版本小 20-30%，因为跳过了二进制到文本的编码开销。

什么时候适合使用 Base64 图片

Base64 编码在特定场景下非常有用：

适合的场景：

• 小图标和装饰元素（2-5 KB 以下）——减少额外 HTTP 请求，提升感知加载速度
• 邮件模板 — 内联图片无需收件人手动「加载外部图片」即可显示
• 单文件 HTML 文档 — 自包含的报告、发票或文档页面，不会出现图片链接失效
• API 负载 — 当 API 要求图片以文本字段而非文件上传方式提交时
• 替代 CSS 雪碧图 — 将小图标直接嵌入样式表
• 离线应用 — 将图片以文本形式存储在数据库或配置文件中

不适合的场景：

• 大图片 — 约 33% 的开销会让大文件更臃肿
• 频繁更换的图片 — 每次更改都需重新生成字符串，并使整个文档缓存失效
• 适合缓存的图片 — 嵌入的 Base64 图片无法被独立缓存
• 对性能要求高的页面 — 大量 Base64 字符串会增加初始页面大小并延迟解析

大小的取舍

Base64 编码会将数据大小增加约 33%，因为它用 4 个 ASCII 字符来表示每 3 个字节的二进制数据。

实际开销略高于理论上的 33%，因为 data:image/png;base64, 前缀会增加约 26 个字节，折行会增加更多字节，而且 base64 文本的 gzip 压缩效率不如单独提供的二进制文件。

对于一个 2 KB 的图标，约 740 字节的开销微不足道，节省一次 HTTP 请求是值得的；但对于一张 500 KB 的照片，额外增加约 185 KB 纯粹是给 HTML 或 CSS 文件增负。

经验法则： 5 KB 以下的图片适合 Base64 编码，更大的图片应单独托管并用 URL 引用。对于支持 HTTP/2 的服务器，独立文件更划算的临界点大约在 2-5 KB；HTTP/3 会让这个平衡点进一步降低，因为现代协议处理多个小请求非常高效。

使用 BestPNG 将图片转换为 Base64

BestPNG 的 Base64 转换工具让编码变得非常简单：

1. 打开 bestpng.com/tools/base64
2. 上传图片（支持 PNG、JPG、WebP、GIF、SVG 等格式）
3. 工具即时生成 Base64 字符串
4. 复制字符串——可选择带或不带 data: URI 前缀

工具会输出可直接用于 HTML、CSS 或原始 Base64 的格式，并显示原始文件大小和 Base64 字符串大小，让你立即看到体积开销。所有处理都在浏览器中完成，图片不会上传到服务器。

实用代码示例

将 Favicon 嵌入为 Base64

不需要单独托管 favicon 文件，直接嵌入 HTML head：

<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

JavaScript 转换

如果需要在浏览器中用代码进行转换：

// 将 File 对象转换为 Base64
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// 使用示例
const base64String = await fileToBase64(imageFile);

Python 转换

import base64

with open("image.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("utf-8")

data_uri = f"data:image/png;base64,{encoded}"

用构建工具自动化

现代构建工具（Webpack、Vite、Rollup）可以自动将小于阈值的图片内联，无需手动决策：

// vite.config.js
export default {
  build: {
    assetsInlineLimit: 4096 // 将 4 KB 以下的文件内联为 Base64
  }
}

小图片变成 base64，大图片保持为独立、可缓存的文件。

将 Base64 转回图片

有时你会收到 base64 字符串，需要还原为图片文件——例如从 HTML 邮件源码、API 响应或嵌入数据中提取图片。BestPNG 的 base64 工具支持双向转换：

1. 打开 bestpng.com/tools/base64
2. 粘贴 base64 data URI 字符串
3. 工具解码并显示图片预览
4. 下载还原的图片文件

Base64 vs 文件 URL：如何选择

常见问题

Base64 编码会改变图片质量吗？

不会。Base64 是无损编码，不是压缩。解码后的字节与原始文件完全一致，图片质量不变。

哪些图片格式可以转换为 Base64？

任何格式都可以——PNG、JPG、WebP、SVG、GIF 等。格式信息通过 data URI 前缀中的 MIME 类型保留在字符串中。

可以将 Base64 字符串解码回图片吗？

可以。Base64 编码完全可逆。将字符串粘贴到 BestPNG 的 base64 工具即可下载原始图片文件，没有任何数据损失。

Base64 编码安全吗？

不安全。Base64 是可逆编码而非加密，任何人都能解码。不要用它来「隐藏」或保护敏感图片，同时要对来自不可信来源的 base64 数据保持谨慎，因为它可能包含恶意内容。

浏览器对 base64 图片有大小限制吗？

现代浏览器（Chrome、Firefox、Safari、Edge）可以处理数兆字节的 data URI，但大字符串会导致性能下降。IE 8 及更早版本曾有 32 KB 的限制。

Base64 图片对 SEO 友好吗？

搜索引擎可以渲染 base64 图片，但无法独立抓取、索引或反向搜索它们。对于 SEO 重要的图片（产品照片、信息图），始终使用带有外部文件 URL 和描述性 alt 文本的常规 <img> 标签。

在 React/Next.js 中如何使用 base64 图片？

在 React 中，直接在 src 属性中使用 data URI，方式和常规 URL 一样。在 Next.js 中，<Image> 组件需搭配 unoptimized 属性使用，因为图片优化不适用于 data URI：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="图标" />

总结

Base64 编码是一种有特定适用范围的技术，可以将小图片直接嵌入 HTML、CSS 或 API 负载中。它消除了额外的 HTTP 请求并创建自包含的文档，但会将数据大小增加约 33%。

简单原则：5 KB 以下的小图标和装饰图片适合编码，更大的图片用常规文件 URL。

免费将图片转换为 Base64 →