TOMEET FAQ -- JPG與GIF等圖檔格式有何差別
正在加載......

TOMEET 知識+

好站推薦

網站建置百寶箱
簡易語法設定
重灌狂人
因推薦網站內容屬應用範圍,故與TOMEET無相關性,請勿諮詢相關內容。謝謝!

FAQ線上訪客總數


JPG與GIF等圖檔格式有何差別

border
 
 
 
網頁在製作的時候往往需要用到大量的圖檔來作為視覺的呈現,而圖檔的格式眾多,該以何種圖檔格式來呈現最為理想,底下將為您一一解釋圖檔格式的特性。GIF和JPEG是現今網頁設計上,兩大通用的圖檔格式。所謂的GIF就是指Graphics Interchange Format (圖片交替版面),是特別為網路使用來研發的一種圖檔規格;而JPEG就是Joint Photographic Experts Group(共有的照片輸出群),是為了壓縮數位照片而研發的一種圖檔規格。
GIF圖檔格式是使用Lempel-Ziw and Welch (簡稱LZW壓縮演算法),由美國CompuServe公司所制定。這種壓縮法最適合用在大的2D平面圖、或是3D立體、或是動畫圖;然而GIF被限制在最小8種色階和最大256種色階而已,無法使用全彩色階。

GIF圖檔格式被廣泛運用之處,如下:

  • 組合式(Interlacing) - 組合式圖形基本上需要在低階色彩的模式下被執行,如果一的大型的圖檔不被切割成數個小塊狀,再傳送的話, 那麼瀏覽者必需花很長的時間,等待瀏覽器把整個大圖檔傳送接收完畢之後,才能看得到整個圖形。所以許多網頁設計者,在需要放置大型圖檔時,又需考量傳送速度與時間,因此常使用切割圖形成小塊狀,方便伺服器快速傳送與瀏覽器快速接收,瀏覽者就不必等待很久才能看到畫面,瀏覽器在接收到所有圖型片塊之後會自動組合起來,所以網頁設計者在切割時,需小心計算切割的度量衡,才不會造成組合不起來。
  • 透明化(Transparency) - 製作透明背景圖,必須選擇單一背景顏色來製作透明效果;同樣的,製作遮罩濛濛瀧的感覺時,也是需要選用單一色彩來製作遮罩效果。所以只有在低色階的情況下,才可以選擇某單一顏色,大部份的瀏覽器都會支援透明效果的圖,若無支援的話,瀏覽器便會顯示無透明效果的原始圖形。
  • 動畫(Animation) - 動畫製作就是把數個2D平面圖,連結成單一圖檔,一執行此圖檔時,畫面便會不停地一個平面圖接著一個平面先後出現,就這樣形成了動畫。Netscape 2.0版是首先支援動畫的瀏覽器,接著MSIE 3.0版便跟進了。

JPEG(或稱為JPG)是以一種lossy compressioon失真的壓縮演算法,所製成的圖檔格式;也就是說這種壓縮法壓縮的效果特別顯著,會失去許多原有的檔案。所以,JPEG可以把圖檔壓得特別小,壓縮率相當驚人;相對的,每個原始圖只能壓縮一次,否則圖形會失真的更離譜。還有,JPG不支援256色階或低階色彩,只能在全彩情況下執行。所以,即使JPG壓縮率很高,但其圖檔依舊比GIF的低色階圖檔來得大很多。在internet上傳送,仍然會傳很久,所以,這種圖檔格式較適合在要求高品質的圖形,或是頻寬較大的情況下。

