您好,登錄后才能下訂單哦!
web中承載信息的主要方式就是圖片與文字了,以下就是對一些web圖片格式的優缺點進行歸納。
1、GIF
GIF圖是比較古老的web圖片格式之一,可以追溯到1987,幾乎所有的瀏覽器都支持這一種格式,老有老的好處嘛。GIF是一種索引色模式圖片,所以GIF每幀圖所表現的顏色最多為256種。GIF能夠支持動畫,也能支持背景透明,這點連古老的IE6都支持,所以在以前想要在項目中使用背景透明圖片,有一些方案就是生成GIF圖片。GIF與JPEG、PNG相比,在通常情況下確實體積比較小。不過里面如果放入了足夠多幀的圖片,那么可能就不是那種情況了。現在網絡上的GIF可以說是爆炸式的再增長,顯然更多的在與他的兩個特點:支持動畫與兼容性好。缺點就是:色彩表現度不夠豐富。
2、JPEG、JPG
平常我們大部分見到的靜態圖基本都是這種圖片格式。這種格式的圖片能比較好的表現各種色彩,主要在壓縮的時候會有所失真(主要是壓縮時,會在細節上把相鄰的一些色彩給同化掉),也正因為如此,造就了這種圖片格式體積的輕量。格式被各中老弱病殘的瀏覽器兼容,不過不支持背景透明與動畫。平時web上的廣告圖、相片、特大背景圖、輪播圖等等一些大圖場景中,都適用這個。
3、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內核的瀏覽器(代表瀏覽器:火狐)有比較好的支持,其它的就無從談起了。
4、webP
這個格式的圖片的格式是財大氣粗的Google在2010發布出來的,它擁有現有位圖格式的所有優點,包括體積小、色彩表現足夠、支持動畫(一開始是不支持的)。當然,新東西的缺點就是兼容性不是很好,還有就是呈現這種圖片格式計算量比平常的圖片要大很多。由于出生好,東西本身也不錯,越來越多的開發者與設計者開始關注它。國內某家公司也在使用這種格式圖片制作表情。
5、SVG
SVG是一種矢量圖,在現在來說,得到的支持是很可觀的。矢量圖比位圖一個天生的有點,就是它不管放多大都不會模糊。這種格式的圖片,對一些簡單的線條、 形狀表現是很不錯的,如果表達更復雜的圖像(如照片),那這個就會變的太復雜。SVG能夠支持動畫(SVG的動畫特性不能被IE瀏覽器很好的支持),以前的flash那樣,還支持css樣式的一些修改。我們現在網頁上的很多icon圖標都是使用這個的,svg也能夠把多個SVG組合起來。總體來說,SVG還是一個比較看好的技術。
瀏覽器中,對于圖片的技術更新一直突破,其較于文字來說唯一缺點就是體積太大,但圖片的表現力是文字無法比擬的,也相信圖片會越來越好吧。關于web上位圖的技術還有一個是database64,這個是可以把的圖片轉化成為16位的代碼直接插入web中。
壓縮方式 | 單張圖能支持顏色種類 | 是否支持透明度 | 是否支持動畫 | 兼容情況 | |
GIF | 無損壓縮 | 256 | 是 | 是 | 基本通用 |
JPEG | 有損壓縮 | 1600萬以上 | 否 | 否 | 基本通用 |
PNG | 無損壓縮 | 1600萬以上 | 是 | 否 | 基本通用 |
APNG | 無損壓縮 | 1600萬以上 | 是 | 是 | Firefox51++ Chrom59++ iOS Sarfi9.3++ |
webP | 有損壓縮 | 1600萬以上 | 是 | 是 | Opera 44++ Chrom 45++ |
SVG | 矢量圖 | 1600萬以上 | 是 | 是 | 除了IE8以及以下, 現在各主瀏覽器都支持 |
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。