GIF,JPG仍是PNG選擇合適的圖片格式

轉自：IT屌絲，碼農之家

從某種程度上說，判斷一個網頁設計師是否優秀，能夠從其在WEB開發（或網頁設計）中是否合理的採用各類圖片格式得出結論。事實上，或許全部人都知道圖片存在GIF,JPG和PNG等格式，但並不是全部人都知道它們之間的具體區別和使用技巧。

接下來，代碼吾愛將給你們介紹：WEB開發中幾種最受歡迎圖片格式的前世此生以及如何正確的使用它們。

1.JPEG?
      JPEG格式是一種大小與質量相平衡的壓縮圖片格式。通俗一點講，就是：高的壓縮比=低的圖片質量=小的文件大小。反之，低的壓縮比=高的圖片質量=大的文件大小。因爲JPEG文件沒法保持100 ％的原始圖像的像素數據，因此它不被認爲是一種無損圖像格式。

用途：
      因爲這種極其敏感的平衡特性，JPEG很是適合被應用在那些容許輕微失真的像素色彩豐富的圖片（照片）場合。反之，JPEG格式圖片並不適合作簡單色彩（色調少）的圖片，好比LOGO，各類小圖標（ICONS）。

2.GIF
    GIF格式，是爲使圖片可以應用在在線（online）應用程序上所特別開發的圖片格式。Gif，有時也被成爲「Giff」，是一種無損，8位圖片格式。「無損」是指100%的保持原始圖片的像素數據信息。專業名詞「8位」是指，所能表現的顏色深度——一個8位圖像僅最多隻能支持256種不一樣顏色（一個多餘256種顏色的圖片若用gif圖片保存會出現失真）。

用途：
    因爲8位顏色深度的限制，Gif不適合應用於各類色彩過於豐富的照片存儲場合。但它卻很是適合應用在如下場合：
* Logo
* 小圖標（Icon） 
* 用於佈局的圖片（例如某個佈局角落，邊框等等）
* 僅包含不超過256種色彩的簡單，小型圖片場合 

透明特性：
    GIF支持基本的透明特性，這意味着你可以使圖片的某些像素「不可見」。在其被放置到網頁中時，咱們就能夠看到經過這些不可見區域看到此圖片後面的背景顏色（圖片）。此特性很是有用：若是你須要將某個gif圖片的內容置於全部圖片的上層，你能夠將其設置爲透明。

壓縮特性：
    GIF格式採用LZW算法進行壓縮，此算法是Unisys申請的一項專利。在好久好久以前，若是你想使用GIF格式，那麼就意味着你須要向Unisys付費申請專利許可。不過值得高興的是，此項專利技術已於2003年6月20日過時，咱們如今能夠免費的使用GIF了！

隔行掃描：
    GIF同時也支持隔行掃描。隔行掃描可以令圖片在瀏覽器中更快的加載和顯示。此特性對於那些慢網速的瀏覽者來講尤爲實用。

動畫GIF：
     一個動態的GIF文件，是由若干幀圖片所聯結而成的動態圖片。在顯示時，這些動態幀被反覆的繪製讀取出來從而造成了簡單的動畫效果。合理的運用GIF動畫可以爲網頁增添動靜結合的效果，而過分的使用則會使網頁雜亂無章。

3.PNG
    PNG，讀「ping」，初始時被做爲GIF的免費替代格式所開發，採用公共專利壓縮算法。PNG格式也是一種無損壓縮，但與GIF格式不一樣的是，PNG同時支持8位和24位的圖像。

8位PNG圖像：
     一個8位PNG圖片，支持透明背景且像素顏色不能超過256種。除了壓縮算法不一樣以外，此8位PNG格式與GIF格式極其類似；

用途：
     8位PNG圖片的用途與GIF格式基本相同，
* Logo
* 小圖標（Icon） 
* 用於佈局的圖片（例如某個佈局角落，邊框等等）
* 僅包含不超過256種色彩的簡單，小型圖片場合 

24位PNG圖像：
    24位PNG，支持160萬種不一樣的像素顏色且支持Alpha透明效果，這就意味着，不管透明度設置爲多少，PNG圖片均可以與背景很好的融合在一塊兒。

對PNG的支持：
    因爲PNG格式的普遍使用和開發者更加劇視網頁的WEB標準，不一樣瀏覽器對PNG的支持就顯得至關重要了。不過，幸運的是，目前市場上主流的瀏覽器對PNG格式都有很好的支持，這包括：IE*, Firefox, Safari, Opera, and Konqueror。
*但不幸的是，IE6及IE6如下的瀏覽器對PNG透明背景的支持並很差。不過咱們仍能夠經過其餘方法來解決這個問題，詳情請查看如何在IE6中正常顯示透明PNG。