jpg 圖像格式css
高壓縮的,除了文字,線條外,用jpg 處理html
GIF 圖像格式算法
高壓縮的,動圖瀏覽器
PNG 圖像格式網絡
PNG是一種可攜式網絡圖像格式。PNG一開始便結合GIF及JPG兩家之長,打算一舉取代這兩種格式。1996年10月1日由PNG向國際網絡聯盟提出並獲得推薦承認標準,而且大部分繪圖軟件和瀏覽器開始支持PNG圖像瀏覽,今後PNG圖像格式生機煥發。工具
IE瀏覽器從4.0版本開始支持png圖像瀏覽。優化
特色1:兼有gif和jpg的色彩模式。spa
咱們知道gif格式圖像採用了256色如下的index color色彩模式,jpg採用的是24位真彩模式。png不只能儲存256色如下的index color圖像,還能儲存24位真彩圖像,甚至能最高可儲存至48位超強色彩圖像。設計
特色2:png能把圖像文件壓縮到極限以利於網絡傳輸,但又能保留全部與圖像品質有關的信息。orm
若是你的圖像是以文字、形狀及線條爲主,png會用相似gif的壓縮方法來獲得較好的壓縮率,並且不破壞原始圖像的任何細節。據國際網絡聯盟測算,八位的png圖像比同位的gif圖像就小10%到30%。
而對於相片品質一類的壓縮,png則採用相似jpg的壓縮演算法。可是jpg壓縮程度越大、影像的品質越差。由於它的壓縮是採用的是破壞性壓縮法、每次壓縮的同時便多多少少漏掉一些像素。 png不一樣於jpg的地方在於:它處理相片類圖像亦是採用非破壞性壓縮,圖像壓縮後能保持與壓縮前圖像質量同樣,沒有一點失真。
特色3:更優化的傳輸顯示。
熟悉gif格式的圖像處理者知道,gif圖像有兩種模式——normal(普通)模式和interlaced(交錯)模式。interlaced模式更適用於網絡傳輸。在傳送圖像過程當中,瀏覽者先看到圖像一個大略的輪廓而後再慢慢清晰。png也採起了interlaced模式,使圖像得以水平及垂直方式顯像在螢幕上,加快了下載的速度。
特色4:支持圖像透明顯示。
gif格式雖然也支持透明顯示,採用gif格式透明圖像過於刻板,由於gif透明圖像只有1與0的透明信息、只有透明或不透明兩種選擇,沒有層次;而png提供了α頻段0至255的透明信息,可使圖像的透明區域出現深度不一樣的層次。
png圖像就可讓圖像覆蓋在任何背景上都看不到接縫,改善gif透明圖像描邊不佳的問題。
特色5:兼容性較好。
gif圖像在不一樣系統上所顯示的畫面也會跟着不同,但png卻可讓你在Macintosh上製做的圖像與在Windows上所顯示的圖像徹底相同,反之亦然。
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格式的文件要小不少,於是下載也很快。