PNG 转 Base64

如何把 PNG 转为 Base64

1. 把 .png 文件拖到框中，或用文件选择器选择。要编码截图，复制后在本页按 Ctrl+V（Mac 上是 Cmd+V）即可，无需先保存。
2. 如果 PNG 比需要的大，设置 最大宽度，或在 转换为 中选择 WebP。移除元数据（EXIF） 会去掉文本块和 EXIF 块。
3. 输出为 保持为 Data URI，或切换为 CSS、<img>、Markdown、JSON 或纯 Base64。
4. 按 复制输出。预览会显示像素尺寸，重新编码后还会显示新的文件大小。

Base64 PNG 长什么样

每个 PNG 都以同样的 16 个字节开头：8 字节的签名，加上必须排在最前面的 IHDR 块的头部。在 Base64 中，这对应一个固定的 22 字符开头：

iVBORw0KGgoAAAANSUhEUg

所以任何以 iVBORw0KGgo 开头的字符串都是 PNG，不管它出现在 JSON 响应、日志文件还是数据库字段中。紧接着的几个字符里打包的是宽度和高度。

作为参考，下面是一个完整的 1×1 全透明 PNG。文件有 70 字节，Base64 有 96 个字符：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

粘贴有一个坑。浏览器和看图软件复制的图像，到了剪贴板上通常是 PNG，不管原来是什么格式，所以粘贴进来的 JPEG 照片会变成 PNG，可能比磁盘上的文件大得多。如果源格式很重要，请直接拖入原始文件。

如果编码后的 PNG 不是以这个开头，说明文件并不是 PNG。其实是 JPEG 的 .png 文件以 /9j/ 开头，改名为 .png 的 WebP 则以 UklGR 开头。预览中的 MIME 类型会告诉你浏览器识别出的是什么。

编码前选 PNG、JPEG 还是 WebP

PNG 是无损格式，所以适合 Logo、图标、UI 图形和带文字的截图。用于照片则不合适：同一张照片，PNG 往往比质量不错的 JPEG 或 WebP 大好几倍。既然 Base64 会让任何输入膨胀约 33%，最终体积主要取决于你选择的格式。

转换器通过浏览器的 canvas 重新编码。这带来三点影响：

• 转换为 JPEG 会丢失透明度。透明像素会变成白色。
• Safari 没有 WebP 编码器。在 Safari 中选择 WebP，得到的会是 PNG，并附有说明。
• canvas 编码器不会优化 PNG。对已经用专门优化工具压缩过的 PNG 重新编码，可能反而变大。请在预览中对比大小，如果原图更小就保留原图。

移除元数据（EXIF） 会顺带去掉 EXIF 和文本块等辅助数据。大多数 PNG 中这类数据很少，但截图和一些应用导出的图片会包含软件名称或时间戳。

Base64 PNG 出现在哪里

• CSS 图标：background-image: url("data:image/png;base64,...") 用于不想额外占用一次请求的小图标。矢量图标通常用 SVG 更小；参见 SVG 转 Base64。
• canvas 输出：canvas.toDataURL() 默认返回 PNG data URI，所以签名板、图表和图片编辑器生成的经常就是这种格式。Base64 转 PNG 可以把它还原为文件。
• API 载荷：截图服务、测试运行器和 AI 视觉 API 在 JSON 中以 Base64 交换 PNG。确认 API 要的是带 data:image/png;base64, 前缀的还是纯 Base64，并相应选择 Data URI 或 纯 Base64。
• 测试快照和错误报告：视觉测试和崩溃报告工具经常把截图以 Base64 PNG 放进 JSON 或 HTML 报告中，让报告保持为单个文件。
• Favicon 和单文件页面：在 <link rel="icon"> 中内联一个小 PNG favicon，能让 HTML 文件保持自包含。详见 favicon 页面。

在代码中编码 PNG

Node.js 把文件读入 Buffer，一次调用即可编码：

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

在浏览器中，canvas 直接给出 PNG data URI：

const uri = canvas.toDataURL("image/png");

流式处理和 URL 安全输出见 Node.js 中的 Base64，浏览器中的文件和 Blob 见 JavaScript 中的 Base64。

修复无法显示的 PNG data URI

• 前缀写错了。 必须是带逗号的 data:image/png;base64,。缺少 ;base64 时，浏览器会把这些字符当作原始文本读取。
• 勾选了 URL 安全（- _）。 浏览器在 data: URL 中只解码标准字母表。含有 - 和 _ 的 PNG Base64 会显示为破图。
• CSS 中有换行。 每 76 字符换行 是给电子邮件用的。在样式表中，url("...") 里的换行会让该声明失效。
• 字符串被截断了。 PNG 以固定的 12 字节 IEND 块结尾，所以它的 Base64 会以 AAAAAElFTkSuQmCC、AABJRU5ErkJggg== 或 AAAASUVORK5CYII= 结尾，具体取决于文件长度除以 3 的余数。如果结尾不同，而且图片只画了一半或干脆没有，说明复制时被截断了。可以 校验 该字符串，检查其长度和填充。

常见问题