使用方法
- 将 PNG 拖到上传区域，点击选择文件，或从剪贴板粘贴截图。
- 保持原格式即可编码 PNG 的原始字节；图片过大时，可以设置最大宽度缩小尺寸。
- 对比页面显示的原始大小和编码后大小。
- 复制或下载 Data URI、纯 Base64、img 标签、CSS 或 Markdown 输出。
PNG 与 Base64
PNG（便携式网络图形，MIME 类型为 image/png）是一种无损位图格式，支持完整的 Alpha 透明通道，因此常用于图标、Logo、示意图和截图。所有 PNG 文件都以相同的 8 字节签名开头，所以 PNG 的 Data URI 也总是以 data:image/png;base64,iVBORw0KGgo... 开头。
Base64 不会改动任何像素。解码后得到的文件与原文件逐字节相同，颜色和透明区域都完全一致。
适合使用 PNG Data URI 的场景
- 需要透明背景的小型界面图标和 Logo。
- 嵌入自包含 HTML 报告、缺陷报告或导出文档中的截图。
- 服务器生成后通过 JSON 返回的图表和二维码。
- 由
canvas.toDataURL()生成的图片，它默认输出的就是 PNG 格式的 Data URI。
编码前先压缩 PNG
PNG 每减少 1 个字节，Base64 就少大约 1.33 个字符。编码前可以先用 oxipng、zopflipng（无损）或 pngquant（减少调色板颜色）优化文件。也要检查像素尺寸：按显示尺寸 3 倍导出的图标，通常可以用“最大宽度”选项缩小。
转换为 WebP 能保留透明度，体积往往小很多；转换为 JPEG 会去掉透明度，透明区域会变成纯色。浏览器重新编码 PNG 时并不会做压缩优化，结果可能比优化过的原图更大，复制前请先对比大小。
使用输出结果
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="设置">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# 命令行：GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.png常见问题
Base64 会保留 PNG 的透明背景吗？
会。Base64 原样编码文件字节，Alpha 通道不受影响。只有把图片转换为 JPEG 时才会失去透明度。
为什么 PNG 的 Base64 总是以 iVBORw0KGgo 开头？
这几个字符就是 PNG 文件签名的 Base64 形式。如果一个号称 PNG 的字符串开头不同，那它要么是其他格式，要么已经损坏。
可以直接粘贴截图吗？
可以。复制截图后在页面上粘贴即可。浏览器通常会把粘贴的截图作为 PNG 处理，因此得到的是
data:image/png 结果。多大的 PNG 适合嵌入为 Base64？
常见的经验是几 KB，最多 10 KB 左右。更大的图片最好作为单独文件提供，这样浏览器可以缓存并并行加载。