Blog · 指南

合理的 PNG 工作流:oxipng、zopfli 与调色板

PNG 远没有过时——用对方法,它依然是平面图形的最佳格式。这里介绍如何在不产生色带或抖动瑕疵的前提下,得到最小的文件。

palette → oxipng → zopfli

PNG 常常被冠上“体积大”的恶名,但大多数臃肿的 PNG 只是编码得不好而已。用一套清晰的三步工作流——量化、优化、重新压缩——你可以在保持边缘锐利、色彩干净的同时,无损地把 PNG 体积常规性地砍掉一半甚至更多。以下是这个顺序为什么重要。

什么时候 PNG 是正确的工具

PNG 是为<b>平面、边缘锐利的图形</b>而生的:Logo、图标、UI 导出图、图表、截图,以及一切带透明度的内容。它是无损的,所以边缘始终干净利落——不会像 JPEG 那样在文字周围出现蚊噪。对照片来说它是错误的选择(应该用 WebP/AVIF/JPEG),但对于充斥在现代应用里的合成图形,没有什么能打败一张制作精良的 PNG。

第一步:能用调色板量化时就量化

大多数 UI 图形使用的颜色远少于 1600 万种。把 24 位真彩色 PNG 转换成<b>8 位索引调色板</b>(≤256 色)是单项影响最大的一步——在做任何其他优化之前,它往往就能把文件体积砍掉一半。诀窍在于选好颜色并谨慎处理渐变;一个好的量化器会选出最优调色板,并且只在真正有帮助的地方才使用抖动。

第二步:用 oxipng 优化滤波器

PNG 在压缩前会对每一行应用一种<i>滤波器</i>,选择哪种滤波器会极大影响体积。<b>oxipng</b> 会尝试多种滤波器策略并重新压缩图像,速度快、可并行,且零画质损失。它是安全、可以日常使用的默认选择:指向一个文件夹,它就会让里面每一张 PNG 都变小。真彩色图和调色板图都可以拿它来跑。

第三步:用 zopfli 榨干 DEFLATE

如果你想要绝对的最小体积,也不介意多等一会儿,<b>zopfli</b> 是一款兼容 DEFLATE 的压缩器,会更加卖力地搜索更小的数据流。它很慢——有时每张图要花上几秒钟——但生成的是任何解码器都能读取的标准 PNG,通常比单用 oxipng 再小几个百分点。非常适合那些只发布一次、却要被请求上百万次的素材。

# 完整流程,从头到尾全程无损
imageforge ui.png --palette auto --lossless        # 第一步
imageforge ./icons/*.png --optimize oxipng         # 第二步
imageforge logo.png --optimize zopfli --effort max # 第三步

避免色带和抖动瑕疵

调色板 PNG 有两种典型的失败模式:<b>色带</b>(颜色不够时渐变中出现明显的阶梯感)和<b>抖动噪点</b>(通过打散颜色来“伪造”更多色彩而产生的斑点)。解决方法靠的是判断力:让渐变部分保留真彩色,只对平面区域做量化,并且只在调色板很小、人眼更愿意接受噪点而不是色带的情况下才使用抖动。拿不准的时候,发布前先把量化后的版本和原图对比一下。

步骤
工具
损失
量化
调色板 / pngquant 风格
可选,可控
优化滤波器
oxipng
重新压缩
zopfli

用正确的方法,把你的 PNG 砍掉一半。

调色板、oxipng 和 zopfli 一次搞定——默认无损,在你的 Mac 上运行。

继续阅读