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

什么是 Base64 图片解码器？

Base64 图片解码器是一种将 Base64 编码的文本字符串还原为图片的工具。Base64 是一种表示二进制数据的方法，例如图片文件的字节，只使用 64 个普通文本字符（字母、数字、+、/，以及用于填充的 =）。浏览器、电子邮件和许多 API 会以这种方式存储图片，使图片能够作为纯文本的一部分传输，而不必作为单独文件传送。解码器会逆向执行这一过程：粘贴字符串后，原始图片就会显示出来。

Data URL 格式

在 Web 上，Base64 图片通常写成 data URL。其格式为：

例如：

每个部分都有特定作用：

• data: 表示这是 data URL，而不是普通网址。
• image/png 是 MIME 类型，用于告诉浏览器文件的类型。
• ;base64 表示逗号后的数据采用 Base64 编码。
• 逗号后的全部内容就是经过编码的图片数据。

解码器的工作原理

解码分为四个步骤。

1. 工具检查字符串是否以 data: 开头。如果 data URL 声明的媒体类型不是图片，例如 data:text/plain，工具会立即拒绝，因为它不可能作为图片显示。
2. 工具会移除空格、制表符和换行符，因为较长的 Base64 字符串有时会分成多行。如果数据使用的是 RFC 2397 同样允许的百分号编码，而不是 Base64 编码，则会保持原样传递。
3. 工具将 Base64 文本解码为原始字节。
4. 工具检查结果开头的几个字节。每种常见图片格式都以固定的字节序列开头，这种序列称为签名或“魔数”。PNG 文件以 89 50 4E 47 开头，JPEG 文件以 FF D8 FF 开头，其他格式也有各自的序列。解码器会匹配这些签名，并根据识别出的类型标记图片。

字节内容优先于标签。如果 data URL 声明为 data:image/png，但字节以 FF D8 FF 开头，解码器会将 URL 重建为 data:image/jpeg。这样，“复制图片 URL”按钮提供的字符串就不会错误描述自身的内容。

如果字符串没有 data: 前缀，解码器会将其视为原始 Base64 数据，进行解码，然后用同样的方法读取签名。如果字节与任何已知图片签名都不匹配，也不像 SVG 文本，解码器会报告该字符串似乎不是图片。它不会猜测格式，也不会回退到任何默认类型。

SVG 的处理方式不同，因为 SVG 是文本格式（XML），而不是二进制格式，因此没有固定的字节签名。解码器会检查已解码文本开头的 1024 个字节，查找 <svg 标签、后面跟有该标签的 XML 声明（例如 <?xml version="1.0"?>），或后面跟有该标签的 SVG 文档类型声明。最开头的字节顺序标记有时会由编辑器添加到 UTF-8 文件中，解码器会忽略它。由于 SVG 无法通过字节签名识别，因此声明为 image/svg+xml 的 data URL 会保留其声明的类型。

Base64 图片大小计算公式

Base64 会将每 3 个二进制数据字节转换为 4 个文本字符。编码后长度的计算公式为：

⌈ ⌉ 符号表示“向上取整到下一个整数”，因为 Base64 始终以 4 个字符为一组进行处理，并使用 = 符号填充不足的一组数据。

对于较大的文件，编码后大小大约会增加 33%，因为 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”按钮可以复制其 data URL。由于图片会在浏览器中作为普通图片元素渲染，也可以在预览中的图片上右键单击，选择保存图片来保存图片本身。

Base64 图片的常见用途

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

Base64 图片的利弊

Base64 编码虽然方便，但也有代价：

• 编码后的文本大约比原始文件大三分之一。
• 浏览器无法像缓存链接文件那样缓存嵌入式图片，因此每次加载外层页面或样式表时都必须重新下载。
• 浏览器必须先解码 Base64 文本，才能显示图片，这会增加少量额外处理。
• 由于体积增加且无法利用缓存，Base64 嵌入更适合图标和简单徽标等小图片。较大的照片通常更适合作为普通图片文件提供。

常见问题

什么是 Base64 图片解码器？

它是一种将 Base64 编码的文本字符串转换回可查看图片的工具，支持 PNG、JPEG、GIF、WebP、BMP 或 SVG 文件等类型。

如何解码 Base64 图片？

将 Base64 字符串粘贴到解码器中，可以包含 data:image/... 前缀，也可以不包含。解码器会读取字符串、完成解码，并显示生成的图片。

没有 data URL 前缀时，可以解码 Base64 字符串吗？

可以。解码器会将其视为原始 Base64 数据，解码其中的字节，然后读取开头的几个字节，根据签名识别格式，例如 PNG、JPEG、GIF、WebP、BMP 或 ICO。对于 SVG，解码器会在已解码文本中查找 <svg 标签。如果这些格式都不匹配，解码器会报告该字符串似乎不是图片，而不是猜测一种格式。

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

大多数情况可以归结为三个原因。字符串可能包含标准 Base64 字符表之外的字符。标准字符表为 A–Z、a–z、0–9、+、/ 和 =；某些 Web 令牌使用的 Base64url 变体会改用 - 和 _，因此不被接受。字符串也可能在中途被截断，导致长度比 4 的倍数多 1，而有效的 Base64 字符串不会出现这种长度。另一种可能是字节本身不属于支持的图片格式。单独缺少 = 填充并不会造成问题，解码前会移除空格和换行符。

Base64 编码属于安全或加密方式吗？

不属于。Base64 只是将字节表示为文本的一种方式，并不会隐藏任何内容。任何人都可以在几秒内使用免费工具解码 Base64 字符串，因此不应使用它来保护私密图片或其他数据。

Base64 字符串比原始图片大多少？

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

历史

Base64 源于 1970 年代和 1980 年代形成的编码方案，用于通过只能处理纯文本的邮件系统发送二进制数据。它在 RFC 989（1987 年）中针对电子邮件进行了规范化，之后又在 RFC 1421 中得到发展。RFC 2397（1998 年）定义了 data: URL 方案后，将图片嵌入网页成为可能。2000 年代中期，开发者开始寻找减少独立 HTTP 请求的方法，尤其是在移动网络连接较慢的情况下，因此这种用法变得更加普遍。

参考资料

1. RFC 4648：Base16、Base32 和 Base64 数据编码
2. RFC 2397：“data”URL 方案
3. MDN Web Docs：data URL
4. WHATWG MIME 嗅探标准