国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

Png的秘密 — 內(nèi)容簡介

• 1. PNG 的秘密—— 你真的了解 PNG嗎？ By一淘 UX 一絲
•  
• 2. 首先我們來看三個問題：
• ◆什么是 PNG?
• ◆PNG 有哪些特點(diǎn)?
• ◆ 如何優(yōu)化 PNG?
•  
• 3. 一、 什么是 PNG?
• ◆全稱是： 便攜式網(wǎng)絡(luò)圖形（Portable Network Graphics） 是一種：無損位圖圖像文件格式
• ◆ PNG 誕生于1996年
• ◆ PNG現(xiàn)行版本是 ISO 國際標(biāo)準(zhǔn)（ISO／ IEC 15948:2003），2003年11月10日成為 W3C 推薦標(biāo)準(zhǔn)。
•  
• 4. 二、PNG 的特點(diǎn)
• 1）. 可以逐次逼近顯示： 先描繪出圖片輪廓，然后在逐步顯示圖像 的細(xì)節(jié)（對應(yīng)PS里交錯選項(xiàng)）
• 2）.支持存儲附加文本信息： 圖像名稱、作者、版權(quán)、創(chuàng)作時間、注釋 等信息
• 3）.透明性：①布爾透明(索引透明) 只能為不透明或全透明。  ②Alpha 透明 支持全透明和半透明。
•  
• 5. PNG各種格式對比
• 
• 6. PNG各種格式對比 
• 
•  
• 7. 萬惡的 IE6
• IE6 PNG 半透明: filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”img. png”, sizingMethod=”scale”);
• 缺點(diǎn):◆增加額外的CPU和內(nèi)存消耗
•          ◆不適合img方式插入的圖片，不支持背景平鋪
•          ◆鏈接失效，表單無法獲 得焦點(diǎn)，解決方法:①使鏈接元素和表單元素獲得 hasLayout ，一般是加上:position:relavtive ，但是當(dāng)父級元素定義為position:absolute時，此方法會失效②背景層作為獨(dú)立的容器,并且和內(nèi)容為同級
•  
• 8. IE6 PNG 透明漸進(jìn)增強(qiáng)

• 對于帶有漸變陰影的按鈕：◆現(xiàn)代瀏覽器使用 Fireworks 導(dǎo)出帶 α 透明 的PNG-8 現(xiàn)代瀏覽器  IE6 半透明部分表現(xiàn)為全透明
•                                         ◆ 如果IE6 也需要 半透明效果: Fireworks Photoshop
•                                         ◆ 然后IE6 通過濾鏡實(shí)現(xiàn)半透明
•  
• 9. 小結(jié)
• ◆PNG格式有8位、24位、32位三種形式，其中8位PNG支持兩種不同 的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位 PNG 在24位基礎(chǔ)上增加了8位透明通道，因此可展現(xiàn)256級透明程度。
• ◆Photoshop不支持也不能輸出PNG8+alpha 透明的PNG，32位PNG輸出是由24位PNG 加透明信息形式輸出，所以Fireworks對 PNG 支持較好。
• ◆ 非IE6的瀏覽器都能正常顯示包含透明信息的PNG圖片，而IE6在濾鏡 的幫助下能夠正常展示PNG8+索引透明以及32位的透明PNG圖像， 但是對 PNG8+alpha透明的圖像支持不夠好。
•  
• 10. PNG文件的組成 -----  ◆PNG文件署名域?yàn)楣潭ǖ?4個字節(jié)： 十進(jìn)制數(shù) 137 80 78 71 13 10 26 10 十六進(jìn)制數(shù) 89 50 4e 47 0d 0a 1a 0a   數(shù)據(jù)塊的結(jié)構(gòu) = 關(guān)鍵數(shù)據(jù)塊+ 輔助數(shù)據(jù)塊+ 數(shù)據(jù)塊摘要
•  
• 11. PNG文件的組成
• ◆ 1.PNG文件標(biāo)志，為固定的64個字節(jié)： 十進(jìn)制數(shù) 137 80 78 71 13 10 26 10 十六進(jìn)制數(shù) 89 50 4e 47 0d 0a 1a 0a
• ◆ 2.文件頭數(shù)據(jù)塊IHDR(header chunk)——固定長度13字節(jié)
• ◆ 3.調(diào)色板數(shù)據(jù)塊PLTE(palette chunk)
• ◆4.sBIT,tRNS(存儲透明信息)塊?等。。
• ◆ 5.圖像數(shù)據(jù)塊IDAT(image data chunk)
• ◆ 6.圖像結(jié)束數(shù)據(jù)IEND(image trailer chunk) ——固定的96個字節(jié)： 0x00000000 0x49454e44 0xae426082
•  
• 12. 我們可以給PNG”開刀了”
• 13. 示例 PNG頭部標(biāo)示
• 14. 文件頭數(shù)據(jù)塊 IHDR00000008-00000020
• 15. 小結(jié)
• ◆PNG優(yōu)化工具會選擇性清除輔助數(shù)據(jù)塊
• ◆ PNG是基于 LZ77壓縮算法壓縮的,優(yōu)化工 具會重新壓縮到較大的級別(無損)
•  
• 16. PNG，JPG，GIF的應(yīng)用場景
• 17. ◆PNG 就是為了取代GIF而生的，除了動畫 圖片等特殊場景使用，一般推薦使用PNG
• 18. PNG與GIF對比
• 
  
•  
• 19. PNG動畫
• ◆ APNG格式是一個非官方的擴(kuò)展自PNG的 位圖動畫格式。http://image4.360doc.com/DownloadImg/2009/10/22/28 9266_7657398_48.png

• 20. 運(yùn)用場景
• ◆ 什么時候應(yīng)該使用PNG？ 先來看看這樣一個圖片標(biāo)題
•  
• 21. JPG 80% 12.0 KB PNG-8 256色 5.54 KB 出現(xiàn)噪點(diǎn)
• 22. JPG 80% 33.1 KB 失真更為嚴(yán)重 PNG-8 256色 53.6 KB
• 23. 小結(jié)
• ◆ 圖像顏色數(shù)量較少,且基本為純色或者平滑漸 變色時使用PNG更優(yōu)(矢量)
• ◆對于圖像顏色豐富或者層次較深的圖片采用 JPG更優(yōu),例如:人物,風(fēng)景等寫實(shí)類拍攝照片
• ◆ 對于網(wǎng)頁中的 背景, 按鈕等盡量采用PNG存儲, 以保證更好的視覺品質(zhì);廣告,商品等則可以使 用JPG來存儲(此時文件更小,更快的加載)
•  
• 24. 設(shè)計濕應(yīng)該怎么做?
• 掌控像素的虛實(shí): http://cdc.tencent.com/?p=5584 利用路徑調(diào)整次像素-改善圖像的飽滿度
•  
• 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