html頁面中圖像格式的選用之我見_經驗交流

今天有學生問我：頁面中使用GIF格式，失真太大，怎麼辦呢？這個問題比較簡單啊，只要用JPG就可以了。我們常用的頁面的圖片格式有三種，GIF、JPG、PNG。那麼這三種格式我們要怎麼選擇使用呢？以下就我的一些經驗來談談我對這三種格式的使用上的一些看法。

下面我們先了解幾種格式的比較正式的解釋(註：以下內容源自百度知道)：

GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif。現在所有的圖形瀏覽器都支援GIF格​​式，而且有的圖形瀏覽器只認識GIF格式。 GIF是一種索引色彩格式，在色數很少的情況下，產生的檔案極小，它的優點主要有： 

GIF格式支援背景透明。 GIF圖片如果背景色設定為透明，它將與瀏覽器背景結合，產生非矩形的圖片。 
GIF格式支援動畫。在Flash動畫出現之前，GIF動畫可以說是網頁中唯一的動畫形式。 GIF格式可以將單幀的圖象組合起來，然後輪流播放每一幀而成為動畫。雖然並不是所有的圖形瀏覽器都支援GIF動畫，但是最新的圖形瀏覽器都已經支援GIF動畫。 
GIF格式支援圖形漸進。漸進式是指圖片漸進顯示在螢幕上，漸進圖片將比非漸進圖片更快出現在螢幕上，可以讓訪客更快知道圖片的概貌。 
GIF格式支援無損壓縮。無損壓縮是不損失圖片細節而壓縮圖片的有效方法，由於GIF格式採用無損壓縮，所以它更適合線條、圖示和圖面。 
GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產物，在DOS下的老遊戲幾乎無一例外的採用索引顏色，這種格式本來早就該淘汰了。但是由於頻寬的限制，GIF從DOS時代紅到了Internet時代。 GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對於照片品質的圖片是顯然不夠的。

JPEG 代表Joint Photograhic Experts Group（聯合影像專家小組），此格式常寫成JPG，JPG圖片的副檔名為jpg。 

JPG最主要的優點是能支援數百萬種顏色，因此可以用來表現照片。此外，由於JPG圖片使用更有效的有損壓縮演算法，從而使檔案長度更小，下載時間更短。有損壓縮會放棄影像中的某些細節，以減少檔案長度。它的壓縮比相當高，使用專門的JPG壓縮工具其壓縮比可達180：1，而且影像品質從瀏覽角度來講品質受損不會太大，這樣就大大方便了網路傳輸和磁碟交換檔。 JPG較GIF更適合照片，因為在照片中失去一些細節不像對藝術線條那麼明顯。另外，JPG對照片的壓縮比例更大，最後的品質也更好。

但是從長遠來看，JPG隨著頻寬的不斷提高和儲存媒體的發展，它也應該是一種被淘汰的圖片格式，因為有損壓縮對影像會產生不可恢復的損失。所以經過壓縮的JPG的圖片通常不適合列印，備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF影像那麼靈活，它不支援圖形漸進、背景透明，更不支援動畫。

PNG 是1990年代中期開始開發的影像檔案儲存格式，其目的是企圖取代GIF和TIFF檔案格式，同時增加一些GIF檔案格式所不具備的特性。串流網路圖形格式(Portable Network Graphic Format，PNG)名稱源自於非官方的“PNG's Not GIF”，是一種位圖檔案(bitmap file)儲存格式，讀成“ping”。 PNG用來儲存灰階影像時，灰階影像的深度可多到16位，在儲存彩色影像時，彩色影像的深度可多到48位，並且還可儲存多到16位的α通道資料。 PNG使用從LZ77派生的無損資料壓縮演算法。 

PNG檔案格式保留GIF檔案格式的下列特性： 

使用彩色查找表或稱為調色盤可支援256種顏色的彩色影像。 
串流讀取/寫入效能(streamability)：影像檔案格式允許連續讀出和寫入影像資料 
這個特性很適合在通訊過程中產生和顯示影像。
逐次逼近顯示(progressive display)：此特性可使在通訊鏈路上傳輸影像檔案的同時就在終端上顯示影像，將整個輪廓顯示出來之後逐步顯示影像的細節，也就是先用低解析度顯示影像，然後逐步提高它的解析度。 
透明性(transparency)：這個效能會使影像中某些部分不顯示出來，用來創造一些有特色的影像。 
輔助資訊(ancillary information)：這個特性可用於在影像檔案中儲存一些文字註解資訊。 
獨立於電腦軟硬體環境。 
使用無損壓縮。 
PNG檔案格式中要增加下列GIF檔案格式所沒有的特性： 

每個像素為48位元的真彩色影像。 
每個像素為16位元的灰階影像。 
可為灰階圖和真彩色圖新增α通道。 
新增影像的γ資訊。 
使用循環冗餘碼(cyclic redundancy code，CRC)偵測損壞的檔案。 
加快影像顯示的逐次逼近顯示方式。 
標準的讀取/寫入工具包。 
可在一個檔案中儲存多個影像。 
檔案結構 

這三種格式各有優缺點，其中PNG優點多多。雖然普及得還很一般，但是其特殊的優越性已經讓我們對其產生非常大的興趣。至少我現在很喜歡這種格式。當然了對製作頁面的製作人員來說，頁面總體積的大小那就是競爭力。所以我們還是必需要注意這三種格式的混合使用。那以什麼時候用GIF什麼時候用PNG什麼時候用JPG呢？我們下面一一來分析。

在實際的工作中，我發現一般的純色的圖形，比如一些小圖標、平鋪背景其中的色彩比較少，那麼作為GIF格式雖然只有256種色彩，但是應對這種類型的圖片那一定是非常的合適的。當然了，不排除有一些特別的小圖標色彩的豐富性，但是相信作為小圖標其色彩有點損失也不會影響到整體的視覺效果，所以GIF的適用範圍是：小圖標、平鋪背景等色彩比較少的小型圖片。

那麼大圖片又怎麼選擇呢，首先我們先了解一下JPG，我們使用Photoshop的朋友都知道，在最後導出圖片時會有一個地方讓我們選擇這個JPG圖片的圖片品質，100 %是表示無壓縮，當我們拿同一張圖片導出不同的品質圖片對比時我們發現品質低的很明顯會比品質高的髒了很多，這樣照片看起來就很不好，當然我們也發現這種情況在偏大色塊的圖片中猶為突出。所以比如天空、人像。特別人像臉部會出現很難看的黑斑。當然如果對於照片品質要求不嚴格可以使用JPG並且降低品質。但是不適用於背景、小圖示。

我個人覺得PNG是介於GIF與高品質JPG之間的一種選擇，如果是簡純的小圖標，PNG會比GIF大這麼一點，但是品質上是差不多的。如果是普通的圖片，那麼PNG還是要比高品質的JPG要小一點的，但是PNG還是有點色彩損失的。不過如果圖片不放大基本上看不出來。我們做頁面基本上不是為了讓人放大了挑刺。所以PNG也就是介於中間的一種選擇。當然了，PNG還有一個很棒的優點，那就是透明，雖然IE6之前還不支援這個特性。 GIF也有透明，但是GIF只支援絕對的透明，不支援半透明，所以GIF的圖片的邊緣常會有一圈的白色的小點。而PNG就沒有這些問題，隨著時代的發展當IE6成為歷史的時候我想我們就可以看到PNG的真實的威力。

當然了有一種特別的情況可能會很特別，那就是背景圖片與前景圖片的切合處，這種地方需要色彩結構一致才能產生良好的視覺效果。那麼這種時候要注意盡可能的不要使用不同格式混合使用。