Base64 编码是什么？网站为什么用它来放图片？

Base64 编码是一种把任何二进制文件（比如图片）写成纯文本的方法，只用 64 个“安全”字符：大小写字母 A 到 Z、数字 0 到 9，再加上 + 和 /。网站之所以拿它来放图片，是因为生成的文本可以直接粘贴进 HTML、CSS 或 JSON 里，这样一个小图标就能跟着网页一起到达，不用再单独下载。代价是体积：Base64 文本比原文件大约大三分之一。本文会讲清楚这种编码的原理、它真正有用的场景，以及什么时候用普通图片文件更好。

Base64 编码到底做了什么#

计算机把图片存成原始字节，而其中很多字节并不对应任何可显示的字符。凡是设计来传输文本的地方，这都是个问题：HTML 属性、CSS 文件、JSON 字段，或者一封邮件的正文。Base64 的办法是，只用那些在任何文本系统里都能原样通过的字符，把这些字节重新表达一遍。

具体方法由 RFC 4648 定义，绝大多数软件都遵循这个标准。它按小组来处理：

1. 从文件中取 3 个字节（24 位）。
2. 把这 24 位拆成 4 块，每块 6 位。
3. 每块 6 位就是一个 0 到 63 之间的数字，到 64 个字符的字母表里查出对应的字符。

经典的例子是单词 Man。它的三个字节会变成四个字符 TWFu。如果文件长度不是 3 的倍数，输出末尾会补上一个或两个 = 作为填充，这就是为什么很多 Base64 字符串都以 = 或 == 结尾。

有一点要特别说明：Base64 不是加密。任何人都能立即把它解码，不需要密钥或密码。它只改变数据的书写方式，并不改变谁能读到这些数据。

为什么 Base64 会让文件变大约 33%#

因为每 3 个字节会变成 4 个字符，Base64 的输出总是输入的大约 4/3，也就是大了约 33%。这不是估算，而是简单的算术：

有些系统还会每 76 个字符插入一个换行（电子邮件就是这样，见 RFC 2045），体积会再多一点。网站服务器的文本压缩（gzip 或 Brotli）能找回一部分额外开销，但编码后的图片永远不会比原文件更小。

网站是怎么用 Base64 放图片的#

在网页上，Base64 图片几乎总是以 data URL 的形式出现：本来应该写图片链接的地方，直接写进了图片本身。它的格式在 MDN 的 data URL 页面上有说明，大致是这样：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Logo">

在 CSS 里也一样能用，比如作为背景图：

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}

浏览器读取这段文本，把它解码回原来的 PNG，显示效果和单独下载一个文件完全一样。想为自己的图片生成这段代码，把 JPG、PNG、WebP 或 AVIF 拖进图片转 Base64 工具，就能直接复制现成的 img 标签、CSS 规则或原始字符串。

什么时候适合用 Base64 图片#

把图片作为文本嵌入，只在少数几种情况下合理：

• 很小的图标和界面图形。嵌在 CSS 里的小图标会跟样式表一起到达，不会晚一步才出现，也不会单独加载失败。
• 自成一体的文件。单个 HTML 文件、邮件模板，或者希望不依赖任何外部文件就能正常显示的文档，都可以把图片装在自己里面。
• 必须以文本形式传输的数据。JSON 接口、配置文件和剪贴板里的代码片段都装不下原始字节，所以其中的图片通常是 Base64。电子邮件附件在底层也是 Base64，原因相同。
• 快速原型和演示，这时你宁愿粘贴一串字符，也不想专门找地方托管图片。

什么时候不该用 Base64 图片#

对于正式网站上的大多数图片，普通图片文件才是更好的选择：

• 下载量更大。每张嵌入的图片都比原文件多出大约三分之一的字节。
• 无法单独缓存。Base64 图片是作为所在 HTML 或 CSS 的一部分被缓存的。样式表里改动一行，浏览器就得连图片一起重新下载；而单独的图片文件可以一直留在缓存里。
• 会拖慢页面。图片文本就在你的 HTML 或 CSS 里，浏览器必须先下载完这些内容才能渲染页面。嵌入一张大照片会拖慢所有内容，包括本来可以最先显示的文字。
• 省请求已经没那么重要了。少发一个请求曾是嵌入图片的主要理由，但 HTTP/2 允许浏览器通过一个连接获取很多小文件，所以如今这点节省小得多。

一个比较稳妥的原则是：只嵌入最多几 KB 的图片，其他的都用普通文件。对照片来说，更有效的做法通常是把文件本身变小，图片压缩工具就能在浏览器里完成这件事。我们的不损失画质的图片压缩指南讲了压缩可以做到什么程度。

SVG 是个特例#

SVG 文件本身就是文本，所以放进 data URL 其实并不一定需要 Base64。你也可以对 SVG 代码做 URL 编码，因为省掉了 33% 的额外开销，通常体积更小；不过 Base64 更简单，也不会因为引号和特殊字符出问题。SVG 转 Base64 工具会同时给你两种版本，你自己选。如果不确定 SVG 文件里到底装了什么，可以看看我们的SVG 文件是什么一文。

这两个转换工具都完全在你的浏览器里运行，图片不会被上传。更多相关工具可以在图片工具和开发者工具页面找到。

常见问题#

用最简单的话说，Base64 编码是什么？ Base64 编码是一种用 64 个安全字符（大小写字母 A 到 Z、数字 0 到 9，以及 + 和 /）把任何文件（比如图片）写成纯文本的方法。它让二进制数据可以通过只处理文本的系统，比如 HTML、CSS、JSON 和电子邮件。

网站为什么用 Base64 来放图片？ 网站用 Base64 放图片，是为了把小图片直接写进 HTML 或 CSS，而不是作为单独的文件下载。这对很小的图标和邮件模板这类自成一体的文件最有用。

Base64 会让图片变大吗？ 会，Base64 会让图片大约大 33%，因为原文件的每 3 个字节都会变成 4 个文本字符。一张 30 KB 的图片转成 Base64 后大约是 40 KB。

Base64 算是加密吗？ 不算，Base64 不是加密，因为任何人都能在没有密钥或密码的情况下立即解码。它只改变数据的书写方式，不改变谁能读取，所以千万不要用它来隐藏敏感信息。

什么时候不该用 Base64 图片？ 大图片和照片不该用 Base64，因为多出的 33% 体积加上无法单独缓存，会拖慢页面。这类图片应该用普通图片文件提供，只嵌入最多几 KB 的小图片。

怎样把图片转换成 Base64？ 把图片拖进 ConvertOwl 的图片转 Base64 这类转换工具即可完成转换；它在浏览器里运行，会给出编码后的字符串，以及可以直接粘贴的 img 标签或 CSS 规则。

简单总结#

• Base64 用 64 个安全字符把任何文件写成文本。它是编码，不是加密。
• 每 3 个字节变成 4 个字符，所以结果大约大 33%。
• 网站用它把小图片以 data URL 的形式直接放进 HTML 或 CSS。
• 只嵌入很小的图片；照片和更大的图片都用普通文件。
• 试试图片转 Base64 工具或 SVG 转 Base64 工具，更多内容见我们的技术文章。