5種Web圖像格式簡述

來源: Daka 2007-06-06 17:23:02 [] [舊帖] [給我悄悄話] 本文已被閱讀: 次 (9014 bytes)
本文內容已被 [ Daka ] 在 2007-06-06 17:54:07 編輯過。如有問題,請報告版主或論壇管理刪除.
5種Web圖像格式簡述

BMP圖像

BMP圖像文件最早應用於Windows操作係統,是Windows操作係統中的標準圖像文件格式,是最簡單的圖像格式。

BMP圖像格式非常簡單,僅具有最基本的圖像數據存儲功能,能存儲每個像素1位、4位、8位和24位的位圖。雖然它提供的信息過於簡單,但是由於 Windows係統的普及以及BMP本身具有格式簡單、標準、透明的特點,BMP圖像文件格式得到了推廣,它一般應用於Windows係統下的屏幕顯示以及一些簡單圖像係統中。

這種格式的特點是包含的圖像信息較豐富,幾乎不壓縮,但由此導致了它與生俱生來的缺點--占用磁盤空間過大。

一張24位的800×600的bmp格式圖形文件大小

800×600×3byte=1440000byte≈1440byte≈1.44M

現在很少會在網頁中使用。

GIF圖像

從這個名字可以看出,這種圖像格式主要是為了通過網絡傳輸圖像而設計的。

GIF格式的特點是壓縮比高,磁盤空間占用較少,所以這種圖像格式迅速得到了廣泛的應用。

兩種版本

  1. GIF87a:隻是簡單地用來存儲單幅靜止圖像。

  2. GIF89a:可以同時存儲若幹幅靜止圖象進而形成連續的動畫,使之成為支持 2D動畫的格式。可指定透明區域,使圖像具有非同一般的顯示效果,這更使GIF風光十足。目前Internet上大量采用的彩色動畫文件多為這種格式的文件。像素畫。QQ秀,QQ空間等N多QQ的東西。

GIF圖像格式還增加了漸顯方式,也就是說,在圖像傳輸過程中,用戶可以先看到圖像的大致輪廓,然後隨著傳輸 過程的繼續而逐步看清圖像中的細節部分,從而適應了用戶的"從朦朧到清楚"的觀賞心理。

screen.width-500) this.style.width=screen.width-500; }" border="0" />

GIF圖像格式還增加了漸顯方式,也就是說,在圖像傳輸過程中,用戶可以先看到圖像的大致輪廓,然後隨著傳輸 過程的繼續而逐步看清圖像中的細節部分,從而適應了用戶的"從朦朧到清楚"的觀賞心理。

由於8位存儲格式的限製,使其不能存儲超過256色的圖像。

最適合在圖片顏色總數少於256色的使用。GIF格式,文體體積小,而且清晰度非常高。

讓GIF格式達到最佳顯示效果的方法

  1. 如果色係較少,顏色少於256,調色板可以選擇為“精確”。

  2. 不要選“失真”。

  3. 一般情況,調色板選擇“最合適”,最大顏色數選擇“256”。如果色彩稍多於256色,可將抖動設為“100%”。

  4. 為防止邊緣出現鋸齒,不需要透明的時候,盡量不透明。

一個小技巧

screen.width-500) this.style.width=screen.width-500; }" border="0" />

如需將網頁切片導出成gif格式的時候,如果色彩較豐富,不宜一起導出,而應該將切片一個一個的導出。如下圖的按鈕:

screen.width-500) this.style.width=screen.width-500; }" border="0" />

JPEG圖像

JPEG是由聯合照片專家組開發的。

JPEG文件的擴展名為.jpg或.jpeg,其壓縮技術十分先進,它用有損壓縮方式去除冗餘的圖像和彩色數據,獲取得極高的壓縮率的同時能展現十分豐富生動的圖像,換句話說,就是可以用最少的磁盤空間得到較好的圖像質量。

JPEG 2000同樣是由JPEG 組織負責製定的,與JPEG相比,它具備更高壓縮率以及更多新功能的新一代靜態影像壓縮技術。

JPEG2000 作為JPEG的升級版,其壓縮率比JPEG高約30%左右。與JPEG不同的是,JPEG2000 同時支持有損和無損壓縮,而JPEG隻能支持有損壓縮。無損壓縮對保存一些重要圖片是十分有用的。

JPEG2000的一個極其重要的特征在於它能實現漸進傳輸,這一點與GIF的“漸顯”有異曲同工之妙,即先傳輸圖像的輪廓,然後逐步傳輸數據,不斷提高圖像質量,讓圖象由朦朧到清晰顯示。

screen.width-500) this.style.width=screen.width-500; }" border="0" />

此外,JPEG2000還支持所謂的"感興趣區域"特性,你可以任意指定影像上你感興趣區域的壓縮質量,還可以選擇指定的部份先解壓縮。

使用jpg圖像的注意點:在圖像質量和文件尺寸之間找到平衡點。
一般80%的壓縮率是比較合適在網頁中使用的。

PNG圖像

PNG,是一種可攜式網絡圖像格式。

PNG一開始便結合GIF及JPG兩家之長,打算一舉取代這兩種格式。1996年10月1日由PNG向國際網絡聯盟提出並得到推薦認可標準,並且大部分繪圖軟件和瀏覽器開始支持PNG圖像瀏覽,從此PNG圖像格式生機煥發。

