术语

PNG

PNG(Portable Network Graphics,便携式网络图形)是一种无损图像格式,能准确保留像素数据,因此常用于文字清晰度和颜色准确度很重要的截图。

PNG 压缩如何工作

PNG 分两个阶段压缩。首先,图像数据会经过筛选处理,转换每一行像素,使其中的规律更容易压缩。筛选器会根据相邻像素预测当前像素的值,并只存储差值,因此纯色区域会产生较长的连续零值。

之后,筛选后的数据使用 DEFLATE 算法压缩,也就是 ZIP 文件采用的算法。DEFLATE 会查找重复字节序列,再用较短的引用替换。包含大块相同颜色的区域,例如纯色背景、平面 UI 和统一边框,压缩效果很好;复杂纹理和照片噪点则难以压缩。

这套两阶段流程很适合截图。大多数截图都有大面积纯色、清晰文字边缘和规整几何形状,筛选后会生成容易压缩的数据。一张典型的 1920 × 1080 UI 截图保存为 PNG 时可能只有 200–500 KB,而未压缩位图会超过 6 MB。

PNG 还支持用于透明度的 Alpha 通道、24 位色彩(1670 万种颜色),以及用于伽马校正和色彩配置文件信息的可选元数据块。

PNG、JPG 与 WebP

三种格式各有用途:

  • PNG——无损,准确还原像素,支持透明度。最适合截图、UI 元素、图表,以及任何需要保持文字锐利的图像。文件比有损格式大。
  • JPG——有损,会丢弃部分视觉细节来减小文件。最适合照片和带平滑渐变的图像,不要求像素级准确度。它不支持透明度,而且锐利边缘和文字周围会出现压缩瑕疵。
  • WebP——同时支持有损和无损模式。在画质相当时,无损 WebP 通常比 PNG 小,有损 WebP 通常比 JPG 小,也支持透明度。现代浏览器已广泛支持,但并非所有图像编辑器和文档格式都能使用。

含文字的截图使用 PNG 最稳妥。JPG 压缩会模糊文字边缘,产生瑕疵,使小字更难辨认。如果文件大小很重要,而且目标环境支持 WebP,可以使用无损 WebP。

何时使用 PNG

  • 含文字的截图——包括 UI 标签、代码、终端输出或其他可读内容的画面。PNG 不会引入模糊,能保留每个字符的边缘。
  • 需要透明度的图像——标志、图标、叠加层,以及需要与其他内容合成的图形。
  • 要求像素准确的文档——技术图表、线框图和带标注的截图,每个像素都需要与原图一致。
  • 源素材与归档——图像日后可能还要编辑、裁剪或重新导出时,从无损源文件开始可以避免多次处理不断叠加画质损失。
  • 批量截图输出——自动截图流程可能生成数百张图片,PNG 的无损特性无需逐张检查,因为格式本身不会改变图像。

常见错误

  • 用 PNG 保存大幅照片。 全分辨率照片保存为 PNG 时很容易超过 10 MB。JPG 或 WebP 可以用小得多的文件呈现观感相同的结果。PNG 应留给确实需要无损画质的内容。
  • 没有优化 PNG 文件。 大多数截图工具默认生成的 PNG 并未达到最佳压缩。优化工具能在像素完全相同的情况下,把文件再减小 20%–50%。
  • 把 JPG 转成 PNG,期待画质改善。 把有损 JPG 转为 PNG 不会恢复已经丢失的画质,JPG 中固化的压缩瑕疵会原样保留,只是 PNG 文件更大。更换格式时应从原始源文件开始。
  • 在网页中忽略文件大小。 网页中嵌入的 PNG 截图如果未经优化,或尺寸不合适,会拖慢加载。嵌入前应按显示尺寸调整并优化,也可以考虑文件更小的无损 WebP。

常见问题

PNG 是无损格式吗?

是。PNG 使用无损压缩,解压后的图像与原图完全相同,压缩过程中不会丢弃任何像素数据。

为什么 PNG 文件比 JPG 大?

PNG 会准确保留每个像素,而 JPG 会丢弃一些人眼不易察觉的视觉信息。JPG 正是以画质换取了更小的文件。

PNG 支持透明度吗?

支持。PNG 的 Alpha 通道允许像素完全透明、完全不透明,或处于两者之间,因此是透明背景图像的标准格式。

照片应该使用 PNG 吗?

一般不建议。照片包含复杂的颜色渐变和噪点,PNG 很难有效压缩,生成的文件会非常大。对于照片内容,JPG 或 WebP 文件小得多,肉眼可见的画质损失也很少。

可以无损减小 PNG 文件吗?

可以。OptiPNG 和 pngquant 等工具能优化压缩参数,在不改变可见像素数据的情况下减小文件。减少调色板颜色(量化)还可以进一步节省空间,视觉差异通常很小。

参考资料

相关资料

什么是 PNG? | 术语表 | Shotomatic