網頁中幾種格式的圖片圖標的區別

一.unicode

1.簡介

unicode是字體在網頁端最原始的應用方式，可以用來繪制一些簡單的圖標。

2.功能：

兼容性最好，支持ie6+，及所有現代瀏覽器。支持按字體的方式去動態調整圖標大小，顏色等等。但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。

二.canvas

1.簡介

canvas是html5提供的新元素。canvas可以看做是一個畫布，其繪制出來的圖形為標量圖。

2.功能：

可在canvas中引入jpg或png這類格式的圖片。在實際開發中，大型的網絡游戲都是用canvas畫布做出來的，并且canvas的技術現在已經相當的成熟。另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。canvas里面繪制的圖形不能被引擎抓取，canvas中我們繪制圖形通常是通過javascript來實現。

三.svg

1.簡介

svg存在的歷史要比canvas久遠，已經有十幾年了。svg并不是html5專有的標簽，最初svg是用xml技術（超文本擴展語言，可以自定義標簽或屬性）描述二維圖形的語言。

2.功能：

svg，所繪制的圖形為矢量圖，不能引入普通的圖片，因為矢量圖的不會失真的特點，在項目中我們會用來做一些動態的小圖標。這個特點也很適合被用來做地圖，百度地圖就是用svg技術做出來的。

svg里面的圖形可以被引擎抓取，支持事件的綁定，svg更多的是通過標簽來實現。我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用于繪制二維圖形，后者用于繪制三維圖形。TWO.JS可以支持三種格式，svg（默認）、canvas、和WEBGL。當然也可以在普通div中引入。

?

四.webp

WebP是Google新推出的影像技術，它可讓網頁圖檔有效進行壓縮，同時又不影響圖片格式兼容與實際清晰度，進而讓整體網頁下載速度加快。

由于目前互聯網上傳輸的數據有65%都是圖片，WebP就是出于減少數據量、加速網絡傳輸的目的而開發的。為了改善JPEG的圖片壓縮技術，他們使用了一種基于VP8編碼(已在2010五月開源)的圖片壓縮器，利用預測編碼技術，同時還采用了一種基于RIFF的非常輕量級的容器。這種容器只會給每張圖片增加20字節，但能讓圖片作者保存他們想要存儲的元數據。

與JPEG相同，WebP是一種有損壓縮利用預測編碼技術。但谷歌表示，這種格式的主要優勢在于高效率。他們發現，"在質量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%。

目前, Google放出了WebP文件解碼器(libvpx)和命令行工具(webpconv)，用于JPEG等格式圖片與WebP格式之間的轉換，不過系統支持暫時僅限Linux，Windows版本將在稍后推出。

WebP團隊還在開發WebKit內核補丁，用于在Google Chrome瀏覽器中提供對WebP格式的原生支持。

美中不足的是，WebP格式圖像的編碼時間"比JPEG格式圖像長8倍"。

與jpg圖片的對比：

與PNG圖片的對比：

總結

以上是生活随笔為你收集整理的网页常见的图标图片格式的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。