Base64图像解码器 | 在线解码和预览图像

什么是 base64 图片解码器？

base64 图片解码器是一种把 base64 编码的文本字符串还原成图片的工具。Base64 是一种只用 64 个普通文本字符（字母、数字、+、/，以及用于填充的 =）来书写二进制数据（例如图片文件的字节）的方法。浏览器、电子邮件和许多 API 都以这种方式存储图片，使图片可以包含在纯文本中传输，而不必作为单独的文件。解码器执行相反的过程：粘贴字符串，原始图片就会出现。

数据 URL 格式

在网络上，base64 图片通常写成数据 URL。data: URL 方案定义于 1998 年。其格式为：

例如：

每个部分各有作用：

• data: 表示这是数据 URL，而不是普通的网址。
• image/png 是 MIME 类型，告诉浏览器这是哪一种文件。
• ;base64 表示逗号之后的数据经过 base64 编码。它是可选的。没有它时，数据是纯文本或百分号编码的文本。
• 逗号之后的全部内容就是编码后的图片本身。

解码器的工作原理

解码分四步进行。

1. 工具检查字符串是否以 data: 开头。如果是，就从该前缀中读取 MIME 类型。
2. 它会去掉所有空格、制表符和换行，因为较长的 base64 字符串有时会折成多行。这遵循浏览器使用的宽容 base64 解码规则，该规则的第一步就是删除所有空白字符。
3. 它把 base64 文本解码回原始字节。
4. 它查看结果的前几个字节。每种常见的图片格式都以一段固定的字节序列开头，称为签名或“魔数”。PNG 文件以 89 50 4E 47 开头，JPEG 文件以 FF D8 FF 开头，依此类推。解码器使用 WHATWG MIME 嗅探标准中的图片签名表，通过匹配这些签名来确认图片类型，必要时加以更正。

类型不是 image/... 的 data: URL 会被判为不是图片而拒绝。不带 ;base64 的 data:image/... URL 会原样交给浏览器处理。

如果字符串没有 data: 前缀，解码器就把它当作原始 base64 数据，进行解码，并以同样的方式读取签名。如果这些字节与任何已知的图片签名都不匹配，也不像 SVG 文本，解码器就会报告该字符串看起来不是图片。它不会猜测格式，也不会退回到任何默认类型。

SVG 的处理方式不同，因为 SVG 是文本格式（XML），而不是二进制格式，所以没有固定的字节签名。解码器改为检查解码后的文本是否以 <svg 标签开头，或是否以包含该标签的 XML 声明开头。

Base64 图片大小公式

Base64 会把每 3 个字节的二进制数据变成 4 个文本字符。编码后长度的公式为：

⌈ ⌉ 符号表示“向上取整到下一个整数”，因为 base64 始终以 4 个字符为一组，并用 = 号填充最后剩余的一组。

对于大文件，结果会比原文件大约大三分之一，因为 4 ÷ 3 ≈ 1.33。小文件的增幅百分比可能更大，因为在数据本来就不多时，向上取整到下一组 4 个字符的影响更明显。

算例

上面的 PNG 示例解码后是 85 字节的图片数据。代入公式：

base64 字符串的长度确实是 116 个字符，与计算相符。这比原来的 85 字节增加了 36%（116 ÷ 85 ≈ 1.36），略高于 33% 这个数字，因为这个文件非常小。

支持的图片格式

解码器读取解码后数据的字节签名来识别格式。它能识别以下类型：

如何解码 base64 图片

1. 从 HTML、CSS、API 响应或电子邮件中复制 base64 字符串，带不带 data:image/... 前缀均可。
2. 将其粘贴到输入框中。
3. 停止输入片刻后，图片会自动解码，也可以按解码按钮来解码。
4. 解码后的图片显示在预览区。点击“复制图片 URL”按钮可以复制它的数据 URL；由于它在浏览器中是作为普通图片元素渲染的，也可以在预览中右键点击图片并选择保存图片来保存它。

