談談web上各類圖片應用的優缺點

　　web中承載信息的主要方式就是圖片與文字了，如下就是對一些web圖片格式的優缺點進行概括。

　　一、GIF

　　GIF圖是比較古老的web圖片格式之一，能夠追溯到1987，幾乎全部的瀏覽器都支持這一種格式，老有老的好處嘛。GIF是一種索引色模式圖片，因此GIF每幀圖所表現的顏色最多爲256種。GIF可以支持動畫，也能支持背景透明，這點連古老的IE6都支持，因此在之前想要在項目中使用背景透明圖片，有一些方案就是生成GIF圖片。GIF與JPEG、PNG相比，在一般狀況下確實體積比較小。不過裏面若是放入了足夠多幀的圖片，那麼可能就不是那種狀況了。如今網絡上的GIF能夠說是爆炸式的再增加，顯然更多的在與他的兩個特色：支持動畫與兼容性好。缺點就是：色彩表現度不夠豐富。

　　二、JPEG、JPG

　　日常咱們大部分見到的靜態圖基本都是這種圖片格式。這種格式的圖片能比較好的表現各類色彩，主要在壓縮的時候會有所失真（主要是壓縮時，會在細節上把相鄰的一些色彩給同化掉），也正由於如此，造就了這種圖片格式體積的輕量。格式被各中老弱病殘的瀏覽器兼容，不過不支持背景透明與動畫。平時web上的廣告圖、相片、特大背景圖、輪播圖等等一些大圖場景中，都適用這個。

　　三、PNG

　　PNG格式是有三種版本的，分別爲PNG-8，PNG-24，PNG-32，全部這些版本都不支持動畫的。PNG-8跟GIF相似的屬性是類似的，都是索引色模式，並且都支持背景透明。相對比GIF格式好的特色在與背景透明時，圖像邊緣沒有什麼噪點，顏色表現更優秀。PNG-24其實就是無損壓縮的JPEG。而PNG-32就是在PNG-24的基礎上，增長了透明度的支持。PNG格式在老瀏覽器IE6以及如下，PNG-8透明度的支持度不是很好，PNG-32的透明度基本不支持。正由於如此，之前有一個js插件，專門應對IE6這種BUG，主要是用IE6裏的濾鏡來從新渲染圖片達到透明.隨着時代的發展，PNG也想進步，也想支持動畫。因此，有人推出了APNG（Animated PNG）格式圖片。從字面上理解，就是會動的PNG圖片，不過這個技術實現上與PNG開發小組理念不合，沒有獲得有效推廣。到如今，也就有Blink內核的瀏覽器（表明瀏覽器：火狐）有比較好的支持，其它的就無從談起了。

　　四、webP

　　這個格式的圖片的格式是財大氣粗的Google在2010發佈出來的，它擁有現有位圖格式的全部優勢，包括體積小、色彩表現足夠、支持動畫（一開始是不支持的）。固然，新東西的缺點就是兼容性不是很好，還有就是呈現這種圖片格式計算量比日常的圖片要大不少。因爲出生好，東西自己也不錯，愈來愈多的開發者與設計者開始關注它。國內某家公司也在使用這種格式圖片製做表情。

　　五、SVG

　　SVG是一種矢量圖，在如今來講，獲得的支持是很可觀的。矢量圖比位圖一個天生的有點，就是它無論放多大都不會模糊。這種格式的圖片，對一些簡單的線條、 形狀表現是很不錯的，若是表達更復雜的圖像（如照片），那這個就會變的太複雜。SVG可以支持動畫（SVG的動畫特性不能被IE瀏覽器很好的支持），之前的flash那樣，還支持css樣式的一些修改。咱們如今網頁上的不少icon圖標都是使用這個的，svg也可以把多個SVG組合起來。整體來講，SVG仍是一個比較看好的技術。

　　瀏覽器中，對於圖片的技術更新一直突破，其較於文字來講惟一缺點就是體積太大，但圖片的表現力是文字沒法比擬的，也相信圖片會愈來愈好吧。關於web上位圖的技術還有一個是base64，這個是能夠把的圖片轉化成爲16位的代碼直接插入web中。

 

	壓縮方式	單張圖能支持顏色種類	是否支持透明度	是否支持動畫	兼容狀況
GIF	無損壓縮	256	是	是	基本通用
JPEG	有損壓縮	1600萬以上	否	否	基本通用
PNG	無損壓縮	1600萬以上	是	否	基本通用
APNG	無損壓縮	1600萬以上	是	是	Firefox51++ Chrom59++ iOS Sarfi9.3++
webP	有損壓縮	1600萬以上	是	是	Opera 44++ Chrom 45++
SVG	矢量圖	1600萬以上	是	是	除了IE8以及如下， 如今各主瀏覽器都支持