查看文章
 
说说PNG的那点事儿
2010-04-02 7:15


PNG格式对于前端开发者来说再熟悉不过了,我在这里想说说关于PNG的不同格式以及浏览器的支持问题。

PNG格式类型

PNG格式有8位、24位、32位,也支持透明、半透明,位数和透明方式也可以组合在一起。

PNG8

8位的PNG和GIF看上去差不多,最多支持256种颜色,8位的PNG支持索引透明(即和GIF一样的那种只有全透和全不透两种效果)和 alpha透明(支持半透明)。

PNG24

24位的PNG没啥可说的了,支持2的24次方的颜色数量,但是没有透明信息。

PNG32

32位的PNG在24位的PNG基础上增加了8位的透明信息,因此支持不同程度的半透效果。

PNG各种格式如下表所示:

格式

位数

透明支持

PNG8 8 不支持
PNG8+索引透明 8 仅支持全透明
PNG8+alpha透明 8 支持半透明
PNG24 24 不支持
PNG32 32 支持半透明

生成工具

在Fireworks中,以上提到的各种格式PNG都能正确生成,只要在OPTIMIZE面板中选择相应的格式即可。


而在Photoshop(简称Ps)中,PNG格式选择可以通过选择File菜单的Save for Web & Devices实现,但是Ps不支持8位PNG+alpha透明的格式,而且Ps中也没有32位PNG选项,但其中的PNG24+透明实际上就是 PNG32。


浏览器支持情况

下面我们测试一下浏览器对透明PNG的支持情况,其中IE6使用滤镜对PNG图片进行加载。其余浏览器则使用img标签。经过试验,发现非IE6浏览器表现一致,而IE6对PNG8+alpha透明支持的不够好,图像半透明部分是完全按照全透明方式进行处理的。 测试结果如下图所示:


结论

  1. PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG 在24位基础上增加了8位透明通道,因此可展现256级透明程度。
  2. Photoshop不支持也不能输出PNG8+alpha透明的PNG,32位PNG输出是由24位PNG加透明信息形式输出,而Fireworks对 PNG支持较好。
  3. 非IE6的浏览器都能正常显示包含透明信息的PNG图片,而IE6在滤镜的帮助下能够正常展示PNG8+索引透明以及32位的透明PNG图像,但是对 PNG8+alpha透明的图像支持不够好。

类别:web开发||添加到搜藏 |分享到i贴吧|浏览(890)|评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
     

   
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2012 Baidu