電插頭 CG軟硬體不負責報告

GIF 完全剖析

　　GIF是網路上面常見的圖檔格式，不但常見，而且應用的範圍還相當廣泛，舉凡透明色、動態圖檔，GIF中文技術... 這些都必須要靠GIF才做得到。小P對GIF下了點苦工，把從以前到現在的經驗整理了一下，將對GIF做一個完完整整的介紹。

本文將分成以下3個部分：

GIF格式簡介
GIF的檔案特性
GIF的實際應用

GIF格式簡介

　　GIF全名是Graphics Interchange Format，如果硬要翻成中文的話，那就是『影像交換用格式』，顧名思義，當初制定GIF的目的就是用來傳遞圖檔用的，這對於GIF的格式特性有著相當大的影響。

　　GIF跟JPG一樣，有著一定的壓縮方式，GIF採用的是LZW壓縮技術，這種壓縮技術在壓縮時不會犧牲掉畫面的品質，但是不能設定壓縮的比值，這一點跟JPG有著相當大的差異。另外，GIF只支援256色以下的色盤，只支援8bit色的結果，讓GIF在圖檔的顏色處理上有一些限制，但是侷限的顏色數卻也讓GIF有更多可以發揮的空間，像是指定特定色盤，限定特定顏色為透明色等，這都是GIF在顏色設定上獨樹一格的地方。

　　GIF主要有兩種格式：GIF87a以及GIF89a。GIF87a是比較舊的格式，功能上跟GIF89a插上了一大截，跟一般的圖檔沒有什麼兩樣，或許比較打趣的來說，GIF87a是沒有功力的小張無忌，GIF89a就是練過九陽神功的明教教主了。新的GIF89a增加了許多額外的功能，像是透明色的支援... 使得GIF朝向一個多功能性的圖檔邁進。

　　GIF除了支援剛剛所說的透明色之外，GIF還支援Interlaced模式、以及動態GIF。Interlaced GIFs跟JPG裡的Progressive相當類似，都是可以在讀圖的過程中，隨著檔案的慢慢讀取，從低解析度圖檔到高解析度慢慢顯示。這種圖檔格式相當適合網路應用，因為網路上有傳輸頻寬的限制，若是可以讀一點就顯示一點，那觀看者感覺上等待的時間就會減少些，瀏覽上比較不會有不耐煩的情況產生。不過，JPG的Progressive跟GIF的Interlaced還是不太一樣，JPG可以設定Progressive的次數 (一般是3次)，GIF則不行；另外JPG是模糊化的慢慢顯示，GIF則是比較像是橫向交錯式的顯現，這跟GIF的圖檔特性很有關係，在下一個段落將會做介紹。

　　動態GIF是GIF格式最特別的地方，GIF格式可以將好幾個圖檔串成一個GIF檔，讓這些圖檔分別分批顯示出來，利用這種特性，我們就可以做出GIF動畫了。GIF動畫的好處是比起AVI或是MOV的檔案小了很多，而且不失真壓縮可以使動畫相當清晰，另外可以自行設定的撥放流程，每一張圖的顯示時間都可以設定，對於動畫的掌握度相當高。如果您想看看GIF動畫可以做到什麼境界，建議您到Doodie看看。


JPG 16332 bytes Progressive 3 times	GIF 4492 bytes Interlaced	GIF 4873 bytes Interlaced Alpha	GIF 7170 bytes Animated

GIF檔案特性

　　GIF檔案的特性，最主要，也最有趣的就是GIF的壓縮方式。前面曾經介紹過，GIF的壓縮方式為LZW壓縮，屬於一種不失真壓縮，從了這一點之外，GIF的壓縮還有其他更好玩的東西。

　　看看下面的比較圖吧，不知道你有沒有發現一點，GIF的圖檔壓縮依據是，橫向圖素是否有變動，變動得越大，檔案就越大，變動得越小，檔案就越小。比較一下圖一二三，圖一橫軸的方向幾乎沒有變動到，圖二跟圖三的變動就大了，所以同樣的圖形在經過旋轉90度跟45度之後，檔案大小竟會差上2倍甚至3倍以上。(彩色時也是如此)


