首頁 > 網頁圖檔格式 > 網頁使用的圖檔格式簡介


目前網頁上使用的圖檔標準是GIF及JPEG,任何一種瀏覽器都至少支援這兩種格式,至於PNG則是用來取代GIF的新格式,不過目前仍有許多瀏覽器版本尚未支援,所以在支援PNG的新版瀏覽器大量使用以前,最好還是不要使用PNG格式。

為了減少網路傳輸的資料量,不管是GIF、JPEG還是PNG,都具備圖檔壓縮的功能,但是其壓縮原理不同,因此應用的場合也不同,使用者需要對這幾種格式的特性有所了解,才能產生小而美的圖檔。

■GIF

GIF的壓縮原理,是把圖檔中連續出現的相同色點,以較短的資料格式來取代。因此圖案的顏色變化越少,重複性越高,其壓縮效果就越好。因此一般美工插畫、線條稿,標誌符號這種有大塊相同顏色的圖案,比較適合採用GIF格式。
64色GIF,15679 byte

GIF另一項特性就是採用索引色(index colot)方式紀錄色彩資訊,意思是說GIF並不是直接把圖案中每個色點的色彩值(RGB)紀錄下來,而是將圖案中所出現的每一種顏色給定一個編號,例如紅色(R=255, G=0, B=0)設為編號0,黃色(R=255, G=255, B=0)設為編號1...,之後只要圖案中某個點是紅色,就用0表示,黃色就用1表示,以此類推。使用色彩編號的好處是可以用較少的數字來表示一個點的顏色,不用每個點都使用RGB共24bit來表示。GIF圖檔會有一個地方紀錄哪種編號對應哪種RGB色彩,這個編號與顏色的對應資料稱為色盤(palette)。

不過當圖檔使用的顏色一多,就要使用更多的色彩編號,色盤的資料量也跟著變大,檔案體積可能不減反增,因此目前通用的GIF格式只支援到8bit色盤,也就是最多256種顏色, 此外還有4bit(16色)、2bit(4色)、1bit(2色)等變化,不過不是每種軟體都能儲存成各種色盤的圖檔,但至少8bit色盤一定會支援。

相較於JPEG格式,GIF沒有壓縮失真的問題,也就是解壓後的圖案,與原先未壓縮時是一模一樣的,但是256色的限制是GIF最大的缺點,如果圖檔多於256色,勢必要進行縮減色數的處理才有辦法存檔,對於畫面的品質還是會有程度不一的影響。

此外GIF還有透明背景及動畫的功能,這兩點在網頁中時常用的到。

■JPEG

JPEG簡單來說,是使用數學公式來描述圖案的顏色變化,紀錄的參數越多,則該公式的運算結果越接近原始圖案,但終究無法完全相同(除非使用無限多個參數),所以解壓後的圖案會有失真的現象。由於公式的精確度是可調整的,因此JPEG具有視需要調整壓縮比的特性,檔案大小與畫質成反比。一張很大的圖檔,如果不計較畫質,可以壓到非常小的體積,相反的,若選擇最好的品質,則可得到與原圖非常接近的畫質。一般而言,只要圖案沒有劇烈的對比或顏色變化(如黑白分明的文字或線條),用JPEG都可以得到很好的效果。
全彩JPEG,6138 byte

JPEG另一個特性是圖檔為全彩格式,不像GIF最多只能256色,大部分情況下壓縮效果又比GIF好(請參考例圖),因此一般照片多用JPEG格式儲存。

■PNG (Portable Network Graphics)

過去網頁上想要得到無失真的畫質,或是透明背景效果就只能靠GIF,但256色的限制,加上有專利上的問題(GIF格式當初是一家私人公司所開發的),所以便有PNG格式的誕生。

PNG為無失真壓縮,沒有256色的限制,並支援256階的透明效果,靠這三點就可完全取代GIF,唯一美中不足的是不支援動畫效果。這個新的格式不是所有的瀏覽器及繪圖軟體都支援,尚待時間推廣。


64色PNG,13600 byte

若不考慮網頁應用,單純就儲存上考量,PNG比起同是全彩無失真壓縮的TIF格式,壓縮效果還要更好(但一般而言。在可接受的畫質下,還是JPEG壓縮效果最好),假使無失真是首要條件,PNG是個很不錯的存檔格式。

右上方的例圖為PNG格式,如果你的瀏覽器不支援PNG格式,可以參考GIF那一張。為了和GIF相比較,這張PNG是直接拿GIF存檔的結果再拿來轉存成PNG,因為兩者都是非失真壓縮,所以兩張圖完全一樣,但是存成PNG檔案大小又小了一點;如果拿原稿以全彩格式儲存,則整個畫面實際使用的色數為19431色,檔案大小達到59034 byte,雖然完全不失真,但已經不適合用在網路傳輸上,所以實際應用上還是要把使用色數先降到一定程度再來壓縮比較適當。

 


Copyright by Jack Hung-洪裕杰. All Rights Reserved.
Last update: Mar. 13, 2001