PNG從哪冒出來的？
PNG全名Portable Network Graphics，字面上翻譯過就是『可攜性網路用圖形』，這簡單幾個字已經明白定義了PNG的用途以及主要發展方向。1996年，PNG
Group向W3C (World Wide Web Consortium)提出一種多媒體圖形格式，重點在於改進現有JPG跟
GIF的缺點，並且提供更多新的概念與壓縮模式，在提出後得到W3C的認可與推薦。在1st October, 1996，W3C正式發函公告，推薦PNG為最佳的圖形格式，並且以『PNG
Delivers Higher Quality Graphics for Web Page Design』這樣高度推崇的文字來作為該文件的標頭，看來PNG在1996年倒是相當風光。
PNG要如何發音？基本上跟『ping』的發音相同，或者是你想念做『P-N-G』也可以。PNG的非官方名稱為『PNG's
Not GIF』，頗挑釁，但是這也反映出目前網路圖形的現實狀況。怎麼說呢，話說網路最常用的圖形格式GIF，其專利權屬Unisys所有，早在1994年底，Unysis公司就宣佈，要求有支援GIF軟體的作者須繳交權利金。此舉對於一向以免費開放架構為主流的網路生態，殺傷力非常大。這時不少人便開始反對Unisys的作風，並且共同開發另一種圖形標準，希望能完全取代GIF，而PNG(PNG's
Not GIF)也就孕育而生，從1996年起加入網路圖形的陣營。
PNG的圖檔格式特性
由於終極目標是為了取代GIF，因此PNG保留了大部分GIF的特性，像是Index Color、交錯顯示、透明區域、額外說明資訊等，都是GIF有的屬性，而PNG在設定之初也保留了這樣的原始功能。畢竟，想要取代對方，敵人會的招數自己還是得學學。
除此之外，PNG還加入了不少GIF所沒有的新功能，包括儲存全彩影像(24bit)、256階透明層次(Alpha
Channel)、Gamma值資訊、CRC Check、可定義的階層顯示、壓縮方式可以隨時擴充等，都是相當棒的特性，乍看之下，比起GIF跟JPG真的進步不少。
PNG
vs GIF 大對決
口口聲聲要取代GIF，連PNG這個名字都擺明了就是要跟死要錢的GIF作對(PNG's Not GIF)，那就得拿出真本事來，來能夠讓使用者信服。以下分別針對各種不同屬性的圖檔，做一完整的測試，比較看看，PNG是否有取代GIF的實力。
測試一：全彩Photo圖片
取樣標準選用短景深的花卉攝影，主要目的在於，比較能夠清楚了解圖興壓縮過後的解像能力。前景花卉的枝葉是否輪廓清晰，而後景朦朧的部分是否清楚展現其連續色階也是重點。紅跟綠的對比配色，對於顏色數限制下的色彩展現，也有相當的測試性質。
|
GIF 16色 7.15k
|
GIF 32色 9.63k
|
GIF 64色 12.9k
|
GIF 128色 15.6k
|
|
|
|
|
|
|
|
|
|
|
|
PNG 16色 9.51k
|
PNG 16色12k
|
PNG 16色15k
|
PNG16色 16.5k
|
首先是GIF與PNG的比較。測試之後，非常無奈的發現，PhotoShop似乎沒有對PNG以及GIF的壓縮格式分別作最佳化。在抖色的色彩排列上，上下的比較可以很明顯的看到，不論是GIF或是PNG，同一色彩數的抖色方式皆相同，也因此在畫質上，兩種格式完全沒有差異。
既然畫質沒有差異，那能夠比較的只剩下圖檔大小。在全彩照片的測試中，GIF在每一個顏色數中都佔盡上風，平均圖檔只要PNG的80%大小，在全彩複雜圖形的壓縮上保有一定的優勢。PNG在這次的測試中佔居第二。
測試二：全彩Photo圖片 --> 24bit圖形
|
JPG 25-Quality 5.97k
|
JPG 50-Quality 9.19k
|
JPG 75- Quality 18.9k
|
JPG 100- Quality 38.3k
|
|
|
|
|
|
|
|
|
|
|
|
PNG 24bit 57.5k
|
PNG在規格上可以壓製24bit全彩圖形，所以我們也增加了與JPG的比較測試。比較方式為，JPG採分階段縮測試，分別由25、50、75到100，而PNG方面由於PhotoShop並未提供壓縮比設定，在PNG規格上亦未標明24Bit圖形的壓縮品質如何控制，所以僅以一個樣本來做比較。(PNG欄中的四張圖皆為同一張，為了方便與上面四張JPG比較而複製四份)
測試結果發現，JPG在50的壓縮品質下已經相當接近原圖，而在75的壓縮品質下，幾乎已是很難發現壓縮失真的痕跡。JPG的壓縮方式在壓縮全彩圖片上確實優秀，而且K
數非常小，9K的畫質已是嚇嚇叫。反觀PNG，目前的24bit圖片效果似乎中看不重用，圖形品質雖好，但是在檔案大小上的劣勢卻相當明顯。看來24bit的PNG圖形應用，還有待大力改進。
測試三：16色矩陣圖形
在GIF完全剖析中，我們測試了GIF的壓縮方式，當然在PNG的測試中，我們也如法炮製，測試一下圖形的排列方式是否與PNG的壓縮比有關。測試方式由線條、矩陣、3色矩陣、4色矩陣，一直到16色漸層矩陣，逐漸提高圖形的複雜度，以下就是測試結果。
|
GIF 2色 272 bytes
|
GIF 2色 572 bytes
|
GIF 2色 591 bytes
|
|
|
|
|
|
|
|
|
|
PNG 2色 747 bytes
|
PNG 2色 772 bytes
|
PNG 2色 774 bytes
|
|
GIF 3色 843 bytes
|
GIF 4色 1013 bytes
|
GIF 16色 3115 bytes
|
|
|
|
|
|
|
|
|
|
PNG 3色 796 bytes
|
PNG 4色 803 bytes
|
PNG 16色 1255 bytes
|
測試結果發現，PNG的圖形壓縮方式與GIF並不相同，GIF在橫狀圖形的高壓縮特點，並沒有在PNG上面看到。而有趣的是，在複雜度高的矩陣排列上，越複雜的矩陣，PNG壓縮的比值越高。逐漸提高複雜度的狀況之下，到了16色的漸層矩陣時，PNG的壓縮比甚至是GIF的1倍多，看來在壓縮複雜矩陣上，PNG扳回了一成。
測試四：128色以上複雜矩陣圖形
在測試三中，我們比較了16色標準矩陣。可是在實際使用狀況中，方方正正的標準矩陣圖形並不常用到。於是我們增加了128色以上的複雜圖形，模擬一般比較可能出現的圖形狀態，作為對照的參考。
|
GIF 16色 2.19k
|
GIF 32色 2.70k
|
GIF 64色 3.33k
|
GIF 128色 4.21k
|
|
|
|
|
|
|
|
|
|
|
|
PNG 16色 1.39k
|
PNG 16色 1.49k
|
PNG 16色 1.66k
|
PNG16色 1.90k
|
測試結果發現，PNG在『色塊』的壓縮上，確實有其獨到之處，儘管是複雜的排列方式以及高達128色的色階，PNG在壓縮比上依舊是GIF的約1倍多。用以往GIF的壓縮圖形經驗來看PNG的檔案大小，這樣的壓縮比，確實令人驚艷。不用說，PNG在這個測試上又狠狠電了GIF一大截。
測試四：文字型GIF透明圖檔
在以往各國字碼不相通的網路時代，解決字碼問題最可靠的辦法就是GIF文字，直接把文字轉成圖形，就可以把字碼與排版的問題一次解決。現在GIF文字不流行了，但是用透明GIF來解決排版問題，卻還是相當常見的用法。所以我們也測試了文字型GIF，當然也順便測試一下透明色的應用狀況。
|
透明GIF 2色 1108 bytes
|
透明GIF 3色 1325 bytes
|
透明GIF 4色 1478 bytes
|
透明GIF 5色 1561 bytes
|
|
|
|
|
|
|
|
|
|
|
|
透明PNG 2色 960 bytes
|
透明PNG 3色 1004bytes
|
透明PNG 4色 1184bytes
|
透明PNG 5色 1200bytes
|
基本的顯示都沒有問題，不論是GIF或是PNG在透明色上都相當正確，不過由於小P手邊沒有較舊版的IE，所以在舊版IE瀏覽器上是否依舊相容，這就不得而知了。Netscape
4.xx版似乎會有顯示上的問題，顏色會錯亂，大概是PNG圖形解譯器支援不全的因素。但是可以確信的是，在Netscape 6.0、IE5.5以上是完全相容的。
在圖形大小上，PNG保持著自測試三以來的優勢，依舊小幅領先GIF約15%左右。
結語
測試一天下來真是累壞了，不過收穫不少。然而對於PNG，我的感覺是：先天規劃佳，有一定優勢，但是後天發展不足。
在PNG的原先規劃上，對於GIF的完全取代性應該是第一要點，不過在Animation GIF的取代方案上卻偏偏漏掉了。後來該組織又發展出所謂MNG
(Multiple-image Network Graphics)，企圖補足Animation上的不足，不過光是動態格式的不支援，我就給PNG打了一個大折扣，畢竟GIF的重要功能之一就是動態圖形，少了Animation的功能，GIF恐怕也稱霸不了這麼久。
此外，繪圖軟體的支援也是一大問題，目前PhotoShop 6.0版並不能夠藉由Save
For Web功能，在PNG中有效儲存2bit以上的Alpha層，在規格上頗誘人的Gamma值設定也不見蹤跡，以這樣業界表率的大哥級軟體都不支援進階設定的狀況下來看，PNG的進階應用似乎還要等一段時間。如果真要在PhotoShop中儲存8bit
Alpha，也是可以，利用Save As儲存PNG就可以保留8 Bit Alpha層，但是圖檔視複雜情況，會比2 bit Alpha多出約3-7倍以上的大小。這樣的檔案大小似乎不是Web用圖形可以容忍的，因此在8
bit Alpha的實用性上並不高。當然，如果您是Freehand的愛用者，那儲存的便利性就另當別論了，當然會比PhotoShop繞了一圈才能保留8
bit Alpha來得便利。不過對我來說，一張網頁設計稿要切換兩個同質性的繪圖軟體來割圖，只為了檔案大小有點嚇人的8 bit
Alpha PNG.. 唉，實在沒什麼說服力。
不過，PNG的高壓縮率，確實令人印象相當深刻。尤其是圖表型的圖片，PNG明顯的比GIF來的更有競爭力，在沒有動態圖形的困擾下，儲存PNG圖形跟GIF簡直沒有兩樣。而且圖形壓縮的更小，品質卻不受影響，這一點確實如W3C推薦般，圖形更小，且維持高品質。
整體來說，我並不會想要換用PNG。這是實話，儘管我討厭壟斷以及趁機收費，但是我還是傾向支持GIF檔案格式，因為GIF的相容度好，且Solution較為全面。對於講究相容、互通的網際網路來說，交換性勝過一切，而在這一點上，PNG可以努力的空間還很多。像是送幾個紅包給Adobe，請他們在下一版PS
7加入完整PNG支援，或是多發一些年終獎金給組織內的工程師，請他們用畢生的精力將MNG與PNG做整合，讓PNG也能夠做Animation
PNG..等。開點小玩笑，總之看樣子，以現在的普及率來說，PNG短期內應該還不會取代GIF。此外，GIF授權金問題，我們也不用擔心，因為收取對象為繪圖軟體開發商而非使用者，只是要小心Adobe、MacroMedia、Ulead等大廠絕對會偷偷把授權金轉嫁到軟體售價上的。
PNG格式大剖析
