问png 格式详解 无损位图图像规范

PNG 是一种支持透明通道的无损压缩位图图像格式，全称是 Portable Network Graphics，设计初衷是用来替代老旧的 GIF 格式，它最大优势是压缩之后不会损失图像原始画质，同时支持透明背景，在网页设计 UI 图标产品界面素材里面使用非常广泛，很多人会混淆 PNG 和 JPG，核心差别就是 PNG 属于无损压缩，JPG 属于有损压缩，PNG 可以保留边缘锐利的文字线条图标，但是同等画面下文件体积通常会比 JPG 更大，理解这个格式要从编码原理色彩模式透明特性压缩方式适用场景几个维度入手，掌握之后就可以根据需求判断什么时候该保存 PNG，什么时候选择其他图片格式。

基础定义与发展背景

PNG 在 1996 年正式推出，属于开放免费的图像标准，没有专利授权费用，这也是它能够快速普及的重要原因。它属于栅格位图，也就是由一个个像素点拼接组成的图片，不是矢量图形，放大之后依然会出现像素锯齿。它的核心设计目标，解决 GIF 两个短板，第一 GIF 最高只支持 256 色，色彩能力有限，第二 GIF 存在专利限制，商业使用曾经有授权风险。PNG 保留 GIF 的透明能力，同时升级色彩深度，还增加伽马校正支持，跨设备显示颜色更加稳定。

PNG 三种子类型

PNG 内部分成三种标准子类型，不同子类型色彩能力不一样，实际导出的时候软件会自动选择，也可以手动指定。

清单如下

1 PNG 8 位 也就是 PNG8，最多支持 256 种颜色，支持 1 位二值透明，适合简单图标，体积最小，色彩少的素材首选

2 PNG 24 位 也就是 PNG24，支持真彩色，一千六百多万种颜色，不支持半透明渐变透明，适合色彩丰富但是不需要透明的照片类素材

3 PNG 32 位，在 PNG24 基础上增加 8 位 Alpha 透明通道，支持半透明渐变透明，也就是常说的带透明渐变的 PNG，UI 设计里面最常用

核心特性对照表

压缩原理深度说明

PNG 使用 DEFLATE 压缩算法，这个算法结合 LZ77 编码和哈夫曼编码，它的逻辑是查找图片里面重复的像素数据，把重复数据进行编码替换，解码之后可以完全还原原始像素，不会像 JPG 那样丢弃人眼不容易察觉的细节，所以叫无损压缩。

这个算法有一个特点，纯色块边缘整齐的图片压缩效率很高，比如图标 logo 文字，压缩之后体积很小。如果是复杂渐变噪点很多的摄影照片，重复像素很少，压缩效率很低，导出 PNG 之后文件会非常大，这种场景就不推荐 PNG。

透明通道原理

PNG 的 Alpha 通道是它的核心亮点，Alpha 通道记录每一个像素的透明度数值，数值 0 代表完全透明，255 代表完全不透明，中间数值就是半透明。这个能力可以实现柔和的边缘羽化，图标叠加在不同底色背景的时候不会出现生硬白边，这也是网页和设计软件大量使用 PNG 的关键原因。

注意 PNG8 只有二值透明，像素要么全透明要么不透明，没有中间半透明数值，如果需要羽化边缘，必须使用 PNG32。

操作导出步骤

第一步 打开设计软件，比如 PS Figma 或者画图工具，完成图像编辑

第二步 选择导出，格式选择 PNG

第三步 根据素材需求选择子类型，简单图标选 PNG8，需要半透明渐变选 PNG32

第四步 设置色彩深度，确认是否保留 Alpha 透明通道

第五步 执行导出，检查预览，确认透明区域和画质没有变化

第六步 对比文件大小，如果体积过大，可以考虑优化 PNG，使用 PNG 压缩工具二次无损优化

PNG 优缺点

优点

无损画质，文字线条边缘锐利，支持半透明，免费开放标准，跨平台兼容，Windows Mac 浏览器设计软件全部原生支持

缺点

不支持原生动画，复杂照片体积偏大，不适合印刷大尺寸高清照片，不支持图层，导出之后图层会合并成单张位图

和常见图片格式对比

JPG 有损压缩，不支持透明，适合照片，体积小

GIF 最多 256 色，支持简单透明和动画，色彩弱

WebP 同时支持有损无损和动画，体积比 PNG 更小，但是老设备兼容性弱于 PNG

SVG 矢量图，无限放大不失真，和 PNG 位图本质不同

综合来看 PNG 是面向锐利图形透明素材的无损位图标准，核心价值就是无损画质加 Alpha 半透明，适合 UI 图标文字 logo，不适合大体积摄影原图，掌握三种子类型和压缩特点，就能正确选用 PNG 格式。

【常见问题】

问题 1 png 格式是有损还是无损压缩

回答 1 png 格式属于无损压缩，解码之后可以完整还原原始像素，不会丢失图像细节，这是 png 格式最核心的特点

问题 2 png 格式支持半透明吗

回答 1 不对，是回答 2，png 格式的 PNG32 子类型支持 Alpha 半透明渐变透明，PNG8 只支持全透明或者不透明二值透明

问题 3 png 格式可以做动态动画吗

回答 3 png 格式原生标准不支持动画，如果需要动态透明动画，一般会选用 APNG 或者 GIF，APNG 是 PNG 的动画扩展版本

问题 4 png 格式为什么照片文件特别大

回答 4 png 格式使用无损压缩，复杂照片重复像素少，压缩效率低，所以导出 png 格式之后文件体积会明显大于 JPG

【免责申明】

本文内容仅作为 png 格式技术科普，不同设计软件导出选项存在差异，特殊工业印刷网页项目请结合实际规范要求，本文内容不作为唯一技术判定依据。