AVIF 转 PNG:为了透明背景,也为了之后还要编辑的图片
AVIF 本身支持透明,但大多数转换工具会把这部分信息直接丢掉。把一个四角镂空的 logo 交给一个不讲究的工具,拿回来的往往是背后多了一块白底,或者一块黑底。这就是在这里选 PNG 而不是 JPG 的首要理由:PNG 有真正的 alpha 通道,抠好的图拿到手就能直接放进幻灯片、设计稿或商品页。
第二个理由是编辑。PNG 采用无损压缩,交给它什么像素就存什么像素,不会再额外丢弃任何东西。换成 JPG 则不同,之后每保存一次,都会在原有的压缩痕迹上再叠加一层。如果这张图要进设计软件,或者你还打算反复裁剪、重新导出,PNG 在每一次往返中都不会让画质变差。
逐像素的透明度测试
我们做了一张带三条竖向色带的 AVIF:一条完全透明,一条正好半透明,一条完全不透明。然后在自己的服务器上用每一种设置转换它,并逐像素检查输出结果。
| 设置 | 完全透明区域 | 半透明区域 | 不透明区域 |
|---|---|---|---|
| Recommended | 保持透明 | 仍然正好是一半 | 保持不透明 |
| Smallest,64 色 | 保持透明 | 仍然正好是一半 | 保持不透明 |
| 关闭 Palette compression | 保持透明 | 仍然正好是一半 | 保持不透明 |
即使降到 64 色,半透明也依然保住了。这恰恰是多数转换工具翻车的地方,因为调色板里没有一个显而易见的位置留给它,常见结果就是柔和阴影变成了生硬的边缘。在这里,任何设置下都不会把图像合成到某个背景色上。同一个文件走 AVIF 转 JPG,透明色带被填成了一块纯色,因为 JPEG 根本没有存储透明度的能力。
为什么我们不给你一个百分比
Palette compression 默认开启,因为照片的全彩 PNG 体积极大,普通的 zlib 几乎压不动。它到底能省多少,完全取决于图片本身。下面是同一张 1200 乘 900、磁盘上 21 KB 的 AVIF 在各个设置下的转换结果:
| 设置 | 调色板 | 输出 PNG | 实际情况 |
|---|---|---|---|
| Fast | 256 色 | 281 KB | 保留全彩 PNG,调色板版本反而更大 |
| Recommended | 128 色 | 223 KB | 使用了调色板 |
| Smallest | 64 色 | 197 KB | 使用了调色板 |
| 关闭 Palette compression | 无 | 227 KB | 严格无损,全彩 |
在这张图上,调色板几乎没省下什么,256 色时甚至会让文件更大,所以工具直接弃用了它,保留了全彩版本。换成一个扁平 logo 或一张截图,同样的设置可以把文件砍掉一半以上。这就是整个页面里看不到任何一个百分比的原因。唯一值得做出的承诺,是我们能兑现的那一个:你拿到的永远是两个版本中更小的那个,结果里也会告诉你拿到的是哪一个。
请预期 PNG 会比 AVIF 大上好几倍
AVIF 是现代有损编码,可以放心丢掉你的眼睛察觉不到的细节。PNG 则必须把拿到的每一个像素都记录下来。一张做成 AVIF 只有几百 KB 的照片,做成全彩 PNG 会到几 MB,这是无损要付的代价,不是转换出了问题。如果 PNG 对你的用途来说还是太重,那这张图多半是照片,AVIF 转 JPG 才是更合适的答案。
截图和文字依然锐利
生硬的边缘、界面文字和大片纯色,正是 JPEG 处理得最差的东西。它按小方块分块工作,会在每个字的周围留下肉眼可见的光晕。PNG 会原样保存这些边缘,所以截图转换后,文字和 AVIF 里一样清楚。扁平图形也是 Palette compression 收益最大的场景,因为截图或 logo 里真正用到的颜色确实不多。如果是带渐变的截图,而你要的是确定性而不是省容量,就关闭 Palette compression,把所有颜色都留下。
调色板可以自己定
压缩设置下面有一个 Colours 字段,也就是颜色数量。不去动它,每个设置各用自己的默认值。填入 2 到 256 之间的任意数值,得到的就是这么大的调色板,在需要和现有素材配色,或者要把一个图标压到极限时很有用。把 Palette compression 完全关掉,得到的就是严格逐像素一致的全彩 PNG。
方向、色彩和尺寸
手机照片的方向标记会在写入任何数据之前先应用到图像上,随后从输出文件中清除,所以图片到手就是正的,任何看图软件都不会再转第二次。广色域的 Display P3 描述文件会被嵌入 PNG 而不是被丢弃,这决定了颜色是准确还是天空回来时一片荧光;如果你的使用场景会忽略描述文件,Colour profile 设置可以把它正确转换成 sRGB。像素尺寸永远不变。这里转换的是格式,不是尺寸。
改过名的文件和动画文件
格式是从文件自身的字节读出来的,所以一个被人存成 .jpg 名字的 AVIF 照样能正确转换。动画 AVIF 会输出第一帧作为一张静止图,结果里也会说明这一点。我们不生成动画 PNG,因为把一段动画展开成几百张几乎一样的帧,并不是一个想转换单个文件的人所要的。
你会得到什么
- 完整保留的透明背景,包括半透明和柔和阴影
- 无损压缩,以后再裁剪、再导出都不会额外损失画质
- 调色板版本和全彩版本中更小的那个,逐个文件判断
- 需要时可自定调色板大小,2 到 256 色任选
- 照片方向正确,广色域原样保留,或按需转换为 sRGB
- 每一次都保持你原来的像素尺寸
接下来做什么
这张图只是没有透明背景的普通照片吗?AVIF 转 JPG 能用同一张图给你小得多的文件。
PNG 比你预想的重?压缩 PNG 可以在不改变尺寸的前提下继续减小它。
之后还要把图片放回网站上?PNG 转 WebP 能保住透明背景,同时为浏览器减轻体积。