前端開發中經常使用的幾種圖片格式及其使用規範

在介紹圖片格式以前，首先說一些額外的東西。

 

矢量圖與位圖。

矢量圖是經過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息經過計算的方式來顯示圖形的。通常來講矢量圖表示的是幾何圖形，文件相對較小，而且放大縮小不會失真。

這裏有一點要注意的是web開發中用到的圖片都不是矢量圖，即便是一個三角形，只有一個邊框，都是位圖。

那麼矢量圖在哪裏有用到呢？

我目前的知識池就知道一個圖標字體，好比 font-awesome 

 

目前在前端的開發中經常使用的圖片格式有三種：jpg,png,gif。這些都是位圖。

位圖又叫像素圖或柵格圖，它是經過記錄圖像中每個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就比如一幅大的拼圖，只不過每一個拼塊都是一個純色的像素點。位圖的優勢是利於顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。

 

---

 

有損壓縮和無損壓縮

有損壓縮是對圖像數據進行處理，去掉那些圖像上會被人眼忽略的細節，而後使用附近的顏色經過漸變或其餘形式進行填充。這樣既能大大下降圖像信息的數據量，又不會影響圖像的還原效果。

JPG是咱們最多見的採用有損壓縮對圖像信息進行處理的圖片格式。

咱們在保存圖片爲jpg格式時，會有一個品質選項

這裏指的就是對圖片的損耗程度，若是壓縮的話通常選擇品質在60-80之間，60如下圖片失真會很嚴重。

無損壓縮

PNG是咱們最多見的一種採用無損壓縮的圖片格式。無損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不一樣的，而後把這些相同的數據信息進行壓縮記錄，（例如一片藍色的天空之須要記錄起點和終點的位置就能夠了），而把不一樣的數據另外保存（例如天空上的白雲和漸變等數據）。

這裏要說明的是，無損壓縮只是一種相對的「無損」壓縮，並非說不管如何壓縮圖片都不會失真。這點在PNG8中體現的尤其明顯。PNG8最多隻能索引256種顏色，因此在圖像上出現的顏色數量大於咱們能夠保存的顏色數量時，咱們就不能真實的記錄和還原圖像了。

 

---

 

透明

索引透明：即布爾透明，相似於GIF，某一像素只有全透和全不透明兩種效果不能對透明度進行設置

Alpha透明：半透明

 

 

---

下面進入正題。

1 GIF

先簡單說一下GIF吧，GIF是一種正在逐漸被拋棄的圖片格式。PNG格式的出現就是爲了替代它。PNG 8除了不支持動畫外，PNG8有GIF全部的特色，可是比GIF更加具備優點的是它支持alpha透明和更優的壓縮（GIF僅支持索引透明）。

可是gif在網上仍是有一席之地的，好比在貼吧或者qq羣裏常看到的動畫圖片，用的都是gif。

當圖片顏色簡單到必定程度，大小小到必定程度的時候，gif格式圖片大小要小於png8。好比一個1*1像素的純黑色點，在PNG8下是124byte，在GIF下是43byte。

可是此時的話用css或者base64是一種更好的選擇。關於base64 具體參考：base64:URL背景圖片與web頁面性能優化。

 

2 JPG

JPG在存儲圖像時會把圖像分解成8*8像素的柵格（如上圖），而後對每一個柵格的數據進行壓縮處理，當咱們放大一幅圖像的時候，就會發現這些8*8像素柵格中不少細節信息被去除，而經過一些特殊算法用附近的顏色進行填充。這也是爲何咱們用JPG存儲圖像有時會產生塊狀模糊的緣由。

同時由於它是一塊一塊的，那麼當邊界模糊，顏色漸變的時候，就能達到很是好的效果，這也是它適合大塊顏色相近圖片的緣由。

JPG在柵格化時精確記錄少數點，其它點用差值補齊，因此當顏色較少時，在文件大小上能夠體現出優點。

優缺點：

1. 支持攝影圖像或寫實圖像的高級壓縮，而且可利用壓縮比例控制圖像文件大小。
2. 有損壓縮會使圖像數據質量降低，而且在編輯和從新保存JPG格式圖像時，這種降低損失會累積。
3. JPG和PNG8都適合顏色較少的圖片，可是當圖像顏色數少於必定值好比256的時候，PNG8可能更合適
4. JPG和PNG8都適合大塊顏色相近的圖片。
5. JPG不適合亮度("銳度")差別十分明顯的較簡單的圖片。

JPG在存儲攝影或寫實圖像通常能達到最佳的壓縮效果，好比網站的背景圖，輪播圖，用戶頭像等等。

 

3 PNG

這裏PNG放在最後說，PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。

後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。」8″表明2的8次方也就是256色，而24則表明2的24次方大概有1600多萬色。

關於透明：

1. PNG8支持索引透明和alpha透明
2. PNG24不支持透明;
3. 而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明，也就是說能夠存儲從徹底透明到徹底不透明一共256個層級的透明度（即所謂的半透明）。

你可能要問了，我保存是PNG-24格式，爲何還有透明呢？

其實在你勾選了透明度選項以後，你保存的格式就是PNG-32了，只是ps沒有提示你罷了。

優缺點：

1. 能在保證最不失真的狀況下儘量壓縮圖像文件的大小。
2. PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，而且還可存儲多到16位的α通道數據。
3. 對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。

使用規範：

1，少用圖片元素，儘可能用css3代替

好比圓角，提示框，不會二次渲染的元素的陰影。關於css3的filter屬性，在移動端並不推薦使用，雖然會節省圖片的空間，可是  一、渲染會消耗性能，致使頁面加載反而變慢；二、andorid系統在4.0以上版本才支持。

2，儘可能少用png32格式，太大了=。=

在某些狀況下，若是損失必定的視覺能夠得到性能較大的提高，能夠和設計師協商去掉一些效果。

3， JPG適合攝影圖像或寫實圖像，同時也適合顏色較少圖像；

　　PNG8 適合所含顏色不多(少於256)、具備大塊顏色相近的區域或亮度差別十分明顯的較簡單的圖片；

　　PNG32適合圖片較爲複雜且有透明效果且透明效果沒法用css來實現的狀況。

4， 若是頁面中有較多的小icon，首先考慮使用webfont,若是webfont不能知足需求，必須使用css sprite將圖片合併，來壓縮整體圖片的大小，同時減小頁面請求提升訪問速度。

 

另外關於png圖片的壓縮，除了調整最大索引色外，這個網站用着還不錯 www.tinypng.com

肉山說壓縮去grunt找個插件寫個腳本就能夠，imagemin,等我成功後再來更新~