然而JPG圖檔格式卻也有著三種屬性:

  • 基本壓縮:以最基礎的方式來壓縮JPG檔案,相容性最高,同時網頁的呈現將以逐行掃瞄方式將圖檔呈現出來(有時候發現圖檔顯示不完整缺少下半部,就是採用此壓縮方式),在本平台上為最佳的壓縮方式
     
  • 基本壓縮(最佳化):基礎的方式來壓縮並包含Huffman編碼演算法,如同zip的演算方式,將JPG圖檔壓縮到最高的壓縮比較容易攜帶但需要注意的是,可能造成網頁呈現上的問題。
     
  • 漸進式:漸進式的壓縮方式的呈現,主要是以多次掃瞄的方式呈現影像的,所以影像會先模糊,然後逐漸清晰。

    Netscape 2.0 版首先支援JPEG圖檔,稱之為Progressive JPEG(漸進式JPEG圖檔模式)。


    PNG(Portable Network Graphics),是由Thomas Boutell所研發的圖檔格式,結合了GIF與JPEG圖檔的優點, 主要特色是:它是一種可以攜帶式(portable)、合法公開使用(legally unencumbered)、壓縮不失真(well-compressed)、阿法線性等量(alpha channels)的點陣圖檔(bitmapped image files)。在1996年十月 ,W3C公開發表PNG為另一種網路圖檔格式。

    PNG與GIF特色雷同之處,有:

    • 必須在256種色階下執行操作。
    • 接力式(streamability) - 圖檔可以連續地讀寫。
    • 漸進式顯示(progressive display) - 由於是低色階圖,所以在網路上,可以採漸進式,快速地傳送,接收時也會快速地由模糊圖顯現為清楚的圖檔。
    • 透明效果(transparency) - 可以作透明效果,還可以作非方形的透明效果圖。
    • 輔助效果(ancillary information) - 可以加入一些特殊繪圖效果或資料於PNG圖檔。
    • 需有其獨立的硬體與工作平台。高效率且100%壓縮不失真。

    PNG創新獨有的特色(GIF所沒有的特色),有:

    • 使用全彩模式時,可以高至每pixel 有48 bits (圖可以解析得更細緻)。使用灰階圖模式時,可以高至每pixel有16 bits (解析度較好)。
    • 可以完全阿法線性等量(fully alpha channel) - 通常用在透明遮罩用途上。
    • 自動調整合適的圖形亮度/對比,顯示最佳效果。
    • 具可靠性,會自動直接偵測圖形傳送時所造成的的常見的檔案訛誤。
    • 網路上,更快速的漸進式傳送顯示圖檔模式。

    網路動畫 - GIF

    在WWW上瀏覽過的你,對電腦動畫一定是相當有興趣,因為動畫向來是網路上的小丑,最能吸引人興趣的媒體;甚至,有許多人總是把WWW與動畫直接劃上等號。網路廣告比平面廣告更勝一籌的就是它可以動,可以藉由動畫效果來增加參觀者對此網站廣告的印象。製作動畫方法很多,有簡單的GIF作法,也有專業高難度的FLASH作法。

    GIF網路動畫,是由幾張2D平面圖連結在一起,以快速度、無限次地播放,所形成的一個動畫檔。所以,動畫檔的動作是反覆不斷地重播,造成另一種視覺效果。

    Sample: (每張底圖的間隔為30/100秒)

    解剖圖說明:

    網路動畫 - FLASH

    Flash是Macromedia公司自行創出的動畫格式,不是W3C公會認可的動畫標準,因此瀏覽者必須加入Flash的外掛瀏覽程式,方能開啟執行.swf檔。

    Flash能製作出生動、活潑、聲光效果、互動網頁 , 跟一般靜態網頁比起來 , 真是大巫見小巫...由於Flash是採向量格式產生幾何圖形,因此Flash 製作出來的檔案並不會很大,備受使用者喜愛。

    由於Flash是採外掛觀看程式瀏覽,因此在它的原始碼裡總是有< codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab ..... >等等呼叫macromedia網站裡的觀看程式碼,方能執行該swf動畫檔。這麼一來,該Flash動畫檔就不能離線觀看,非得時時掛在網路上才行,這就很不 user friendly了。

  •  
     
     
     


    gotop