關於 JPG、GIF 及 PNG 的特性比較

網際網路上目前被廣泛使用的圖檔格式大概就是這三種，而其中又以JPG以及GIF被使用的最為廣泛，但是這三種檔案格式彼此之間的差別，卻會讓初次接觸網頁設計的人不知作何選擇。

我們在切割網頁用圖檔的時候該如何正確選擇符合我們需求的格式？又該如何做最有效的圖檔最佳化？

在正式了解這些檔案格式的特色及用途以前，我們必須先來談談何謂最佳化。

最佳化的目的，在於希望在盡量不影響網頁設計的品質下，讓圖檔最小化，為什麼要這樣做？因為一個好的網頁設計絕對不是弄一堆看起來很漂亮的圖檔就叫做設計，你還必須去考慮使用者的頻寬以及使用者對於網站下載時間的容忍度。面對下載半天的網站，除非我們對他的內容以及圖檔是非要不可，不然大多數的情形我們就是直接關閉網站的瀏覽視窗；因為網際網路的瀏覽速率一直都是個十分現實的問題，所以網頁使用的圖檔，都必須經過最佳化的程序。

最佳化跟圖檔格式有何關係？嚴格說來，如果選擇了錯誤的檔案格式來做最佳化的處理，檔案不但沒有辦法如預期般的有效縮小，反而會比正確最佳化的檔案還要大上許多倍，這樣一來，反而造成品質不佳、速度更慢的悲劇。因此，正確的認識圖檔的格式是非常重要的一件事情。

以下是這三種不同圖像檔案格式的特色以及簡單介紹：

■ GIF圖形交換格式

GIF(Graphics Interchange Format)是由CompuServe公司發展出來的網路圖形交換格式，適合儲存256色的影像，現在通用的是可以儲存透明背景及動畫效果的GIF 89a規格。GIF格式使用LZW技術縮減影像色彩至256色內並壓縮，透過減色的方式來減少檔案大小，因為可以儲存的顏色較少，所以不適合用於全彩照片、漸層豐富的細膩影像儲存，但很適合存取色塊等形狀不甚複雜的圖形。

而通常在設定GIF最佳化的時候，會出現一個交錯式的選項，所謂的交錯顯示(Interlacing)指得是圖檔出現的方式，一般而言，網頁圖形的顯示是由上而下一條線一條線地依序顯示，使用者必須要等到圖形資料下載完後，才能看到完整的圖形，如果圖檔太大，圖檔就必須花很長的時間才能完全顯示出來。而交錯顯示則是以相隔八條線的方式跳著顯示，所以圖形的出現有如打開百葉窗一般(有些瀏覽器處理的方式可能不同)，可以讓瀏覽者在圖形未完全出現前，先對圖案有個概念，但是檔案相對也會比較大；附帶一提的是，製作GIF動畫時，就比較不適合使用交錯顯示，因為會有鬼影殘留的現象。

附註：Unisys Corporation 擁有包含多項 GIF-LZW 壓縮技術的專利，Microsoft Corporation 於 1996 年 9 月時取得 Unisys LZW 專利的使用權。然而 Microsoft 取得的使用權並未延伸至使用任何 Microsoft 工具、語言開發或作業系統產品的軟體開發人員或協力廠商，來為他們的應用程式提供 GIF 讀/寫或任何其它 LZW 能力 (例如透過 DLL 和 API 的方式)。

如果您的商業應用程式使用了這些控制項 (也就是使用了 LZW 技術)，例如您也許是透過PHP程式碼來產生JPEG的圖形格式，您也許必須要考慮到專利使用權上的問題，如果想要取得關於該項專利的獨立法律意見，可以聯絡 Unisys 美國網站 http://www.unisys.com/ 取得相關資訊。

■ JPG靜態影像壓縮格式

