矢量圖與位圖
矢量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息通過計算的方式來顯示圖形的。一般來說矢量圖表示的是幾何圖形，文件相對較小，並且放大縮小不會失真。
這裏有一點要注意的是web開發中用到的圖片都不是矢量圖，即使是一個三角形，只有一個邊框，都是位圖。
那麼矢量圖在哪裏有用到呢？
我目前的知識池就知道一個圖標字體，比如 font-awesome
位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個拼塊都是一個純色的像素點。位圖的優點是利於顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。
目前在前端的開發中常用的圖片格式有三種：jpg,png,gif。這些都是位圖。
有損壓縮和無損壓縮
有損壓縮是對圖像數據進行處理，去掉那些圖像上會被人眼忽略的細節，然後使用附近的顏色通過漸變或其他形式進行填充。這樣既能大大降低圖像信息的數據量，又不會影響圖像的還原效果。
JPG是我們最常見的採用有損壓縮對圖像信息進行處理的圖片格式。
我們在保存圖片爲jpg格式時，會有一個品質選項
這裏指的就是對圖片的損耗程度，如果壓縮的話一般選擇品質在60-80之間，60以下圖片失真會很嚴重。
無損壓縮
PNG是我們最常見的一種採用無損壓縮的圖片格式。無損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不同的，然後把這些相同的數據信息進行壓縮記錄，（例如一片藍色的天空之需要記錄起點和終點的位置就可以了），而把不同的數據另外保存（例如天空上的白雲和漸變等數據）。
這裏要說明的是，無損壓縮只是一種相對的“無損”壓縮，並不是說無論如何壓縮圖片都不會失真。這點在PNG8中體現的尤爲明顯。PNG8最多隻能索引256種顏色，所以在圖像上出現的顏色數量大於我們可以保存的顏色數量時，我們就不能真實的記錄和還原圖像了。
透明
索引透明：即布爾透明，類似於GIF，某一像素只有全透和全不透明兩種效果不能對透明度進行設置
Alpha透明：半透明
下面咱們進入正題，這是重點O(∩_∩)O哈！（拍桌子~）。
1 GIF
先簡單說一下GIF吧，GIF是一種正在逐漸被拋棄的圖片格式。PNG格式的出現就是爲了替代它。PNG 8除了不支持動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支持alpha透明和更優的壓縮（GIF僅支持索引透明）。
但是gif在網上還是有一席之地的，比如在貼吧或者qq羣裏常看到的動畫圖片，用的都是gif。
當圖片顏色簡單到一定程度，大小小到一定程度的時候，gif格式圖片大小要小於png8。比如一個1*1像素的純黑色點，在PNG8下是124byte，在GIF下是43byte。
2 JPG
優缺點：
- 支持攝影圖像或寫實圖像的高級壓縮，並且可利用壓縮比例控制圖像文件大小。
- 有損壓縮會使圖像數據質量下降，並且在編輯和重新保存JPG格式圖像時，這種下降損失會累積。
- JPG和PNG8都適合顏色較少的圖片，因爲JPG在柵格化時精確記錄少數點，其它點用差值補齊。但是當圖像顏色數少於一定值比如256的時候，PNG8可能更合適
- JPG不適合具有大塊顏色相近的區域或亮度("銳度")差異十分明顯的較簡單的圖片。
JPG在存儲攝影或寫實圖像一般能達到最佳的壓縮效果，比如網站的背景圖，輪播圖，用戶頭像等等。
3 PNG
這裏PNG放在最後說，PNG可以細分爲三種格式:PNG8，PNG24，PNG32。
後面的數字代表這種PNG格式最多可以索引和存儲的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。
關於透明：
- PNG8支持索引透明和alpha透明
- PNG24不支持透明;
- 而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明，也就是說可以存儲從完全透明到完全不透明一共256個層級的透明度（即所謂的半透明）。
你可能要問了，我保存是PNG-24格式，爲什麼還有透明呢？
其實在你勾選了透明度選項之後，你保存的格式就是PNG-32了，只是ps沒有提示你罷了。
優缺點：
- 能在保證最不失真的情況下儘可能壓縮圖像文件的大小。
- PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，並且還可存儲多到16位的α通道數據。
- 對於需要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。
使用規範：
1，少用圖片元素，儘量用css3代替
比如圓角，提示框，不會二次渲染的元素的陰影。關於css3的filter屬性，在移動端並不推薦使用，雖然會節省圖片的空間，但是 1、渲染會消耗性能，導致頁面加載反而變慢；2、andorid系統在4.0以上版本才支持。
2，儘量少用png32格式，太大了=。=
在某些情況下，如果損失一定的視覺可以獲得性能較大的提升，可以和設計師協商去掉一些效果。
3， JPG適合攝影圖像或寫實圖像，同時也適合顏色較少圖像；
PNG8 適合所含顏色很少(少於256)、具有大塊顏色相近的區域或亮度差異十分明顯的較簡單的圖片；
PNG32適合圖片較爲複雜且有透明效果且透明效果無法用css來實現的情況。
4， 如果頁面中有較多的小icon，首先考慮使用webfont,如果webfont不能滿足需求，必須使用css sprite將圖片合併，來壓縮總體圖片的大小，同時減少頁面請求提高訪問速度。
