关于 PNG 格式的一些心得

之前一个朋友跟我讨论 PNG 这个格式的一些细节,突然觉得很有必要深究一下这个格式,其实关于这个话题很早就可以说了,不过由于公司的事情比较多,一直拖到现在。
网络上已经有很多人讲过这个话题,大都直接复制百科的文字或者互相抄袭,而且比较零散,当然也有深入的,研究整个文件构造(无视);还有一些人研究 PNG 的半透明问题,特别是 IE6,前端工程师心中永远的痛,如果没有 IE6 那么大的市场占有率(中国),前端也能多活几年。
扯远了,转入正题。

到底 PNG 格式有多少种,它们之间有啥区别?

PNG 格式包含:PNG8 PNG24 PNG32 三大类。一图顶千言,看图吧

总结:

1.PNG8 文件大小控制的很好,大多数情况下比 gif 更小,支持布尔透明,方便在网页中使用,用于替代 gif 格式。
2.PNG24 跟 PNG32 在色彩表现上没有区别,文件大小差别也不大,PNG32 支持透明,而 PNG24 没有透明通道,不支持透明
3. 神奇的 Fireworks 支持保存包含图层的 PNG32 格式,不过这些图层信息会在导入到 PS 等图像处理工具的时候被丢弃(合并)。

Photoshop 跟 Fireworks 导出的 PNG 有区别吗?

这个事情是很多刚接触 PNG 格式的人很疑惑的问题。

直观感受:

Photoshop 在导出图片时可以选择 png8 及 png24 两种格式
Fireworks 在导出图片时可以选择 PNG8 PNG24 及 PNG32 三种格式

实际情况:

Photoshop 支持导出的格式有 PNG8(布尔透明)、PNG24(不透明)、PNG32(布尔透明/Alpha 透明)
Fireworks 支持导出 PNG8(布尔透明/Alpha 透明) 、PNG24(不透明)、PNG32(布尔透明/Alpha 透明)

总结:

Fireworks 在导出格式支持方面更加丰富,可以保存本身包含图层的 PNG32 源文件以及导出 Alpha 透明的 PNG8 格式

一些疑惑

PS 是不是没办法导出 PNG32 格式的图片?
PS 导出的 PNG24 为什么可以半透明,而 Fireworks 不行?

答疑

1.PS 可以导出 PNG32 格式的图片,只要在导出的时候勾选导出格式下方的“半透明”即可

2. 查看导出的文件属性就知道,其实确实是 PNG32 格式

3.PS 有个特殊情况,如果图片没有包含透明部分,就算勾选“半透明”,还是会被存储为 PNG24 的格式
4.PNG24 本身就不支持透明,导出的时候自然不透明,只是 PS 把 PNG24 和 PNG32 用一个透明度的选项来区分

后话

关于格式问题就说到这儿,还有什么问题,可以留言
以后有时间再专门谈一下关于 PNG 格式的压缩问题以及跟 IE6 的支持问题
PS:虽然现在 Fireworks 已经有点淡出网页设计,但是还是有很多地方可以继续利用的,工具还是要配合着使用

《关于 PNG 格式的一些心得》有3个想法

  1. 我觉得你应该再加上解释 png 文件头,文件尾,如何析取出 PNG 文件的教程文章。
    我现在看到 89 50 4E 和 42 60 82 都头大啊。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注