JPEG(Joint Photographic Experts Group )圖檔，又稱JPG檔，是由CCITT&ISO的一群專業人員，於1987年正式推出的一種工業壓縮標準，適用於儲存24位元全彩影像，但不支援透明或動畫。JPEG格式運用壓縮運算法可以將影像資料壓縮成數十分之一的大小，但壓縮比愈高時影像的資料耗損程度會愈大，影像也會愈失真(為達到高度壓縮，部份資料會被忽略)。多數的影像編輯軟體可以調整JPEG的壓縮比值，一般壓縮比10左右比較無法分辨出與原先的差別。雖然JPEG檔好用，但因是破壞性壓縮，所以不宜重複壓縮，過度的破壞會造成影像的品質愈來愈差。

JPEG格式又可分為標準JPEG、漸進式JPEG及JPEG2000三種格式。

1. 標準JPEG格式：此類型圖檔在網頁下載時只能由上而下依序顯示圖片，直到圖片資料全部下載完畢，才能看到全貌。

2. 漸進式JPEG格式：漸進式JPG為標準JPG的改良格式，可以在網頁下載時，先呈現出圖片的粗略外觀後，再慢慢地呈現出完整的內容(就像GIF格式的交錯顯示)，而且存成漸進式JPG格式的檔案比存成標準JPG格式的檔案要來得小，在這一點上面，與GIF的交錯式設定略有不同，所以如果要在網頁上使用圖片，可以多用這種格式。

3. JPEG2000格式：新一代的影像壓縮法，壓縮品質更好，並可改善無線傳輸時常因訊號不穩造成馬賽克及位置錯亂的情況；此外，以往瀏覽線上地圖時總要花許多時間等待全圖下載，JPEG2000格式具有Random Access的特性，可讓瀏覽者先從伺服器下載10%的圖檔資料，在模糊的全圖中找到需要的部分後，再重新下載這部分資料即可，如此一來可以大幅縮短瀏覽地圖的時間。

■ PNG可攜式網路圖像格式

PNG(Portable Network Graphics)格式與同是網路上流通的影像格式JPEG及GIF相較，有諸多優秀的特性：PNG壓縮影像不失真，可儲存 48 位元的彩色影像，比JPEG的24位元高，像素色彩也可有256種不同的透明度選擇，可讓圖像在任何背景上，看不到接縫，改善了GIF格式像素色彩只能有透明或不透明兩種選擇，及GIF檔描邊不佳的問題(GIF檔通常需要針對每種背景顏色採用不同的反毛邊修飾)。此外，PNG格式跨平台的影像亮度控制，可讓影像在不同的作業系統(Windows, Mac, linux)上顯示出相同的效果，不像GIF檔在不同的作業系統上顯示出的畫面會跟著不一樣，所以PNG格式格外適合在網路環境流通。

雖然PNG格式”幾乎”支援了 GIF 與 JPEG格式的所有功能，但是仍有缺點，缺點不能像GIF一樣作為動畫檔的儲存格式，另外，因為PNG使用的是非破壞性的壓縮，所以PNG檔通常比 JPEG檔大。但是這兩的缺點大概都不能算是PNG的致命傷，PNG之所以到現在依然無法快速流通的最主要問題，就是目前的瀏覽器並沒有辦法支援它所有的功能，例如IE6.0就無法顯示出PNG檔背景透明的效果，就目前IE6的市佔率來看，這一點等於讓現階段的PNG自己回家吃自己，所以PNG格式雖然優異，但是支援的環境仍待加強，不過未來仍然是個令人期待的檔案格式。

了解圖形格式，才能夠真正達到最佳化的目的，身為一個網頁設計師不應該只是在設計華而不實的網頁，而是必須從實用、視覺、維護性等多方面去考量，一個深思熟慮的設計師，才能夠讓網站成為行銷真正的武器。

轉載自：http://atedev.wordpress.com/2007/01/01/%E9%97%9C%E6%96%BCjpg%E2%80%A7gif%E2%80%A7%E4%BB%A5%E5%8F%8Apng/