最近準備給團隊傳授圖片格式的知識，于是開了谷歌，欲找些 PPT 素材，卻發(fā)現(xiàn)似乎沒有人好好寫過與圖片相關(guān)的知識，要么只是照搬一些百科的內(nèi)容，要么寫得太多 CRC、Gamma 之類的專(zhuang)業(yè)(B)術(shù)語，要么花了大量篇幅介紹它們的全稱和歷史（知道了全稱和歷史也不能把圖片用得更好?。?。于是我果斷自己寫一篇。

其實，對于 JPG、GIF、PNG 這3種格式的選擇，其套路非常簡單粗暴——

照片用 JPG。
動畫用 GIF。
Logo、Icon 等小圖用 PNG-8。
非特殊情況，盡量不要用 PNG-24 和 PNG-32。

而 WebP 這種谷歌發(fā)明的新格式，雖然比上述任何一種格式都要好，但是截至現(xiàn)在（2017年10月），它的瀏覽器兼容性還不行，所以暫時還不能用（或者用兩套圖片，不過我嫌麻煩）。

WebP 格式的兼容性（截圖自 caniuse 網(wǎng)站）

另外，最近還流行矢量圖片 SVG 和 Icon Font，本文暫時不介紹這倆，以后有機會我再寫。

好了，懶人看到這就可以關(guān)掉本文章了（或者直接拉到最后，打賞點贊加評論）。

下面介紹一些比較原理性的知識（但也不是很原理，反正像 CRC 呀 Gamma 呀之類的詞我是不會用的）。

主要內(nèi)容

• 從早期的 BMP 格式講起

• 顏色表簡介和作用

• PNG 的顏色表和特性

• GIF 的特性

• JPG 的特性

• JPG 的“連續(xù)”格式

• JPG、GIF、PNG 功能對比

• 所以如何選擇格式（結(jié)論上文已經(jīng)給出，下文詳解原因）

• Photoshop 保存圖片的正確姿勢

• tinypng.com - 讓文件再小一點

• 附加內(nèi)容1：元數(shù)據(jù)

• 附加內(nèi)容2：色彩空間

基本上，我可以自信地說——關(guān)于前端攻城獅和設(shè)計獅如何使用 JPG、GIF、PNG，看本文就夠了。

從早期的 BMP 格式講起

BMP 格式圖片，取自英文單詞 Bitmap，Windows 中文版譯作“位圖”（不知道微軟什么人的爛翻譯），是早期 Windows 系統(tǒng)（XP以及更早期）所用的圖片格式。

BMP 的文件結(jié)構(gòu)很簡單，沒有壓縮，一個一個像素地記錄起來。

BMP 的分類

Windows 自帶的經(jīng)典應(yīng)用《畫圖》支持以下4種 BMP 格式：

《畫圖》所支持的4種 BMP 格式

• 單色位圖（1位）——1字節(jié)記錄8個像素，圖片一般只有黑和白。

• 16色位圖（4位）——1字節(jié)記錄2個像素，圖片有16種顏色。

• 256色位圖（8位）——1字節(jié)記錄1個像素，256種顏色。

• 24位位圖——3個字節(jié)記錄1個像素，紅、綠、藍三原色各占一個字節(jié)，總共大約1670萬色，即真彩色。

給小白補一波計算機基礎(chǔ)知識：計算機數(shù)據(jù)是用二進制數(shù)字來存儲的，1個字節(jié)就是一個8位的二進制數(shù)字，1024字節(jié)就是1KB，1024KB就是1MB，1024MB就是1GB。
4位二進制數(shù)字，換成十進制可表示從0到15，共16個數(shù)，所以16色位圖每個像素占用4位，即半個字節(jié)。
8位二進制數(shù)字，換成十進制就是從0到255，所以256色位圖每個像素占一個字節(jié)。

那么問題來了……

16色、256色位圖都有哪些顏色？

16色、256色圖片文件除了存儲每個像素之外，還會存儲一份顏色表（Palette，亦譯作調(diào)色板、色盤），從真彩色的1670萬種色彩里任意挑選16、256種顏色，構(gòu)成一個索引。顏色表大概長這個樣子：

0號色：#000000
1號色：#3385FF
。。。
255號色：#FAFEF2

在 Photoshop 里打開一張256色圖片，然后點擊菜單 圖像 → 模式 → 顏色表，可以看到當前圖片的顏色表：

Photoshop 里查看顏色表

游戲機的顏色表

游戲機的顏色表

把顏色表用得最666的要數(shù)80年代的FC游戲機了。

《超級馬里奧》使用顏色表實現(xiàn)金幣閃亮效果

是不是瞬間明白了顏色表是什么鬼？

顏色表的作用

對于 BMP 圖片來說，若圖片尺寸相等，16 色 BMP 的文件大小當然比 256 色 BMP 要少一半，因為可以用更少的字節(jié)數(shù)（位數(shù)）來存儲一個像素。

