最近在面試的時候被問到：平時在開發(fā)中都使用過哪些格式的圖片，能否簡單地介紹一下這些格式的特點以及適用場景？雖然常見的圖片格式諸如JPG、PNG、GIF、WEBP都有使用過，但是遺憾的是，一直都沒有深入了解過這些格式的區(qū)別和使用場景，所以導致面試過程一度陷入尷尬，面試結果也就可想而知了……吃一塹長一智，回到家還是老老實實把這些知識整理并記錄下來，畢竟不能在一個地方跌倒兩次。
廢話不多說，開始進入正文吧！
一、基本概念
1. 有損壓縮
有損壓縮圖像的特點：保持顏色的逐漸變化，刪除圖像中顏色的突然變化。
有損壓縮的原理：刪除景物邊緣的某些顏色部分，當人們在屏幕上觀看這個場景圖片，大腦會利用在景物上看到的顏色填補所丟失的顏色部分。
例如藍色天空背景上的一朵白云，有損壓縮時會刪除白云與藍天交界的部分，即圖中紅線所在位置。
利用有損壓縮技術，某些數(shù)據(jù)被有意地刪除了，而被刪除的數(shù)據(jù)也不會再恢復。
2. 無損壓縮
無損壓縮的特點：相同的顏色信息只需保存一次。
無損壓縮的原理：首先辨別出相同顏色的區(qū)域，然后把這些相同的數(shù)據(jù)信息進行壓縮記錄，也就是記錄它的顏色信息、起始和終止位置。
例如紅框內(nèi)的區(qū)域，我們可以把它看成由很多相同藍色像素拼接而成，壓縮保存圖片時我們只需要記錄藍色和區(qū)域信息。
從本質上看，無損壓縮的方法可以刪除一些重復數(shù)據(jù)，減少要在磁盤上保存的圖像尺寸。但是，無損壓縮的方法并不能減少圖像的內(nèi)存占用量，這是因為，當從磁盤上讀取圖像時，軟件又會把丟失的像素用適當?shù)念伾畔⑻畛溥M來。如果要減少圖像占用內(nèi)存的容量，就必須使用有損壓縮方法。
3. 透明通道
透明通道(又稱阿爾法通道-Alpha Channel)是指一張圖片的透明和半透明度。
例如：一個使用16位存儲的圖片，可能5位表示紅色，5位表示綠色，5位表示藍色，1位是透明通道。在這種情況下，它要么表示透明要么不是；一個使用32位存儲的圖片，每8位表示紅綠藍，和阿爾法通道。在這種情況下，就不光可以表示透明還是不透明，還可以表示256級的半透明度。
4. 色彩深度
色彩深度指的是儲存1像素的顏色所用的位數(shù)。如果色彩深度是n位，即有2的n次方種顏色選擇。
例如，常見的PNG格式支持8位、24位、32位三種形式，其中8位PNG支持兩種不同的透明形式（索引透明和alpha透明），24位PNG不支持透明，32位PNG在24位基礎上增加了8位透明通道，因此可展現(xiàn)256級透明程度。
注：索引圖片只能有完全透明和不透明兩種，alpha通道圖片可以是比如 50% 透明的紅色之類,半透明效果。
5. 矢量圖與位圖
矢量圖-完美的幾何圖形
矢量圖是 通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息通過計算的方式來顯示圖形的。就好比我們在幾何學里面描述一個圓可以通過它的圓心位置和半 徑來描述，當然還可以通過邊框的粗細、顏色以及填充的顏色等數(shù)據(jù)去描述它的樣式。而電腦在顯示的時候則通過這些數(shù)據(jù)去繪制出我們定義的圖像。
矢量圖的優(yōu)點在于文件相對較小，并且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現(xiàn)自然度高的寫實圖像。
需要強調(diào)說明的是我們在web頁面上所使用的圖像都是位圖，即便有些稱為矢量圖形（如矢量icon等）也是指通過矢量工具進行繪制然后再轉成位圖格式在web上使用的（區(qū)別于像素繪制的圖形）。
位圖-神奇的拼圖
位圖又叫 像素圖或柵格圖，它是通過記錄圖像中每一個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個拼塊都是一個純色的像 素點，當我們把這些不同顏色的像素點按照一定規(guī)律排列在一起的時候，就形成了我們所看到的圖像。所以當我們放大一幅像素圖時，能看到這些拼片一樣的像素點 （如下圖）。
位圖的優(yōu)點是利于顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。
盡管我們在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過記錄像素點的數(shù)據(jù)來保存和顯示圖像，但這些不同格式的圖像在記錄這些數(shù)據(jù)時的方式卻不一樣，這就是涉及到有損壓縮和無損壓縮的區(qū)別。
如果你理解了上面這些概念，我相信接下來學習圖片格式的過程將會輕松很多。
二、常見的圖片格式
1. JPG格式
特性：
- 采用有損壓縮處理圖像信息，壓縮過程會有一定程度的數(shù)據(jù)丟失，即通常所講的“失真”
- 可以自己控制壓縮比例從而使圖片達到最佳效果
- 不支持透明通道
適用場景：
適用于存儲色彩豐富、層次分明的圖片。
2. PNG格式
特點：
- 采用無損壓縮處理圖像信息，會在保證最不失真的情況下盡可能壓縮圖像文件的大小
- 支持透明通道
適用場景：
適用于存儲顏色較少，并且主要以純色或者平滑的漸變色進行填充的圖片。
3. WEBP格式
特點：
- 支持有損壓縮、無損壓縮和透明通道，可以根據(jù)圖片的實際情況選擇壓縮方式
- 在Android 4.0(API level 14)中支持有損的WebP圖像，在Android 4.3(API level 18)和更高版本中支持無損和透明的WebP圖像
- WebP 無損壓縮的圖片可以比同樣大小的 PNG 小 26%；
- WebP 有損壓縮的圖片可以比同樣大小的 JPEG 小 25-34%；
- WebP 支持無損的透明圖層通道，代價只需增加 22% 的字節(jié)存儲空間；
- WebP 有損透明圖像可以比同樣大小的 PNG 圖像小3倍。
適用場景：
作為一個比較全能的圖片格式，自然是適用于各種場景，可以根據(jù)實際情況選擇。
三、真實場景下JPG&PNG對比
a. 色彩豐富圖片
我們可以看到，JPG格式所占的存儲空間為353K，而PNG格式所占的存儲空間為1.61M,顯示效果上也沒有很大的差別。
b. 顏色種類比較單一并且顏色變化不明顯的圖片
我們可以看到，JPG格式所占的存儲空間為1.58K，而PNG格式所占的存儲空間僅為754B。
通過以上對比可以得出如下結論：單純從圖片所占存儲空間的角度考慮，顏色種類單一、主要以純色或者漸變色進行填充的圖片適合使用PNG格式存儲；顏色種類多樣、且顏色變化明顯的圖片適合使用JPG格式存儲。
四、總結
假如你耐心地讀到了這里，那么我相信你現(xiàn)在最想知道的就是是在實際開發(fā)過程中到底該如何選擇合適的格式存儲圖片呢？接下來我將結合我的個人經(jīng)驗和理解，總結一些常見場景下的選擇方案。
1. App按照啟動圖標
我們知道大部分App的啟動圖標是比較簡單的，因此它更適合使用PNG格式，并且通常放在項目的mipmap文件夾內(nèi)。
2. 廣告圖片
對于廣告圖片來說，首先它需要在短時間內(nèi)吸引用戶的注意，因此色彩搭配可能會比較鮮艷；其次，廣告圖片通常是不固定的，圖片內(nèi)容可能會頻繁更換，因此圖片應該盡可能地被壓縮從而達到節(jié)省用戶流量的目的。綜合以上兩點，顯然有損壓縮最適合這個場景，我們可以選擇WEBP或JPG格式。
3. 簡單的按鈕
android開發(fā)中最常見的一些Button一般都有背景圖，例如登錄、注冊等等。這種情況應該優(yōu)先考慮使用xml實現(xiàn)Button背景，然后再考慮使用PNG圖片。詳細介紹請點擊這里