圖一 279 bytes	圖二 751 bytes	圖三 844 bytes


圖四 2697 bytes	圖五 3396 bytes	圖六 4721 bytes

　　另外，色塊與漸層的差異性也是非常大，圖七使用的是色塊，而圖八中的彩色是使用漸層色。色塊跟漸層色的檔案大小差異將近四倍，這也可以看出GIF圖檔大小跟圖檔變化性的關聯性。基本上由圖九跟圖十可以看出，GIF適用於平整色塊的圖檔，像是插畫、圖表、文字圖... 等，至於像是Photo照片式的圖案則使用JPG比較適當。(請參考圖九、圖十)


圖七色塊 480 bytes	圖八漸層色 2301 bytes


圖九 GIF 16258 bytes	圖十 JPG 12712 bytes

GIF的實際應用

　　GIF的應用相當廣泛，以下就列舉小P所知道的5種應用實例：

1.一般網路用圖檔：

　　GIF跟JPG一樣，都相當適合網路上使用，只要善用GIF平整色塊的高壓縮比、交錯式顯示方式的特性，GIF的在網路上的利用可以使網頁的瀏覽更加方便、快速。

2.透明層的運用：

　　當圖形不規則或是需要透空時，GIF就可以幫上忙了，這種狀況也常常運用在網頁之中。尤其是網頁上有BackGround底紋，而又有非方形的圖形時，透明色就可以消去不必要的部分了。

3.製作連續的動畫檔案：

製作動畫檔案可以使網頁的活潑度增加不少，若是運用得當，還可以產生畫龍點睛之效。另外，利用GIF動畫的特性還可以用來表現一段動畫，拿來說故事，表達意境也是不錯的選擇，這一點也是其他圖檔所做不到的。關於故事型的GIF範例，請至Doodie看看。

4.文字的展現：

　　常有外國的朋友抱怨說您的網站看到的都是亂碼嗎？您去參觀國外網站的時候是不是也有語系不合而滿螢幕#%$&*的狀況呢？像這種狀況就可以用GIF圖像化文字的方式來克服。由於GIF在儲存顏色數少的圖形時相當省檔案容量，而且又可以支援Alpha透明色，所以拿來儲存圖形化文字最為適合。製作上建議使用Windows內附的新細明體，將大小調至12 points，選擇No Anti-aliased，這樣出來的字型最漂亮，也最清晰。

5.需要指定色盤時：

　　有時候圖檔需要顏色相當準確時，就會需要用到GIF指定色盤的功能。就像電插頭所運用的圖形，雖然圖形的底色跟Html裡的BackGround顏色設定都是一樣，但是經過JPG壓縮後會有顏色不連續的狀況，經過GIF抖色轉成256色後也會產生顏色偏色的情況，這時候就需要利用到GIF容許指定色盤的特性了。將圖形中的背景色與Html裡的RGB值調成一樣，這樣就可以使圖形與背景顏色調成相同，在瀏覽上也就可以求得更精準的效果了。(電插頭首頁左邊按鍵的圖形，就是一個一個調整色盤，才能使顏色跟背景的藍綠色一致，形成連續的感覺。)

結語

　　GIF檔案格式算是網路上相當常見的格式，GIF87a到GIF89a的演進過程，也算是相當大的變革，使得GIF的應用上有了更多的變化，說不定以後還會出現GIF90a、GIF91a也不一定，那時候所增加的新功能說不定就更加有趣了。

　　以小P個人的觀點，我覺得GIF如果能夠支援16色以上的Alpha層、或者是向量式的Alpha層，那一定會更加完備。至於256色的限制是否會不夠用呢，我覺得256色或許是少了點，不過要是一口氣增加到24bit色，那檔案量一定會大增，那就失去了網路上使用的方便性了，或許加到512個色就好了，這樣應該就夠應付網路上的瀏覽了吧。

　　GIF格式的分析就暫時寫到這裡停筆，接下來，小P將會有專文介紹GIF的實務製作，敬請期待。

小P撰於 1998.12.26


		最後更新日期：2003/ 08/ 09