IE瀏覽器從4.0版本開始支持png圖像瀏覽。

特點1:兼有gif和jpg的色彩模式。

我們知道gif格式圖像采用了256色以下的index color色彩模式,jpg采用的是24位真彩模式。png不僅能儲存256色以下的index color圖像,還能儲存24位真彩圖像,甚至能最高可儲存至48位超強色彩圖像。

特點2:png能把圖像文件壓縮到極限以利於網絡傳輸,但又能保留所有與圖像品質有關的信息。

如果你的圖像是以文字、形狀及線條為主,png會用類似gif的壓縮方法來得到較好的壓縮率,而且不破壞原始圖像的任何細節。據國際網絡聯盟測算,八位的png圖像比同位的gif圖像就小10%到30%。

而對於相片品質一類的壓縮,png則采用類似jpg的壓縮演算法。但是jpg壓縮程度越大、影像的品質越差。因為它的壓縮是采用的是破壞性壓縮法、每次壓縮的同時便多多少少漏掉一些像素。 png不同於jpg的地方在於:它處理相片類圖像亦是采用非破壞性壓縮,圖像壓縮後能保持與壓縮前圖像質量一樣,沒有一點失真。

特點3:更優化的傳輸顯示

熟悉gif格式的圖像處理者知道,gif圖像有兩種模式——normal(普通)模式和interlaced(交錯)模式。interlaced模式更適用於網絡傳輸。在傳送圖像過程中,瀏覽者先看到圖像一個大略的輪廓然後再慢慢清晰。png也采取了interlaced模式,使圖像得以水平及垂直方式顯像在螢幕上,加快了下載的速度。

screen.width-500) this.style.width=screen.width-500; }" border="0" />

特點4:支持圖像透明顯示

gif格式雖然也支持透明顯示,采用gif格式透明圖像過於刻板,因為gif透明圖像隻有1與0的透明信息、隻有透明或不透明兩種選擇,沒有層次;而png提供了α頻段0至255的透明信息,可以使圖像的透明區域出現深度不同的層次。

png圖像就可以讓圖像覆蓋在任何背景上都看不到接縫,改善gif透明圖像描邊不佳的問題。

特點5:兼容性較好

gif圖像在不同係統上所顯示的畫麵也會跟著不一樣,但png卻可以讓你在Macintosh上製作的圖像與在Windows上所顯示的圖像完全相同,反之亦然。
png被設計成可以通過網絡傳送到任何機種及作業係統上讀取。

文字資料(如作者、出處)、儲存遮罩(MASK)、伽瑪值、色彩校正碼等信息均可參雜在 png圖像中一起傳輸。

幾個發現

  1. 不透明和索引色透明的圖片, png8比gif更加具有優勢。

  2. Alpha透明的圖片,png8比gif顯示效果好,但文件更大。

  3. png24沒有透明效果:包括索引色透明和Alpha透明。

  4. 不同的瀏覽器,顯示效果不一樣。
    Firefox:支持png8的索引色透明度, png8 和png32的alpha透明度。
    IE:支持png8的索引色透明度,但不支持png8和png32的alpha透明度。(網上有解決方法,Js,css濾鏡)

  5. 網頁中使用的照片類圖片,jpg文件比png24要小很多。

  6. 不排除特殊情況

SVG圖像

SVG可以算是目前最最火熱的圖像文件格式了,是種可縮放的矢量圖形。它是基於XML,由W3C聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言,可讓你設計激動人心的、高分辨率的Web圖形頁麵。

用戶可以 直接用代碼來描繪圖像,可以用任何文字處理工具打開SVG圖像,通過改變部分代碼來使圖像具有交互功能,並可以隨時插入到HTML中通過瀏覽器來觀看。

SVG提供了目前網絡流行格式GIF和JPEG無法具備了優勢:可以任意放大圖形顯示,但絕不會以犧牲圖像質量為代價;

文字在SVG圖像中保留可編輯和可搜尋的狀態;平均來講,SVG文件比JPG和GIF格式的文件要小很多,因而下載也很快。

可以相信,SVG的開發將會為Web提供新的圖像標準。

所有跟帖: 

最煩png @@ -我稀飯搗亂- 給 我稀飯搗亂 發送悄悄話 (0 bytes) () 06/06/2007 postreply 20:19:58

我最喜歡png -butdie- 給 butdie 發送悄悄話 (28 bytes) () 06/06/2007 postreply 21:29:15

哦,好像不是所有browsers都可以打開吧,@_@ -我稀飯搗亂- 給 我稀飯搗亂 發送悄悄話 (45 bytes) () 06/07/2007 postreply 07:09:54

那麽pnp呢?:P -ohlalala- 給 ohlalala 發送悄悄話 (0 bytes) () 06/07/2007 postreply 04:57:49

Philosophy-Neuroscience-Psychology? -我稀飯搗亂- 給 我稀飯搗亂 發送悄悄話 (17 bytes) () 06/07/2007 postreply 07:01:49

請您先登陸,再發跟帖!

發現Adblock插件

如要繼續瀏覽
請支持本站 請務必在本站關閉/移除任何Adblock

關閉Adblock後 請點擊

請參考如何關閉Adblock/Adblock plus

安裝Adblock plus用戶請點擊瀏覽器圖標
選擇“Disable on www.wenxuecity.com”

安裝Adblock用戶請點擊圖標
選擇“don't run on pages on this domain”