[轉錄] JPG, GIF, PNG的比較

引用自 "Browny Walking"　http://goo.gl/lpYRr



前些日子和異塵兄在討論 螢幕截圖是用 JPG 格式來存好呢，或是用 PNG 格式比較好？基於科學的精神，上網找了一下，Wikipedia 果然敘述的鉅細靡遺，PNG 和 JPG 優缺點分析如下：

JPEG can produce a smaller file than PNG for photographic (and photo-like) images since it uses a lossy encoding method specifically designed for photographic image data. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize (often 5-10 times) with negligible gain in quality.

JPEG 在面對自然影像的時候，由於是採用失真壓縮演算法，因此壓縮率比 PNG 還要大。簡單來說，如果一張 風景照片 你用 JPG 來存，需要 1MB 的話，用 PNG 就要 5MB~10MB，雖然 PNG 檔案較大但是在視覺品質上面並沒有顯著的優越。

PNG is a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions. Where an image contains both sharp transitions and photographic parts a choice must be made between the large but sharp PNG and a small JPEG with artifacts around sharp transitions. JPEG also does not support transparency.

PNG 在處理包含文字、線條和明顯輪廓的影像 則較 JPG 來的優越，當影像有明顯輪廓邊緣，JPG 的失真演算法在處理這種邊緣上就會產生瑕疵，PNG 採用無失真演算法，因此影像品質較佳。

JPEG is a poor choice for storing images that require further editing as it suffers from generation loss, whereas lossless formats do not. This makes PNG useful for saving temporary photographs that require successive editing. When the photograph is ready to be distributed, it can then be saved as a JPEG, and this limits the information loss to just one generation.

若影像儲存在未來是需要更進一步的編輯修改的話則 PNG 是比較好的選擇，若是用 JPG 不斷的存取編輯，那麼圖像的品質就越來越差了。當影像已經編輯完畢準備散發傳播的話，JPG 則可以幫你縮小體積，卻不損失太多的畫質。

因此，寫 Blog 用的電腦視窗截圖，全面改用 PNG 吧，因為面對 這種 文字、線條和輪廓明顯的圖像，PNG 的檔案其實不會比 JPG 大多少，有時候可能還比較小呢 :)

圖像及引述文字來源 @ http://en.wikipedia.org/wiki/Portable_Network_Graphics#Comparison_with_JPEG


-----------------------------------------------------------------------------------


更詳細的內容，節錄自＂就是愛程式＂　http://goo.gl/gcUFx

網際網路上目前被廣泛使用的圖檔格式大概就是這三種，而其中又以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格式雖然優異，但是支援的環境仍待加強，不過未來仍然是個令人期待的檔案格式。

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


Wiki這裡有更多說明：http://goo.gl/lAS3y