透明 PNG 变白底：先分清预览底色与真正的背景

一张 PNG 在查看器里是白底，放到网页上却透出深色背景：这不一定是导出错误。用同一份文件换两个预览底色，再检查是否还有透明像素，才能分清“看起来有底”和“文件已经带底”。

准备带透明边缘的自有素材

本站制作了一枚 800 × 600 的山峰徽章。画布四周透明，圆形部分带半透明填充，所以不仅要检查角落，也要看图形与背景混合后的颜色。下载 透明原图 PNG ↓ 或查看原始 SVG。以下两张预览使用完全相同的 PNG，只有网页底色不同。

做三份导出，不混淆“铺底”与“格式”

1. 第一份保留 PNG，不添加背景。下载后放到深浅两种背景上，观察透明区域是否随背景改变。
2. 第二份先在画布上铺满白色，再绘制原图，以 JPEG 0.82 导出。白色现在已经进入成品像素，不是查看器的显示底色。
3. 第三份先铺深绿色 #183b34，再绘制原图，同样导出 JPEG 0.82。半透明区域会与深绿色混合。
4. 重新解码三份文件，统计 alpha 小于 255 的像素。这里统计的是“非完全不透明”，包括全透明和半透明。

怎样判断是哪一类问题？

换底后四周跟着变色：原图仍保留透明；白色只是之前的预览背景。放到深底上仍出现整块白矩形：图像可能已经铺了白底，或者图片后面的网页元素自身有白色背景。先单独检查文件，再排查网页样式。

只有边缘出现白圈：可能原图的半透明边缘曾与白色混合，也可能是抠图留下的浅色像素。改成 PNG 不会自动恢复已丢失的边缘信息。用本站这份干净素材作对照，能区分工具铺底问题和原文件的问题；不要把棋盘格截图当作真正透明图片。

透明度丢失后，换回 PNG 有用吗？

JPEG 不保存透明通道。已经导成白底 JPEG，再转成 PNG，白色仍然是实际像素，不能恢复原来的透明度。需要重新从带 alpha 的原图导出。透明 PNG 的体积也不能保证比铺底 JPEG 更小，本例两种 JPEG 的字节数不同，主要因为背景与图形的组合不同。

本站尺寸与格式工具对 PNG 保留透明，对 JPEG 明确要求选择白底或深底。这样能让结果可预期，但它不是自动抠图工具，也不会把白色背景识别成透明。

这组数据怎样得到？

2026 年 11 月 5 日，本站在 Windows 的 Chromium 156 浏览器中，用 Canvas 2D 绘制自有 SVG，再通过 canvas.toBlob() 导出。JPEG 的 0.82、0.35 是浏览器编码参数，不是通用画质分数；不同浏览器和版本可能生成不同字节数。所有文件均可下载，完整测量记录包含尺寸、文件体积和生成环境。

平均 RGB 绝对差的计算方式为：把编码文件重新解码，与相同尺寸、相同背景的导出前画布逐像素比较三个颜色通道，求绝对差平均值，取值范围为 0–255。它仅描述本组文件的编码变化，不代表视觉质量分数，也不能证明缩小图片没有损失信息。透明像素的不可见 RGB 不适合与不透明底图作直接质量比较。

下一步：把同一徽章导出两种背景各一份，分别放在深浅页面上检查；需要排版留白时阅读画布大小与缩放的区别。