2013年8月13日星期二

Web Design常用Web圖像格式簡述:png/svg

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的地方在於:它處理相片類圖像亦是CMS採用非破壞性壓縮,圖像壓縮後能保持與壓縮前圖像品質一樣,沒有一點失真。   特點3:更優化的傳輸顯示。   熟悉gif格式的圖像處理者知道,gif圖像有兩種模式——normal(普通)模式和interlaced(交錯)模式。interlaced模式更適用於網路傳輸。在傳送圖像過程中,流覽者先看到圖像一個大略的輪廓然後再慢慢清晰。png也採取了interlaced模式,使圖像得以水準及垂直方式顯像電郵服務在螢幕上,加快了下載的速度。   特點4:支援圖像透明顯示。   gif格式雖然也支援透明顯示,採用gif格式透明圖像過於刻板,因為gif透明圖像只有1與0的透明資訊、只有透明或不透明兩種選擇,沒有層次;而png提供了α頻段0至255的透明資訊,可以使圖像的透明區域出現深度不同的層次。   png圖像就可以讓圖像覆蓋在任何背景上電子商務都看不到接縫,改善gif透明圖像描邊不佳的問題。   特點5:相容性較好。 png被設計成可以通過網路傳送到任何機種及作業系統上讀取。   文字資料(如作者、出處)、儲存遮罩(MASK)、伽瑪值、色彩校正碼等資訊均可參雜在 png圖像中一起傳輸。   幾個發現:   不透明和索引色透明的圖片, png8比gif更加具有優勢。    Alpha透明的圖片,png8比gif顯示效果好,但檔更大。    png24沒有透明效果:包括索引色網站排名透明和Alpha透明。   不同的流覽器,顯示效果不一樣。   Firefox:支援png8的索引色透明度, png8 和png32的alpha透明度。    IE:支援png8的索引色透明度,但不支持png8和png32的alpha透明度。(可用Js+css濾鏡解決)   網頁中使用的照片類圖片,jpg檔一般比png24要小很多。但不排除特殊情況。    SVG 圖像格式   SVG是種一種可縮放的向量圖形。它是基於XML,由W3C聯盟進行開發的。嚴格來說應該是一種開放標準的向量圖形語言,可讓你設計激動人心的、高解析度的Web圖形頁面。   用戶可以直接用代碼來描繪圖像,可以用任何文字處理工具打開SVG圖像,通過改變網頁設計公司部分代碼來使圖像具有交互功能,並可以隨時插入到HTML中通過流覽器來觀看。   SVG提供了目前網路流行格式GIF和JPEG無法具備了優勢:可以任意放大圖形顯示,但絕不會以犧牲圖像品質為代價;   文字在SVG圖像中保留可編輯和可搜尋的狀態;平均來講,SVG檔比JPG和GIF格式的檔要小很多,因而下載也很快。

没有评论:

发表评论