PNG vs AVIF：现代格式能取代 PNG 吗？

PNG（Portable Network Graphics）自 1996 年问世以来，一直是网页设计师存放带透明度影像的首选格式。AVIF 作为新一代格式，在压缩效率和色彩支援上大幅超越 PNG，但相容性仍处于过渡期。本文全面比较两个格式，帮助你判断何时该选 AVIF、何时仍应坚持 PNG。

透明度支援

透明度是 PNG 的核心优势之一。PNG 完整支援 8-bit 和 16-bit Alpha 通道，可精确处理半透明像素，广泛用于 UI 元素、Logo、贴图等需要透明背景的场景。AVIF 同样支援 Alpha 通道透明度，且在有损压缩下的半透明处理效果优秀，能以更小的体积实现接近 PNG 的透明效果。

压缩效率

PNG 使用无损 DEFLATE 压缩，完全不会损失画质，但代价是相对较大的档案体积。一张带透明背景的 PNG 图示可能达到 30–200KB。AVIF 在无损模式下比 PNG 小约 20–30%；在有损模式下体积更可大幅缩小，同时视觉上几乎察觉不到差异。对于不需要像素完美无损的场景，AVIF 有损压缩的效率远胜 PNG。

色彩深度与 HDR

PNG 支援最高 16-bit 的无损色彩深度，是专业摄影后制储存的常见中间格式。AVIF 支援 10-bit 和 12-bit 色彩深度，并原生支援 HDR 和广色域（Wide Color Gamut）。虽然 AVIF 的最高位元深度略低于 PNG，但其 HDR 支援使其在显示下一代内容时更具优势。

浏览器相容性

PNG 相容所有浏览器、作业系统和图像软体，无例外。AVIF 目前在 Chrome 85+、Firefox 93+、Safari 16+ 中受支援，覆盖率约 85–90%，仍有部分用户无法显示。使用 `<picture>` 元素可以提供 AVIF 主版本搭配 PNG 备援，两全其美。

适用场景比较

PNG 最适合：需要像素完美的截图和图表、设计稿的中间储存格式、需要在各种软体间交换的素材、点阵图形和低色彩图示。AVIF 最适合：现代网页上带透明背景的产品图、需要平衡品质与体积的 UI 元素、支援 AVIF 的 CDN 自动转换工作流。

比较总表

特性	PNG	AVIF
透明度	完整 Alpha 支援	完整 Alpha 支援
压缩类型	无损	无损 / 有损
压缩效率	一般	优（无损小20-30%，有损更多）
最大色彩深度	16-bit	12-bit
HDR 支援	有限	完整支援
浏览器相容性	100%	约 85-90%
动画	APNG（有限支援）	支援
适用场景	设计素材、截图、UI 元素	现代网页图片、带透明的产品图

结论

AVIF 在压缩效率和现代功能上超越 PNG，但还无法完全取代它。需要像素完美无损输出或在所有环境中使用时，PNG 仍是可靠选择。若目标是现代浏览器且注重效能，采用 AVIF 搭配 PNG 备援是最佳策略。

在浏览器里直接完成，档案不会离开你的电脑：图片格式转换