> PNG | encode | data-uri <
// 将 PNG 图片编码为 Base64 字符串与数据 URI — 保留 alpha 透明度，完全在浏览器中运行
将 PNG 拖放到此处或点击选择
点击浏览 PNG 文件
保留透明度
PNG 的 alpha 通道、调色板以及 gAMA/tRNS 数据块逐字节编码 — 无重压缩、无质量损失。
100% 客户端
PNG 不会离开浏览器。编码通过 FileReader + btoa() 在本地完成 — 无需与服务器往返。
复制即用
获取符合标准的 data:image/png;base64,… URI，可直接用于 HTML、CSS、邮件、JSON 负载以及内联 SVG。
// 常见问题 — PNG 转 BASE64
Q: 什么是 PNG 转 Base64 编码？
A: 它使用 RFC 4648 定义的 Base64 字母表将 .png 文件的二进制内容转换为 ASCII 字符串。编码后的文本可以直接放入 HTML <img> 标签、CSS background-image、邮件正文、JSON API 载荷或任何仅文本传输通道。PNG 字节本身没有任何改变 — 每个 IHDR、IDAT、tRNS 和 IEND 数据块都被编码并可以完全恢复。
Q: 如何在浏览器中将 PNG 编码为 Base64？
A: 将 PNG 拖入放置区（或点击浏览）。工具使用 FileReader.readAsDataURL() 读取文件，该方法直接返回可用的 data:image/png;base64,… URI。如果要直接粘贴到 <img src="…"> 中，请选择 数据 URI；如果 API / 数据库只需要原始 Base64 部分（不含 data:image/png;base64, 前缀），请选择 仅 Base64 载荷。
Q: 将 PNG 编码为 Base64 会丢失透明度或质量吗？
A: 不会。Base64 是纯粹的二进制到文本转换 — 原始 PNG 中的每个字节都被保留，包括 alpha 通道、调色板以及色彩配置（iCCP/sRGB 数据块）。当您将字符串解码回去时，文件与原始文件逐位相同。解码后的 PNG 的 SHA-256 哈希与原始文件完全一致。这正是 Base64 适合嵌入图标、Logo 和截图这类对像素精度要求高的场景的原因。
Q: PNG 经 Base64 编码后会大多少？
A: Base64 每 3 字节输入使用 4 个字符，因此编码后的字符串比原始 PNG 文件约大 33%。精确大小为 4 × ⌈n / 3⌉ 个字符，其中 n 是 PNG 以字节计的大小。10 KB 的 PNG 编码后约为 13.6 KB 的 Base64 文本。由于 HTTP 压缩（gzip、Brotli）对 Base64 文本处理效果不错，实际传输中的额外开销通常更接近 10–15%。
Q: Base64 编码的 PNG 长什么样？
A: 每个 PNG Base64 字符串都以 iVBORw0KGgo 开头。该前缀是 8 字节的 PNG 签名 89 50 4E 47 0D 0A 1A 0A 经 Base64 重新编码而来。因此 iVBORw0KGgoAAAANSUhEUg... 始终是 PNG，看到该前缀可以快速直观确认数据完整。当封装为数据 URI 时，形式如下：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Q: 如何在 HTML 中以 Base64 形式嵌入 PNG？
A: 将完整的数据 URI 粘贴到 <img> 标签的 src 属性中：<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
浏览器会解码 Base64 载荷并像从 URL 加载一样渲染 PNG。不产生额外的 HTTP 请求，这对关键路径上的图标、邮件签名和离线优先的应用非常有用。
Q: 如何将 Base64 PNG 用作 CSS 背景？
A: 将数据 URI 包裹在 url() 函数中：.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
若希望复用，可将其存入 CSS 自定义属性中：:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
内联背景可为每个图标省去一次 HTTP 请求，但会让 CSS 文件膨胀，因此仅适用于小图标（< 4 KB）。
Q: 如何在 JavaScript / Node / Python / PHP 中将 PNG 编码为 Base64？
A:
JavaScript（浏览器）： const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js： fs.readFileSync('logo.png').toString('base64')
Python： import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP： base64_encode(file_get_contents('logo.png'))
Go： base64.StdEncoding.EncodeToString(pngBytes)
Ruby： Base64.strict_encode64(File.read('logo.png'))
Q: 什么时候应该使用 Base64 PNG 而不是普通图片文件？
A: 在以下场景使用 Base64 PNG 数据 URI：
• 图片 < 4 KB（节省一次 HTTP 往返）
• 需要嵌入 HTML 邮件（许多邮件客户端会屏蔽远程图片）
• 制作单文件 HTML 报告或仪表盘
• 要把图片存入 JSON 负载或数据库字段
当图片较大、在多个页面复用或需要独立 CDN 缓存时，更适合使用外部 .png 文件。
Q: Base64 编码对带透明度的 PNG 和调色板 PNG 有效吗？
A: 有效。由于 Base64 是逐位变换，所有 PNG 颜色模式都被同等支持：
• RGBA / truecolor + alpha — 32 位色彩，完整透明度
• 调色板 (PLTE) + tRNS — 带 1 位透明度的索引调色板 PNG
• 灰度 + alpha — 带 alpha 的 8/16 位灰度
• 16 位深色 PNG — 用于医学影像与科学可视化的 HDR 风格 PNG
以上格式通过 Base64 都可完整往返，并在支持 PNG 的浏览器中正确显示。
Q: 经 Base64 编码的 PNG 是加密的或私密的吗？
A: 不是。 Base64 是一种编码，而不是加密。任何能读取该字符串的人都可以在毫秒级内将其解码回原始 PNG。如果截图中包含密码、API 令牌或个人信息，Base64 编码无法保护它们 — 请在 Base64 输出之上再叠加真正的加密（AES-GCM、age、PGP），或通过 TLS 传输到有访问控制的服务器。
Q: 这里可以编码的 PNG 最大多少？
A: 没有人为上限。由于编码在本地运行，限制来自您浏览器的内存 — 桌面端通常可达 100 MB+，移动端约为 40–60 MB。对非常大的 PNG（高分辨率医学或卫星影像），我们会分块读取文件并对每个分块调用 btoa()，从而保持主线程响应。如果您的图片大于约 100 MB，建议改用服务端编码器进行流式处理，而不是加载到浏览器中。
Q: PNG 转 Base64 与 JPG 转 Base64 — 应该选哪个？
A: Logo、UI 图标、截图、图表以及任何带透明度或锐利边缘（文字、图表）的内容适合 PNG → Base64。PNG 是无损的并支持 alpha。 JPG → Base64 则适合照片或颜色丰富、可接受有损压缩的图像。相同照片下 JPEG 文件通常比 PNG 小 5–20 倍，因此 Base64 载荷会短得多。经验法则：如果图像来自相机或包含照片式渐变，用 JPG；否则用 PNG。