AVIF vs PNG

两者都能存照片，但取舍不同。以下是它们真正的差别，以及该怎么选。

一句话结论

照片类内容 AVIF 大幅胜出，而且它同样有无损模式。但小块纯色素材 —— 图标、精灵图、简单线稿 —— PNG 往往还更小，而且永远更省事。

到这里来的人通常是两种处境之一：手上有一堆过大的 PNG 照片、想要尽可能大的节省；或者在重做素材流水线、想知道 AVIF 能不能全面替掉 PNG。这两种情况的答案差别很大，而多数一刀切的建议正是在第二种上出错。

多数对比拿有损 AVIF 去对无损 PNG，这不是同类比较。无损 AVIF 是存在的，在照片类内容上通常能以不小的优势胜过 PNG，而且逐字节精确。如果你的要求真的是「不能有损失」，你并不非得留在 PNG —— 你只需要说清你指的是 AVIF 的哪个模式。

AVIF 带着容器开销，一张 32×32 的图标摊不掉；而它的编码工具是为照片纹理设计的，简单图形没有那种纹理。一张纯色图标的小 PNG，经常比同一张图的 AVIF 更小，有时还小不少。转换图标集之前先量一量 ——「AVIF 更小」这条通则，是一条**照片**通则。

PNG 什么都打得开，九十年代起就是如此，不需要回退、不需要 picture 元素、不需要内容协商。只要你的受众里还有老 Safari，AVIF 这三样都要。对一张首屏大图，这份复杂度换来的是实打实的字节；对一个 2KB 的图标，它什么都换不来，还多一个构建步骤。

网页上的照片与大尺寸细节图 —— 这里有砍半甚至更多的空间，而且你本来就有回退机制。

图标、精灵图、logo、文字截图，以及任何又小又平的素材 —— AVIF 的优势在这里消失，而通用支持依然值钱。