PNG是我们经常使用的图片格式，但是你真的了解PNG吗？
此次一淘前端分享会，一丝冰凉将带大家深入了解你不知道的PNG。首先有三个问题：
什么是 PNG?
PNG 有哪些特点?
如何优化 PNG?
Png的秘密 — 内容简介
- 1. PNG 的秘密—— 你真的了解 PNG吗？ By一淘 UX 一丝冰凉 旺旺:yisibl
- 2. 首先我们来看三个问题：
- ◆什么是 PNG?
- ◆PNG 有哪些特点?
- ◆ 如何优化 PNG?
- 3. 一、 什么是 PNG?
- ◆全称是： 便携式网络图形（Portable Network Graphics） 是一种：无损位图图像文件格式
- ◆ PNG 诞生于1996年
- ◆ PNG现行版本是 ISO 国际标准（ISO／ IEC 15948:2003），2003年11月10日成为 W3C 推荐标准。
- 4. 二、PNG 的特点
- 1）. 可以逐次逼近显示： 先描绘出图片轮廓，然后在逐步显示图像 的细节（对应PS里交错选项）
- 2）.支持存储附加文本信息： 图像名称、作者、版权、创作时间、注释 等信息
- 3）.透明性：①布尔透明(索引透明) 只能为不透明或全透明。 ②Alpha 透明 支持全透明和半透明。
- 5. PNG各种格式对比
- 6. PNG各种格式对比
- 7. 万恶的 IE6
- IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);
- 缺点:
- ◆增加额外的CPU和内存消耗
- ◆不适合img方式插入的图片，不支持背景平铺
- ◆链接失效，表单无法获 得焦点，解决方法:①使链接元素和表单元素获得 hasLayout ，一般是加上:position:relavtive ，但是当父级元素定义为position:absolute时，此方法会失效②背景层作为独立的容器,并且和内容为同级
- 8. IE6 PNG 透明渐进增强
- 对于带有渐变阴影的按钮：
- ◆现代浏览器使用 Fireworks 导出带 α 透明 的PNG-8 现代浏览器 IE6 半透明部分表现为全透明
- ◆ 如果IE6 也需要 半透明效果: Fireworks Photoshop
- ◆ 然后IE6 通过滤镜实现半透明
- 9. 小结
- ◆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透明的图像支持不够好。
- 10. PNG文件的组成 ----- ◆PNG文件署名域为固定的64个字节： 十进制数 137 80 78 71 13 10 26 10 十六进制数 89 50 4e 47 0d 0a 1a 0a 数据块的结构 = 关键数据块+ 辅助数据块+ 数据块摘要
- 11. 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
- 12. 我们可以给PNG”开刀了”
- 13. 示例 PNG头部标示
- 14. 文件头数据块 IHDR00000008-00000020
- 15. 小结
- ◆PNG优化工具会选择性清除辅助数据块
- ◆ PNG是基于 LZ77压缩算法压缩的,优化工 具会重新压缩到较大的级别(无损)
- 16. PNG，JPG，GIF的应用场景
- 17. ◆PNG 就是为了取代GIF而生的，除了动画 图片等特殊场景使用，一般推荐使用PNG
- 18. PNG与GIF对比
- 19. PNG动画
- ◆ APNG格式是一个非官方的扩展自PNG的 位图动画格式。http://image4.360doc.com/DownloadImg/2009/10/22/28 9266_7657398_48.png
- 20. 运用场景
- ◆ 什么时候应该使用PNG？ 先来看看这样一个图片标题
- 21. JPG 80% 12.0 KB PNG-8 256色 5.54 KB 出现噪点
- 22. JPG 80% 33.1 KB 失真更为严重 PNG-8 256色 53.6 KB
- 23. 小结
- ◆ 图像颜色数量较少,且基本为纯色或者平滑渐 变色时使用PNG更优(矢量)
- ◆对于图像颜色丰富或者层次较深的图片采用 JPG更优,例如:人物,风景等写实类拍摄照片
- ◆ 对于网页中的 背景, 按钮等尽量采用PNG存储, 以保证更好的视觉品质;广告,商品等则可以使 用JPG来存储(此时文件更小,更快的加载)
- 24. 设计湿应该怎么做?
- 掌控像素的虚实: http://cdc.tencent.com/?p=5584 利用路径调整次像素-改善图像的饱满度
- 25. 推荐压缩工具◆ PngOptimizer （http://psydk.org/PngOptimizer)
- 26. 推荐压缩工具◆ Pngout (http://advsys.net/ken/utils.htm)
- 27. 推荐压缩工具◆ 雅虎: Smush.it（http://www.smushit.com/ysmush.it/）
- 28. 谢谢!我的博客: http://iyunlu.com/view 下次见 一淘 UX 一丝冰凉 2012-6-20
