今天有個學(xué)生問我：頁面中使用GIF格式，失真太大，怎么辦呢？這個問題比較簡單啊，只要用JPG就可以了。我們常用的頁面的圖片格式有三種，GIF、JPG、PNG。那么這三種格式我們怎么選擇使用呢？下面就我的一些經(jīng)驗來談?wù)勎覍τ谶@三個格式的使用上的一些看法。

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

GIF 意為Graphics Interchange format（圖形交換格式），GIF圖片的擴展名是gif?，F(xiàn)在所有的圖形瀏覽器都支持GIF格式，而且有的圖形瀏覽器只認識GIF格式。GIF是一種索引顏色格式，在顏色數(shù)很少的情況下，產(chǎn)生的文件極小，它的優(yōu)點主要有：

1. GIF格式支持背景透明。GIF圖片如果背景色設(shè)置為透明，它將與瀏覽器背景相結(jié)合，生成非矩形的圖片。
2. GIF格式支持動畫。在Flash動畫出現(xiàn)之前，GIF動畫可以說是網(wǎng)頁中唯一的動畫形式。GIF格式可以將單幀的圖象組合起來，然后輪流播放每一幀而成為動畫。雖然并不是所有的圖形瀏覽器都支持GIF動畫，但是最新的圖形瀏覽器都已經(jīng)支持GIF動畫。
3. GIF格式支持圖形漸進。漸進是指圖片漸漸顯示在屏幕上，漸進圖片將比非漸進圖片更快地出現(xiàn)在屏幕上，可以讓訪問者更快地知道圖片的概貌。
4. GIF格式支持無損壓縮。無損壓縮是不損失圖片細節(jié)而壓縮圖片的有效方法，由于GIF格式采用無損壓縮，所以它更適合于線條、圖標和圖紙。

GIF格式的缺點同樣相當明顯。索引顏色是歷史遺留的產(chǎn)物，在DOS下的老游戲幾乎無一例外的采用索引顏色，這種格式本來早就應(yīng)該淘汰了。但是由于帶寬的限制，GIF從DOS時代紅到了Internet時代。GIF這種索引顏色格式最大的缺點就是它只有256種顏色，這對于照片質(zhì)量的圖片是顯然不夠的。

JPEG 代表Joint Photograhic Experts Group（聯(lián)合圖像專家組），這種格式經(jīng)常寫成JPG，JPG圖片的擴展名為jpg。

JPG最主要的優(yōu)點是能支持上百萬種顏色，從而可以用來表現(xiàn)照片。此外，由于JPG圖片使用更有效的有損壓縮算法，從而使文件長度更小，下載時間更短。有損壓縮會放棄圖像中的某些細節(jié)，以減少文件長度。它的壓縮比相當高，使用專門的JPG壓縮工具其壓縮比可達180：1，而且圖像質(zhì)量從瀏覽角度來講質(zhì)量受損不會太大，這樣就大大方便了網(wǎng)絡(luò)傳輸和磁盤交換文件。JPG較GIF更適合于照片，因為在照片中損失一些細節(jié)不像對藝術(shù)線條那么明顯。另外，JPG對照片的壓縮比例更大，而最后的質(zhì)量也更好。

但是從長遠來看，JPG隨著帶寬的不斷提高和存儲介質(zhì)的發(fā)展，它也應(yīng)該是一種被淘汰的圖片格式，因為有損壓縮對圖像會產(chǎn)生不可恢復(fù)的損失。所以經(jīng)過壓縮的JPG的圖片一般不適合打印，在備份重要圖片時也最好不要使用JPG。還有，JPG也不如GIF圖像那么靈活，它不支持圖形漸進、背景透明，更不支持動畫。

PNG 是20世紀90年代中期開始開發(fā)的圖像文件存儲格式，其目的是企圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。流式網(wǎng)絡(luò)圖形格式(Portable Network Graphic Format，PNG)名稱來源于非官方的“PNG's Not GIF”，是一種位圖文件(bitmap file)存儲格式，讀成“ping”。PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數(shù)據(jù)。PNG使用從LZ77派生的無損數(shù)據(jù)壓縮算法。

PNG文件格式保留GIF文件格式的下列特性：

• 使用彩色查找表或者叫做調(diào)色板可支持256種顏色的彩色圖像。
• 流式讀/寫性能(streamability)：圖像文件格式允許連續(xù)讀出和寫入圖像數(shù)據(jù)
• 這個特性很適合于在通信過程中生成和顯示圖像。
• 逐次逼近顯示(progressive display)：這種特性可使在通信鏈路上傳輸圖像文件的同時就在終端上顯示圖像，把整個輪廓顯示出來之后逐步顯示圖像的細節(jié)，也就是先用低分辨率顯示圖像，然后逐步提高它的分辨率。
• 透明性(transparency)：這個性能可使圖像中某些部分不顯示出來，用來創(chuàng)建一些有特色的圖像。
• 輔助信息(ancillary information)：這個特性可用來在圖像文件中存儲一些文本注釋信息。
• 獨立于計算機軟硬件環(huán)境。
• 使用無損壓縮。

PNG文件格式中要增加下列GIF文件格式所沒有的特性：

• 每個像素為48位的真彩色圖像。
• 每個像素為16位的灰度圖像。
• 可為灰度圖和真彩色圖添加α通道。
• 添加圖像的γ信息。
• 使用循環(huán)冗余碼(cyclic redundancy code，CRC)檢測損害的文件。
• 加快圖像顯示的逐次逼近顯示方式。
• 標準的讀/寫工具包。
• 可在一個文件中存儲多幅圖像。
• 文件結(jié)構(gòu)

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

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

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