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/）
作者：白樹