而 GIF 和 PNG 圖片更高端，除了支持16色、256色的顏色表之外，還可以支持256色以內(nèi)的任意顏色數(shù)。例如222色、111色、6色7色8色……它們都能支持。

所以……

顏色數(shù)越少，文件體積越小。

顏色數(shù)越少，文件體積越小。

顏色數(shù)越少，文件體積越小。

帶顏色表的 PNG 和不帶顏色表的 PNG

PNG可以大致分為3種：PNG-8、PNG-24、PNG-32。

其中后面那個數(shù)字8、24、32代表位數(shù)，就像上述的BMP分4位（16色）、8位（256色）、24位（真彩色）一樣。

PNG 除了24位外還能有32位，除了紅、綠、藍三原色之外，還有個透明通道，從0-255表示從透明到半透明到不透明。

PNG-8 帶顏色表，而且不像 BMP 只有固定的16色、256色，PNG-8 的顏色數(shù)可以從2種到256種之間任意種，像123種、10種顏色之類的顏色數(shù)，PNG-8 都是支持的。而且通過強大的壓縮算法，PNG-8 可以真正做到顏色數(shù)越少，文件體積越小。

帶顏色表的 GIF

GIF 圖片是帶顏色表的，它最多支持256色，也支持256以內(nèi)任意數(shù)量的顏色表，但是不支持真彩色。

GIF 的特性是幀動畫。

不帶顏色表的 JPG

截圖來源于PS CC2017：文件 → 導出 → 存儲為 Web 所用格式（舊版）

JPG 不支持顏色表，也不支持透明，只有真彩色。

JPG 的特性是有損壓縮。對于網(wǎng)絡(luò)傳輸來說，有損壓縮是個優(yōu)點。它可以削減一些肉眼難以察覺的細節(jié)，讓圖片體積大大減小。有損壓縮特別適用于相機拍攝的照片。

“連續(xù)”格式的 JPG

截圖來源于PS CC2017：文件 → 存儲為... → “JPG”格式 → 保存

常用 Photoshop 的童鞋可能已經(jīng)發(fā)現(xiàn)，另存為JPG的選項對話框（如上圖）中，有個“連續(xù)”選項。這是什么意思呢？

“基線”格式的JPG加載過程：從上往下

“連續(xù)”格式的JPG加載過程：從模糊到清晰

“基線”和“連續(xù)”格式的JPG，主要是在網(wǎng)速比較慢的時候，圖片加載方式不同。如上面兩個動圖所演示。

JPG、GIF、PNG 功能對比

JPG的主要特性是有損壓縮。

GIF的主要特性是幀動畫。

PNG的主要特性是半透明。

（注意GIF不支持半透明，只能完全透明或者不透明。）

如何選擇格式？

照片用 JPG。
動畫用 GIF。
Logo、Icon 等小圖用 PNG-8。
非特殊情況，盡量不要用 PNG-24 和 PNG-32。

這是本文開頭的直接總結(jié)。

下面講原因。

同一張圖，PNG-8 的體積小于 GIF

首先，Logo、圖標等小圖片，整張圖片一般不多于256色，因此當然選擇帶顏色表的圖片格式。而事實證明，對于同一張圖，PNG-8 的體積是小于GIF的。因此，若不是動畫，小圖片請用 PNG-8。

然后，照片、橫幅等大圖，就像在線聽歌一樣。如果在線聽無損音樂，那得很大的帶寬才行。我們在線試聽歌曲，目的就是聽聽這首歌，不會非常注重音質(zhì)（而且我的木耳是聽不出MP3和無損的區(qū)別的）。同樣道理，放在網(wǎng)頁中的大圖，用戶肯定不會太看重畫質(zhì)，能看清楚內(nèi)容就行。因此，照片大圖用有損壓縮的JPG。

根據(jù)經(jīng)驗，JPG的畫質(zhì)一般選擇 60% - 70%。當然如果你要求較高，可以在PS里一邊看預(yù)覽一邊慢慢調(diào)整直到自己滿意。

Photoshop 保存圖片的正確姿勢

① 文件 → 導出 → 導出為...

②選格式 ③元數(shù)據(jù)“無” ④不嵌入顏色配置

PNG：勾選“較小文件（8位）”即可保存為 PNG-8

GIF 無特殊選項

JPG：若你不想慢慢調(diào)整，品質(zhì)直接選擇60%

1. 文件 → 導出 → 導出為...

2. 選擇格式

• PNG：勾選“較小文件（8位）”即可保存為 PNG-8

• JPG：若你不想慢慢調(diào)整，品質(zhì)直接粗暴地選擇60%一般不會錯

3. 元數(shù)據(jù)選“無”

4. 勾選“轉(zhuǎn)換為sRGB”，不要勾選“嵌入顏色配置”

tinypng.com - 讓文件再小一點

tinypng.com - 一個幫助壓縮圖片的網(wǎng)站

