PNG 还是 JPG？我用了十年的那条判断规矩

二十多年来，「把这张图存下来」的两个默认答案一直是 PNG 和 JPG，而大多数人是稀里糊涂选的——导出对话框默认哪个就是哪个。这么凑合着用没问题，直到某天你把一张 9 MB 的截图发给别人，或者上线一个 logo，边缘围着一圈难看的灰边，选哪个格式忽然就要紧了起来。

问题在于：这个决定其实简单得很。它归结成一个我问了大约十年的问题，而这个问题从没让我失望过。

那唯一的一个问题

这张图是由边缘构成的，还是由光构成的？

就这么一句。文字、logo、图标、截图、示意图、线条图，任何带着硬边界和大片平色的东西——都是边缘。照片、渐变，任何有着平滑连续的色调、成千上万种细微色差的东西——都是光。

边缘要 PNG，光要 JPG。几乎一切都从这里推导出来。

边缘为什么要 PNG

PNG 是无损的。你存下的每一个像素都会分毫不差地回来，永远如此，不管你重新打开多少次。它靠找出连续相同的色块来压缩，而这恰恰是边缘类图像里满满都是的东西——一个纯色按钮、一片白底、一根黑线。这些 PNG 吃得干干净净，还锐利如刀。

它还有 alpha 通道，所以能做到真正的透明。这就是为什么凡是你想放到彩色背景上的 logo，都该用 PNG。JPG 完全没有透明——它把那些区域填成白色，那圈难看的灰边就是这么来的。

它的翻车场景是照片。把一张照片存成 PNG，它会尽职尽责地把每一粒传感器噪点、每一处微渐变都以全保真记下来，文件随之膨胀。PNG 浪费不是因为它差，是因为它对细节太诚实了——那些细节，你的眼睛本来乐意放过。

光为什么要 JPG

JPG 是有损的。它扔掉你眼睛不擅长察觉的信息——细微的色彩变化、高频细节——而它在照片上把这件事做得出奇地好。因为那正是照片多得用不完的东西。结果就是文件小到只剩一个零头，而你看不出少了什么。

可要是把 JPG 对准边缘，它就散架了。它会在硬边界周围——尤其是文字周围——糊出一圈模糊的瑕疵，因为锐利的边缘，正是它被设计来丢弃的那种高频细节。一张代码截图的 JPG，每个字母边上都透着点脏。那不是你的显示器，那是这个格式在错误的输入上按设计正常工作。

一锤定音的体积表

同样两张原图，用合理的设置各存成两种格式：

两个方向都读一遍。照片存成 JPG 几乎小了 5 倍，还看不出任何损失。可截图和 logo 存成 JPG 反而更大——而且还更难看，带着灰边和毛糙。哪个格式更小，完全随图里装的是什么而彻底翻转。这三行里就是全部的道理。

边缘情况（只有两个值得记）

要透明，就只能 PNG。 只要图像里有任何一部分需要透视，不管内容是什么，JPG 都出局，因为它在物理上就存不了 alpha 通道。哪怕是一张抠在透明背景上的照片，也得用 PNG（或者 WebP）。

文字压照片，是个需要权衡的判断题。 一张烤进了字幕的照片，一半是光，一半是边缘。要是它以照片为主，我就选 JPG，接受文字稍微发软；要是文字必须保持锐利、而我又扛得住那个体积，我就选 PNG。这里没有干净的赢家，你挑的是自己更能忍哪一种缺陷。

当你手上已经是错的那个

多数时候你并不是在导出时做选择——而是被困在别人早就存错了的文件上。摄影师甩给你一堆 14 MB 的 PNG，设计师发来一个带灰边的 JPG logo。这就纯粹是一次转换的事了。

往聪明的方向走——PNG 转 JPG，处理一张存得太重的照片——是笔明明白白的划算买卖，而且它就在你的浏览器里跑，文件不离开你的设备。往另一个方向走——JPG 转 PNG——诚实但有限：它让文件从此往后变无损，这正是你在编辑之前想要的，可它抹不掉 JPG 早已烤进去的那些瑕疵。有损是一扇单向门。转成 PNG 并不能带你倒着穿回去，它只是让你别再多丢任何东西。

问那一个问题——边缘还是光——你基本上每次都能答对。到今天每次导出我还在问它。花不了半秒钟，却帮我躲过了一大堆灰边。