base64 图片的常见用途

• 嵌入 HTML、CSS 或 JavaScript：把图片数据直接放进代码，可以避免单独的文件请求。
• 电子邮件模板：有些邮件客户端默认会屏蔽外部链接的图片，但嵌入的 base64 图片仍然会显示。
• 单文件 HTML 工具：包括图片在内的整个页面可以作为一个自包含的文件发布。
• API 响应：图片可以包含在 JSON 负载中传输，而不需要单独的端点。
• CSS 背景和图标：小图标有时会作为数据 URL 直接写进样式表。

base64 图片的利弊权衡

Base64 编码很方便，但并非没有代价：

• 编码后的文本比原文件大约大三分之一。
• 浏览器无法像缓存链接文件那样缓存嵌入的图片，因此每当其所在的页面或样式表重新下载时，图片也会重新下载。
• 浏览器必须先解码 base64 文本才能显示图片，这需要一点额外的处理。
• 由于体积增大并且失去了缓存，base64 嵌入最适合小图片，例如图标或简单的标志。较大的照片通常更适合作为普通图片文件提供。

常见问题

什么是 base64 图片解码器？

它是一种把 base64 编码的文本字符串还原成可查看图片的工具，图片格式可以是 PNG、JPEG、GIF、WebP、BMP 或 SVG 文件。

如何解码 base64 图片？

把 base64 字符串（带不带 data:image/... 前缀均可）粘贴到解码器中。它会读取字符串、解码，并显示得到的图片。

没有数据 URL 前缀，能解码 base64 字符串吗？

可以。解码器会把它当作原始 base64 数据，解码出字节，并读取前几个字节，根据签名识别格式，例如 PNG、JPEG、GIF、WebP、BMP 或 ICO。SVG 则通过在解码后的文本中查找 <svg 标签来识别。如果都不匹配，解码器会报告该字符串看起来不是图片，而不是去猜测格式。

为什么我的 base64 图片无法解码？

最常见的原因是字符串在中途被截断，或含有不属于 base64 字符表的多余字符。使用 - 和 _ 代替 + 和 / 的 URL 安全变体也会被拒绝。末尾缺少 = 填充通常不是问题。复制完整的字符串（如果有 data:image/... 前缀，也要包括在内）通常就能解决。

Base64 编码是一种安全措施或加密吗？

不是。Base64 只是把字节表示为文本的一种方式，它不隐藏任何东西。任何人都可以用免费工具在几秒内解码 base64 字符串，因此绝不能用它来保护私密图片或其他数据。

base64 字符串比原图大多少？

对较大的文件来说大约大三分之一，因为原始数据的每 3 个字节会变成 4 个文本字符。一张 100 KB 的图片编码后约为 133 KB。小图片由于取整，增幅百分比可能略高。

历史

Base64 源于电子邮件，当时的邮件只能承载纯文本。1987 年的增强隐私邮件规范描述了把每 3 个字节转换为来自 64 个字符集的 4 个可打印字符。1998 年的 data: URL 方案后来使在网页中直接嵌入 base64 图片成为可能。base64 目前的定义是 RFC 4648（2006 年）。

参考文献

1. IETF。RFC 4648: The Base16, Base32, and Base64 Data Encodings。RFC 4648 — 3 个字节变成 4 个字符；= 填充。
2. IETF。RFC 2397: The "data" URL scheme。RFC 2397 — 数据 URL 语法；;base64 是可选的；发布于 1998 年。
3. WHATWG。Infra Standard。宽容 base64 解码 — 删除空白字符；填充处理。
4. WHATWG。MIME Sniffing Standard。匹配图片类型模式 — 图片字节签名。
5. MDN Web Docs。Base64。Base64 术语表条目 — 编码后的输出大约大三分之一。
6. IETF。RFC 989: Privacy Enhancement for Internet Electronic Mail, Part I。RFC 989 — 1987 年用于把 3 个字节编码为 4 个可打印字符的电子邮件编码。