Png的秘密

PNG 的秘密—— 你真的了解 PNG吗？一淘 UX 一丝冰凉旺旺:yisibl

首先我们来看三个问题 什么是 PNG? PNG 有哪些特点? 如何优化 PNG?

一、什么是 PNG?全称是：便携式网络图形（Portable Network Graphics）是一种：无损位图图像文件格式 PNG 诞生于1996年 PNG现行版本是 ISO 国际标准（ISO／ IEC 15948:2003），2003年11月10日成为 W3C 推荐标准

二、PNG 的特点1. 可以逐次逼近显示：先描绘出图片轮廓，然后在逐步显示图像的细节（对应PS里交错选项）2.支持存储附加文本信息：图像名称、作者、版权、创作时间、注释等信息

二、PNG 的特点3.透明性：1）布尔透明(索引透明) 只能为不透明或全透明2）Alpha 透明支持全透明和半透明

PNG各种格式对比格式位数透明支持PNG8 8 不支持PNG8+索引透明 8 仅支持全透明PNG8+alpha透明 8 支持半透明PNG24 24 不支持PNG32 32 支持半透明

PNG各种格式对比软件&格式格式&透明模式说明现代浏览器 IE6 可以设置某像素是全设置与背景颜色一致的杂边变可以达到视觉上 PNG8 索引色透明透明还是完全不透明透明的目的 Fireworks 半透明像素表现为全（256色）透明,且不会出现灰色它秉承PNG32的的半和png32一样支持半 PNG8 Alpha透明背景(缺点是没有索引透明,又支持布尔透明透明透明过渡的自然,会出现毛边) 不透明, 颜色数超过 PNG24 不透明不透明 Fireworks 256色（PNG24/32 真彩色）比PNG24多了8位的透需要使用滤镜等手段 PNG32 明信息，同时支持图支持半透明及全透明支持层信息只能导出布尔透明的 PNG8 支持支持 PNG8 未选透明则导出的是 Photoshop PNG24 PNG24,勾选后其实导（PNG 8/24/32）出的是PNG32 透明区域会显示为蓝支持不支持直接导出（PS 灰底色 PNG32 导入带有图层PNG会导致图层丢失）

万恶的 IE6IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);缺点:增加额外的CPU和内存消耗不适合img方式插入的图片，不支持背景平铺链接失效，表单无法获得焦点，解决方法:1)使链接元素和表单元素获得 hasLayout ，一般是加上:position:relavtive ，但是当父级元素定义为position:absolute时，此方法会失效2)背景层作为独立的容器,并且和内容为同级

IE6 PNG 透明渐进增强对于带有渐变阴影的按钮 现代浏览器使用 Fireworks 导出带 α 透明的PNG-8 现代浏览器 IE6 IE6 半透明部分表现为全透明

IE6 PNG透明渐进增强 如果IE6 也需要半透明效果: Fireworks Photoshop 然后IE6 通过滤镜实现半透明

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

PNG文件的组成 为固定的64个字节：PNG文件署名域十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4e 47 0d 0a 1a 0a 关键数据块数据块的结构辅助数据块数据块摘要

PNG文件的组成 1.PNG文件标志，为固定的64个字节：十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4e 47 0d 0a 1a 0a 2.文件头数据块IHDR(header chunk)——固定长度13字节 3.调色板数据块PLTE(palette chunk) 4.sBIT,tRNS(存储透明信息)块 等。。 5.图像数据块IDAT(image data chunk) 6.图像结束数据IEND(image trailer chunk) ——固定的96个字节： 0x00000000 0x49454e44 0xae426082

我们可以给PNG”开刀了”

示例 PNG头部标示

文件头数据块 IHDR00000008-00000020

小结 PNG优化工具会选择性清除辅助数据块 PNG是基于 LZ77压缩算法压缩的,优化工具会重新压缩到较大的级别(无损)

PNG，JPG，GIF的应用场景

 PNG 就是为了取代GIF而生的，除了动画图片等特殊场景使用，一般推荐使用PNG

PNG与GIF对比图片格式压缩模式交错透明动画 JPG 有损压缩 YES NO NOPNG 无损压缩 YES YES APNG支持 GIF 无损压缩 YES YES YES

PNG动画 APNG格式是一个非官方的扩展自PNG的位图动画格式。 http://image4.360doc.com/DownloadImg/2009/10/22/28 9266_7657398_48.png

运用场景 什么时候应该使用PNG？先来看看这样一个图片标题

JPG 80% 12.0 KB PNG-8 256色 5.54 KB 出现噪点

JPG 80% 33.1 KB 失真更为严重 PNG-8 256色 53.6 KB

小结 图像颜色数量较少,且基本为纯色或者平滑渐变色时使用PNG更优(矢量) 对于图像颜色丰富或者层次较深的图片采用 JPG更优,例如:人物,风景等写实类拍摄照片 对于网页中的背景, 按钮等尽量采用PNG存储, 以保证更好的视觉品质;广告,商品等则可以使用JPG来存储(此时文件更小,更快的加载)

设计湿应该怎么做?掌控像素的虚实: http://cdc.tencent.com/?p=5584 利用路径调整次像素-改善图像的饱满度

推荐压缩工具 PngOptimizer （http://psydk.org/PngOptimizer)

推荐压缩工具 Pngout (http://advsys.net/ken/utils.htm)

推荐压缩工具 雅虎: Smush.ithttp://www.smushit.com/ysmush.it/

谢谢!我的博客: http://iyunlu.com/view 下次见一淘 UX 一丝冰凉 2012-6-20

http://www.iyunlu.com	1452
http://iyunlu.com	99
http://www.zuixiami.com	46
http://www.cnblogs.com	44
http://www.wumii.com	5
http://www.aishoushi.net	1

Png的秘密

by jieorlin on Jun 25, 2012

Accessibility

Upload Details

Usage Rights

6 Embeds 1,647

Statistics

Png的秘密 Presentation Transcript