對圖片理解的誤區

由於最近在看性能優化，把以前寫的一篇筆記關於圖片的筆記搬到這裏來，在性能優化中，圖片的優化也是一個很重要的方面

png8 png24理解的誤區

圖片格式

---

png gif jpeg的優缺點以及使用場景。png八、png2四、png32的區別

比較多的解釋

區別：

• png8和png24的根本區別，不是顏色位的區別，而是存儲方式不一樣。
• png8有1位的布爾透明通道（要麼徹底透明，要麼徹底不透明），png24則有8位（256階）的布爾透明通道（所謂半透明）。 
  png-8 和 gif 有一些類似之處，模式都是索引顏色，只支持像素級的純透明，不支持 alpha 透明。 
  咱們一般說的「IE6 不支持 PNG 透明」，是指不支持 PNG-24 的透明。可是 IE6 支持 PNG-8 的透明，就像支持gif 的透明同樣。

這樣咱們在工做中就有了方向：

• 色彩豐富的、大的圖片切成jpg的；
• 尺寸小的，色彩不豐富的和背景透明的切成gif或者png8的；
• 半透明的切成png24。

圖片格式區別及使用場景

png8

• png要麼全透明，要麼徹底不透明。不支持半透明。[這種說法是不正確的]
• 若是把一張須要透明的圖存爲png8格式的話，則圖四周會展現不光滑而且有鋸齒【ps不支持png8 加alpha透明】

不一樣的解釋

索引透明盒alpha透明：

• 索引透明：相似於GIF，某一像素只有全透和全不透明兩種效果
• Alpha透明：半透明
• png8-8位 png24-24 png32-32 
  PNG圖片類型
• PNG格式有8位、24位、32位三種

PNG8:

• 8位的PNG最多支持256（2的8次方）種顏色，8位的PNG支持索引透明和alpha透明。

PNG24:

• 支持2的24次方種顏色，但不支持透明信息。

PNG32:

• 32位的PNG在24位的PNG基礎上增長了8位的透明信息，所以支持不一樣程度的半透效果

格式	顏色種類	位數	透明主持
PNG8	2的8次方	8	不支持
PNG8+索引透明	2的8次方	8	僅支持全透或全不透明
PNG8+alpha透明	2的8次方	8	支持半透明
PNG24	2的24次方	24	不支持
PNG32	2的32次方	32	支持半透明

總結

• PNG格式有8位、24位、32位三種形式;
• 8位PNG支持兩種不一樣的透明形式（索引透明和alpha透明）;
• 24位PNG不支持透明；
• 32位PNG 在24位基礎上增長了8位透明通道，所以可展示256級透明程度。
• Photoshop不支持也不能輸出PNG8+alpha透明的PNG；
• Photoshop32位PNG輸出是由24位PNG加透明信息形式輸出；

ie6對png圖片支持狀況

• IE6在濾鏡的幫助下可以渲染PNG32的透明PNG圖像
• IE6下不管是不是用濾鏡，半透明部分是徹底按照全透明方式進行處理；
• IE6對 PNG8+alpha透明的圖像支持不夠好

我的理解：

• 日常所說的png24實際上是png32
• png8不支持半透明應該是不對的，通常狀況下ps不支持png8+alpha通道的透明輸出，只支持png8索引透明

gif png jpg 
gif

• 支持動畫，不支持半透明，支持動畫，適用於很小或是較簡單的圖片

png

• 體積小[PNG-8會在同等質量下得到比GIF更小的體積]，支持半透明，【具體看是png八、png2四、png32】

jpeg

• JPG所能顯示的顏色比GIF,PNG要多的多[png 24/png32支持的顏色比png8 多],同時獲得很好的壓縮,因此JPG很適用於保存數碼照片.可是注意它是一種失真壓縮,這意味着你每次修改圖片都會形成像素失真.

學習筆記參考閱讀的連接

• http://www.17ria.com/article/184
• http://www.cnblogs.com/rainman/archive/2011/09/11/2173597.html
• http://xuqian0808.blog.163.com/blog/static/1701257102012112442752493/