你刚给网店做完一套品牌素材。十六张透明 PNG——logo 三种尺寸、几个角标、几张贴纸。在 Figma 里看着完美。导出时勾选"保留透明背景"，拖到桌面上看总大小：2.4 MB。就这十六张小图。在手机上，光这些图就要多加载两秒钟。
于是你拿去压缩。体积确实暴降——很好。但上传到店铺页面后，你发现 logo 边缘有点不对劲：原本平滑过渡的地方出现了一道细细的白边，或者弧形边缘变成了锯齿台阶。这就是透明 PNG 压缩陷阱，绝大多数压缩工具都不会告诉你，因为它们的预览窗口太小根本看不清。我来拆解到底发生了什么，给你真实数据，并告诉你哪种方法适合哪种素材。
真实数据：同一张透明 logo，三种压缩路径
我专门做了一张测试图：1200×1200 像素，中央是一个带羽化光晕（柔边 alpha）的徽章，四角还有几张纯色硬边贴纸。它用的是 RGBA 格式——四个通道而不是三个——每个像素都携带红、绿、蓝和不透明度信息。我跑了三种路径，全部实测：
| 压缩方式 | 文件大小 | 节省比例 | 柔边 alpha 是否保留 |
|---|---|---|---|
| 原始（未优化 RGBA） | 156.6 KB | — | 保留——64.9 万个半透明像素 |
| 无损重编码（仅 optimize） | 126.0 KB | −19.6% | 保留，像素完全一致 |
| PNG8 量化（256 色，1-bit alpha） | 11.3 KB | −92.8% | 不保留——零个半透明像素 |
PNG8 到底干了什么（为什么它会毁掉柔边）
PNG8 就是索引色 PNG。它不再为每个像素单独存储红绿蓝值，而是建立一个调色板——最多 256 种颜色——然后每个像素只是一个指向调色板的数字。这比每像素存三到四个字节要小得多。
问题出在透明度上。在索引色 PNG 中，每个调色条目只有一个透明度值。大多数编码器会把它四舍五入为全透明或不透明——没有空间存放"37% 半透明"。每一个半透明的像素（抗锯齿边缘、投影、光晕、渐变淡出）都会被推向两个极端之一。
在我的测试图中，原图有 64.9 万个处于中间值的 alpha 像素——那是整个柔边光晕加上圆形和星星周围的抗锯齿。经过网站同款引擎（upng-js 中位切割量化，alpha 取整到 1-bit）转换后，这个数字精确地降到了 0。那 64 万多个像素要么变成 255（完全不透），要么变成 0（全透明）。视觉上就是中图里那个硬环——原来光晕自然消散的地方现在戛然而止。
这有影响吗？完全取决于你那张透明 PNG 里画的是什么。
什么时候 PNG8 完全安全（放心大胆地用）
如果你的透明图片只包含硬边形状——纯色 logo、扁平图标、方或圆角的贴纸、在纯白背景下拍摄并抠掉背景的商品图——PNG8 基本是白捡的钱。alpha 通道没有东西可破坏，而你拿到 90% 以上的体积缩减且零视觉差异。
- 从 Illustrator/Figma 导出的扁平品牌 logo。 没有光晕、没有投影、没有模糊效果。这类图压缩到 PNG8 效果极好。我测试图里的四角色标就是证明——压缩前后看起来一模一样。
- 商品抠图（白色背景电商照片去掉背景后）。商品与透明区域的交界线通常是 Photoshop 钢笔工具或魔棒选出的干净蒙版。硬边，无过渡。PNG8 安全。
- UI 图标集、emoji 风格图形、像素风游戏素材。设计上就是硬边的。PNG8 简直是为它们发明的。
- 定制贴纸设计（用于淘宝/拼多多/闲鱼等平台的商品展示或小红书分享）。大多数平台只要一个简单形状的透明 PNG，不带特效。PNG8 能把几百 KB 的上传文件压到 15 KB 以下，当你管理几十款设计时这个差距很明显。
什么时候 PNG8 会翻车（避开或绕过）
- 带投影、光晕或外发光效果的 logo。 这些依赖平滑的 alpha 渐变。PNG8 会把这些渐变变成一圈圈同心硬环。在正常浏览尺寸（手机上 200–400 像素宽）可能不明显。但在原尺寸或 Retina 屏幕上，那个白边很扎眼。
- 渲染为透明 PNG 的抗锯齿文字。 小字号（24px 以下）使用亚像素抗锯齿，会在字符边缘产生大量半透明像素。PNG8 让文字看起来有锯齿或粗细不均。如果你的 logo 里包含可读文字，压缩后务必仔细检查。
- 水印或叠加图形带有不同透明度的（比如"50% 透明"的印章）。PNG8 把中间值全部坍塌。你的水印要么完全可见，要么彻底消失——没有中间地带。
如果你的素材属于上面这几类，你有三个选择：
- 先把特效合并到背景上。把光晕/投影图层叠到一个实色背景上，然后导出为不透明的 PNG 或 JPEG。这样就没有 alpha 可破坏了。正常压缩即可。大多数专业设计师对最终生产资产都是这么做的。
- 只用无损优化。跳过 PNG8。用无损 PNG 优化器（OxiPNG/zopfli）更高效地重新编码 deflate 流但不改动像素值。你只能省 15–25% 而不是 93%，但每个像素保持原样。对于质量不可妥协的主图 logo 和头部横幅来说够用了。
- 接受并按显示尺寸验证。压成 PNG8 后下载结果，在网页实际显示尺寸下（不是放大的）和原图并排对比。如果 1:1 尺度下看不到白边，就用它。大多数用户看到的 logo 只有 80–200 像素宽，2 像素的白边低于人眼感知阈值。但别假设——一定要查。
批量工作流：一次压 20 张透明 PNG
一旦你知道哪种方式适合哪张图，实际压缩只需大约十秒。这是我用的流程：
- 把所有透明 PNG 收到一个文件夹里。logo、贴纸、抠图——不管什么需要缩小的都扔进去。
- 快速逐张检查 200% 放大。找找有没有柔边、光晕或形状边界附近的淡出区域。分成两堆："全是硬边"和"有柔边 alpha"。
- 整批拖进浏览器端压缩工具。我用的一次支持20 个文件同时上传，全程在你浏览器里运行（不会传到任何服务器），自动识别格式。一次性全拖进去。
- 让引擎跑 PNG8。"硬边堆"直接用默认输出就行。"柔边堆"每张都要在 1:1 显示尺寸下预览再决定留还是换无损模式。
- 整批下载。一键全部下载为独立文件。文件名不变。直接丢进 CMS 或平台上传器。
从打开文件夹到完成下载，20 张图大概 30 秒。不用装软件，不用注册账号。关键是你的原始素材从未离开设备——压缩过程就在浏览器标签页内完成。
容易踩的坑（我大部分都踩过）
- 把透明 PNG 转成 JPEG。这会彻底摧毁 alpha 通道。透明区域会填满白色（取决于工具也可能填黑色）。JPEG 根本不支持透明度。任何期待透明 logo 的平台都会拒绝或错误渲染。保持 PNG 就用 PNG 格式。
- 批量上传前不检查白边。你压了 50 个 logo，感觉 90% 缩减很爽，一口气全传上去。三天后有客户邮件你说"你们 logo 在我手机上看起来坏了"。然后你得全部重来。先抽样 1:1 检查。
- 用服务端压缩工具处理未发布资产。你的未上市品牌素材跑到别人服务器上了。浏览器端工具完全避免这个问题——文件不出你的机器。很多卖家处理的是商标 logo 或未上市的季末设计，隐私这点值得重视。
- 以为所有 PNG 行为一样。截图存的 PNG 用 PNG8 压很好（基本是纯色块）。照片存的 PNG 本来就错了（应该用 JPEG）。带光晕的透明 logo 是第三类，有自己的规则。按内容类型选方法。
- 过度量化到 64 色以下。从 256 色降到 128 或 64 基本不再省多少字节（我的测试三种色数都是 11.3 KB——256 色已经足够小了）。但视觉质量明显下降：渐变出现色带、颜色偏移。除非你需要把目标控制在 10 KB 以内的极端情况，否则就停在 256。
相关指南
你的透明 PNG 需求可能和其他图片任务有关联。这些指南深入覆盖相邻主题：
- 压缩产品照片（JPEG 质量、平台要求、保留缩放功能）？读产品照片压缩指南。
- 通用 PNG 压缩（截图、文档、扁平图形，不考虑透明）？PNG 压缩详解覆盖基础。
- 截图保存成 JPEG 文字变糊？截图压缩指南解释为什么 PNG8 保持文字锐利。
- 深入了解 JPEG 质量档位？JPEG 质量深度对比比较 q50 到 q95 在不同图像类型上的表现。
- 缩小图片做邮件附件？邮件压缩指南讲解任何格式的批量工作流。
总结
透明 PNG 之所以臃肿，是因为 RGBA 多了一个通道而且大多数设计工具导出时未经优化。PNG8 压缩（中位切割调色板量化加 1-bit alpha）能在浏览器标签页内把它缩小 90% 以上，不需要装任何软件。唯一需要注意的是柔边 alpha——光晕、投影、抗锯齿文字——PNG8 会把它们变成硬边。如果你的素材完全没有这些东西，放心大胆地压。如果有，就把特效合并到背景、改用无损模式，或者在显示尺寸下确认白边不可见。
你的 logo 应该在每个屏幕上都清晰锐利。同时也应该加载快。两个目标都能实现——你只需要针对手里具体的那张素材选对路径。