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（JPEG 格式），這種格式經常寫成JPG，JPG圖片的副檔名為jpg。

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

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

PNG 是20世紀90年代中期開始開發的影像檔儲存格式，其目的是企圖替代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的真實的威力。

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

