Drupal 模組:PNG Fix 解決了惱人的 PNG 問題

Mar 8 2008

drupal

PNG Fix -- Test Image去年的年初(2007),我接了個 cirque 的案子,從小胖手中拿到設計,到切圖,設定寫程式有的沒的,最後雖然完成了,卻因為沒有處理好半透明圖的問題而小帶遺憾。同樣是在去年,時間改到夏天,與朝富合作,完成了行無礙網站 on Drupal,首頁上的 logo 也是處理了一陣子,最後透過 PNG in Windows IE 裏提到的方法解決了。

最近,我發現到一個很棒的模組:PNG Fix,它是一個 jQuery 的一個 plugin,使用它可以很輕易地解決掉 png 在既舊且笨的 IE 上頭的問題!!!(可以在 wikipedia 上頭介紹 PNG 的文章最後,看到一個 Internet Explorer incompatibility 的章節)

OK, 重要的事已經分享完了,而我也已經在這個網站上安裝了 PNG Fix,對於那些依舊是使用 IE 6.5 以前版本的造訪者,我已經可以,完全無後顧之憂地大量使用有半透明特性的 png 了,真棒。下頭,是一些與 PNG 有關的小故事,我覺得有趣的小故事…

PNG 的出現,可以說是 GIF 一手造成的。這說法很有趣也很怪,居然一個沒有生命的檔案格式,可以影響到另一個檔案格式的誕生!! 這是我想聊的第一個小故事。

GIF(Graphics Interchange Format,非常有魄力的全名) 是在 1987 年,由美國公司 CompuServe 發展出來的,然後接著 GIF 就因為搭上了 WWW 順風車,一路紅翻天,讓全世界一大票人都曉得有這麼一個東西(這感覺就像,全台灣人幾乎都知道有個叫大家電鍋的東西一樣地讓人興奮)。GIF 對一般人來說,就是它有透明色的支援,以及它可以是一段動畫,就這麼簡單。

有趣的是,GIF 使用到的一種壓縮技術:LZW,它的專利權握在另一家叫 Unisys 的公司上頭,但 CompuServe 在設計 GIF 時,並沒有想到這一點。隨著 GIF 的流行, Unisys 意識到要對於他們的專利做某種程度上的保護(也可以說是商業行為上的利益保護),於是有了一些公文發佈、行動…等,意思約略是「有使用到 LZW 這個技術的 GIF,如果你的網站有使用到,我們就有機會要求索取一定額度的權利金…」然後呢,全世界有一些人就瘋了(不過我猜裏頭很少有台灣人,因為我們對於專利這東西的敏感度似乎在當時還非常的低)…

就這樣,PNG 被提出來了,它催生的目的大致如下:

  1. 取代掉 GIF 。
  2. 首先是避開 LZW 這個可能在專利上有的問題,改以 DEFLATE 這個壓縮技術。
  3. 完整的透明度支援,實現不同階層的半透明。
  4. 沒有 GIF 的 256 色限制,可以支援高達數百萬/數千萬色( 2^24 = 16777216 或 2^48 = 281474976710656,總之就是很多顏色)。
  5. 動畫方面,原來是有另一個叫 MNG 的被提出來,但沒有造成風行,所以關於動畫這一點,GIF 的地位還沒被動搖或影響到。(Flash ?)

與 PNG 有關的另一個小故事是,它的標頭非常的有趣(以下表格摘錄自 wikipedia):

Bytes Purpose
89 Has the high bit set to detect transmission systems that do not support 8 bit data and to reduce the chance that a text file is mistakenly interpreted as a PNG, or vice versa.
50 4E 47 In ASCII, the letters “PNG”, allowing a person to identify the format easily if it is viewed in a text editor.
0D 0A A DOS style line ending (CRLF) to detect DOS-UNIX line ending conversion of the data.
1A A byte that stops display of the file under DOS when the command type has been used – the end-of-file character
0A A UNIX style line ending (LF) to detect UNIX-DOS line ending conversion.

標頭是八個字元組成。第一個字元用來偵測一些不支援 8bit 的系統或程式用。接下來的三個字元是 PNG,方便有些人(大多是程式工程師之類的)可以在不知道這個檔的副檔名前題下,依然很快得知這是一個 PNG 檔。接下來的兩個字元,是 DOS 下的換行符號,然後是 DOS 下的 end-of-file,以外 UNIX 下的換行符號(獨缺了 Mac 的換行符號嗎? 其實 DOS 那兩個字符的換行符號之一,就是 Mac 在用的~)。換句話說,這是一個被仔細設計過,對程式人員來說非常友善的檔頭。而對程式設計人員友善,就是對程式友善。(因為程式都是程式設計師寫出來的嘛…好像在嘵口令)

最後,雖然 Unisys 已經以某種形式,解除了 LZW 專利的問題,但 PNG 已經紅起來了,而且大家也都見識到它真的比 GIF 好太多了,所以愈來愈多的網站、程式都大量引進這種格式,最有趣的是,連 Microsoft 的 Windows Vista 也全數使用 PNG 來做為系統的 icon 圖示了!!!!

題外話,TIFF,這個非常複雜且優秀,動畫公司的材質(texture)大都是存成這種格式,其實在之前也是受到 LZW 的影響,不過 TIFF 比較特殊的是,它可以使用多種壓縮方式,並不侷限於 LZW 一種(雖然說,LZW 真的是一種非常優秀的壓縮演算法,而且流通率非常之大)。偷偷透露一個小情報,在太極影音,我們要求所有的 TIFF 都要是用 LZW 來壓縮 :) 原因嘛…有機會再聊這個話題吧~

comments powered by Disqus