tinypng.com 是一個幫助進一步壓縮PNG和JPG圖片的網(wǎng)站，使用方法很簡單，只要打開網(wǎng)站，然后把需要壓縮的圖片從桌面拖入這個網(wǎng)站中間的框里，然后坐等幾秒鐘，就可以下載被壓縮的圖片了。

據(jù)網(wǎng)站的介紹，tinypng 可以有更好的壓縮算法，而且通過智能地減少顏色數(shù)，達到有效的壓縮。

而喜歡命令行的程序猿，也可以試試 pngcrush 工具。

另外，騰訊ISUX團隊也出品了一個類似 tinypng 的在線圖片壓縮工具，稱為智圖。它除了 PNG 和 JPG ，還支持 WebP。

總結(jié)一下

• 16色（4位）、256色（8位）圖片的顏色由顏色表決定。

• 減少顏色數(shù)有助于減少圖片體積。

• 照片用 JPG，動畫用 GIF，圖標用 PNG-8，盡量不用 PNG-24 和 PNG-32。

• PS保存圖片的正確姿勢：文件 → 導出 → 導出為...

• 第三方工具：tinypng.com、pngcrush、騰訊智圖

以上就是本文的全部核心內(nèi)容，但是我還不打算在此結(jié)束本文。

在上文“Photoshop 保存圖片的正確姿勢”中， “導出為”對話框內(nèi)提及了兩個姿勢：元數(shù)據(jù)選“無”、色彩空間中勾選“轉(zhuǎn)換為sRGB”，不要勾選“嵌入顏色配置”。那么，元數(shù)據(jù)和色彩空間到底是什么鬼？為什么要用上述姿勢？下面給兩篇附加內(nèi)容，讓本文真正地做到“看這篇就夠了”（自信臉）。

附加內(nèi)容1：元數(shù)據(jù)

元數(shù)據(jù)是什么鬼？

Photoshop：文件 → 文件簡介...

在 Photoshop 中打開一張照片，然后點擊菜單 文件 → 文件簡介... ，即可看到這張照片的元數(shù)據(jù)。

維基百科對元數(shù)據(jù)的解釋是描述數(shù)據(jù)的數(shù)據(jù)。所以圖片的元數(shù)據(jù)就是描述圖片的數(shù)據(jù)咯。

帶元數(shù)據(jù)的圖片文件會額外地加個幾KB，存儲這張圖片的作者、拍攝日期、標題、版權(quán)、相機等文本信息。它會占用一些空間（例如JPG的元數(shù)據(jù)最大占用64KB），但是網(wǎng)頁里的圖標或背景圖的元數(shù)據(jù)是沒有任何用處的（除非你要聲明圖片版權(quán)）。

因此，元數(shù)據(jù)選擇“無”，把雞肋的元數(shù)據(jù)清除，可以減小圖片體積。

附加內(nèi)容2：色彩空間

sRGB 色彩空間

注明一下版權(quán)：上圖轉(zhuǎn)自維基百科。

上圖中，那大塊彩色的像舌頭的東東，表示人類眼睛所能看到的所有顏色。中間的三角形框框，表示一般顯示器能顯示出來的所有顏色，這個三角形框框內(nèi)的顏色，就是 sRGB 標準。

而世界上并不僅僅有 sRGB 標準，畢竟 sRGB 只框住了全世界顏色不到一半。

各種色彩標準

注明一下版權(quán)：上圖也轉(zhuǎn)自維基百科。

Photoshop 支持多種色彩空間，圖片文件只要嵌入顏色配置文件，即可使用特定的色彩空間。

Photoshop 新建文檔，可以選擇多種色彩空間

如果色彩空間不對，會讓圖片的色調(diào)要么變得過于暗淡，要么變得過于鮮艷。例如，Adobe RGB 標準的 #00FF00 （純綠色）會比 sRGB 標準的同種顏色（#00FF00）看起來要更鮮艷。

Photoshop 導出圖片時，色彩空間中勾選“轉(zhuǎn)換為sRGB”，不要勾選“嵌入顏色配置”，就是為了解決圖片色調(diào)不對的問題。

因為多數(shù)用戶的屏幕只能顯示 sRGB 標準的色彩，所以如果原圖用了更高級的色彩空間，轉(zhuǎn)換成sRGB就不需要額外嵌入顏色配置。畢竟，顏色配置也是占空間的。而且有些瀏覽器還會直接無視顏色配置（不支持色彩空間），直接按sRGB顯示。

如果原圖本來是 sRGB 的，那么勾選“轉(zhuǎn)換為sRGB”將不會有任何作用。不過，若不知道原圖的色彩空間，勾選它總是不會錯的。

值得一提的是，從 iPhone 7 開始，蘋果系列手機的屏幕和相機支持稱為 DCI-P3 的色彩空間，提供了比一般屏幕和相機（也就是 sRGB）更多的色彩。因此，把 iPhone 7 以上機型拍攝的圖片傳入電腦看，其效果很可能大大不如手機屏幕上看。

（完）