##一.圖像術語
###圖形和照片
- 圖形
網站的 logo、草圖、圖表、大部分動畫和圖示都屬於圖形。這些圖像通常由連續的線條或其他尖銳的顏色過渡組成，顏色數量相對較少
- 照片
照片通常有百萬數量級的顏色，並且包含平滑的顏色過渡和漸變，想象一下用相機拍攝的日落時的照片。繪畫作品的圖像（比如蒙娜麗莎的微笑）更接近於照片，而不是圖形
就圖像格式而言，GIF 通常用來顯示圖形，而 JPEG 更適合顯示照片。PNG 兩者都適合，甚至用調色盤 PNG（palette PNG）顯示圖形比 GIF 會更好一些
###像素和 RGB
圖像由像素組成，像素是圖像中最小的資訊單元。我們可以使用不同的顏色模型來描述像素，在電腦圖像處理上，RGB 顏色模型是最常用的一種
在 RGB 顏色模型中，採用包含紅（R）、綠（G）和藍（B）的數量多少的方式來描述一個像素。R、G 和 B 被稱為成分（又稱為通道），每種成分的強度值範圍在 0-255 之間。我們經常在 HTML 和 CSS 中使用的是十六進位的成分值，範圍從 00~FF。將不同強度的成分組合在一起，就可以獲得不同的顏色。比如：
-
紅色是
rgb(255, 0, 0)或十六進位的#FF0000 -
藍色是
rgb(0, 0, 255)或十六進位的#0000FF -
灰色陰影很可能有著三個相同的成分值，比如，
rgb(238, 238, 238)或十六進位的#EEEEEE
###真彩色圖像和調色盤圖像格式
使用 RGB 顏色模型到底可以展現多少種不同的顏色呢？答案是 1600 萬種：256*256*256（或者 2 的 24 次方）可以得到 16777216 種組合。可以支援這麼多顏色的圖像格式叫做真彩色圖像格式，比如 JPEG 和真彩色類型的 PNG
為了在存儲圖像資訊時節省一些空間，有一項技術是將圖像中各種不同的顏色提取出來建立一個表，這個表通常叫做調色盤（也可以稱為索引）。有了這個顏色表，就可以透過將調色盤中的條目和每個像素重新匹配，達到重新繪製整個圖像的目的
調色盤可以包含任意 RGB 顏色值，但是最經常使用的調色盤圖像格式——GIF 和 PNG8 都會限制調色盤中最多只能包含 256 種顏色。這不是說你只可以從 256 種已經定義好的顏色中選擇，恰恰相反，你可以從 1600+ 萬的顏色中選擇你需要的值，但是單個圖像中最多只能包含 256 種顏色
###透明和 alpha 通道（RGBA）
RGBA 並非另一種截然不同的顏色模型，而是在 RGB 基礎上做了擴充，額外的成分 A 代表 alpha 透明，值的範圍也是從 0~255，但實際上不同的程式和庫會將透明定義為從 0%~100% 的百分比，或者從 0-127 的值。alpha 通道描述了透過圖像像素可以看到下面內容的程度
假設已經做出了一個網頁，設置了背景，並在上面放置了一個藍色的圖像。如果圖像上某個像素的透明度設置為 0，那麼該像素下面的背景就不可見。如果 alpha 透明度設置為最大值 100%，那麼圖像上的像素將會隱藏，而背景則會「浮現出來」。假如設置為中間值，比如 50%，就可以同時看到背景和圖像上的像素
###交錯掃描
當網速很慢時，大圖像會隨著下載的進度逐行顯示，從上到下每顯示一行，緩慢地向下遞進，為了提高使用者體驗，部分圖像格式支援對那些連續採樣的圖像進行交錯掃描。交錯掃描可以讓使用者在完整下載圖像之前，看到圖像的一個粗略版本，從心理上消除頁面被延遲載入的感覺
##二.不同圖像格式的特性
GIF、JPEG 和 PNG 這 3 種格式的區別：
###GIF
圖形交換格式（Graphics Interchange Format）的縮寫，是一種調色盤圖像格式，有以下特性：
- 透明
GIF 允許一個二進位（是/否）類型的透明度，每個像素要麼是完全透明的（不包含顏色），要麼是完全不透明的（包含一個單色）。這就意味著它不支援 alpha（可變的）透明，取而代之的是，調色盤中的某個顏色可以被標記為表示透明，而透明像素則會被分配為這個顏色值。所以，如果你為 GIF 設置了透明像素，那麼就會「消耗」一個調色盤項目
- 動畫
GIF 格式支援動畫，包含動畫的圖像由若干幀組成，就像幾個圖像同時包含在一個文件中一樣，大家普遍認為 GIF 動畫很煩人，這是因為在網路發展初期它被濫用了，那時候大家用 GIF 來製作閃爍文字、旋轉的 @ 標誌等等。GIF 動畫現在是有一些應用，比如廣告條（雖然現在這已經主要是 Flash 的天下了），還有在富網際網路（RIAs）應用中出現的「載入中」指示符
- 無損
GIF 是無損的，也就是說你可以打開任意一個 GIF 文件，做一些修改，保存關閉時不會損失任何品質
- 逐行掃描
當生成 GIF 文件時，會使用一個壓縮演算法（叫做 LZW）來減小文件的大小。當壓縮 GIF 時，會從上到下一行一行的對像素進行掃描，這種情況下，當圖像在水平方向有很多重複顏色時，可以獲得更好的壓縮效果。比如，有一個 500*10 像素的圖像（寬 500px 高 10px），圖像上包含一些條紋，就是說水平方向是由相同顏色線條組成的，將這個圖像旋轉 90 度後（寬 10px 高 500px），其垂直方向是由相同顏色的條紋組成的，此時後者的文件要大於前者
- 交錯掃描
GIF 支援可選的交錯掃描
由於 GIF 有 256 色的限制，所以不適合用來顯示照片，照片所需的顏色數量遠大於這個數量級。GIF 更適合用來顯示圖形（圖示、logo 和圖表），但 PNG8 是用來顯示圖形的最佳格式，所以，只有在需要動畫時才應該用 GIF
GIF 格式中使用的 LZW 無損數據壓縮演算法，在以前是受專利保護的，但是這個專利在 2004 年過了保護期，現在已經可以自由使用 GIF 了
###JPEG
JPEG 的意思是聯合圖像專家小組（Joint Photographic Experts Group），也就是開發了這個標準的組織名稱，JPEG 是照片存儲的實際標準。考慮到人類眼睛對顏色和光線強弱的感知，這種格式透過各種技術來減少顯示圖片所必需的資訊，所以它能在經過高度壓縮的文件中存儲高解析度的圖像，有以下特性；
- 有損
JPEG 是一種有損的格式，使用者可以設置自定義品質級別，這個級別決定了有多少圖像資訊會被丟棄。品質級別的值從 0 到 100，但是就算設置為 100，也同樣會有一定程度的品質損耗
當要對某個圖像進行多項編輯操作時，最好使用無損圖像格式來保存中間結果，然後在完成所有的修改後另存為 JPEG 格式，否則將會在每次保存時都損耗一些品質
但也有少數操作是無損的，比如：
- 旋轉（只有在旋轉 90 度、180 度和 270 度的情況下）
- 裁剪
- 翻轉（水平或者垂直）
- 從標準模式切換到漸進模式，反之亦然
- 編輯圖像的元數據
- 透明和動畫
JPEG 不支援透明或動畫
- 交錯掃描
除了默認的標準 JPEG（Baseline JPEG），還有一種漸進 JPEG（Progressive JPEG），支援交錯掃描。Internet Explorer 不會逐步地渲染漸進 JPEG 圖像，而是在圖像完全下載時立即全部顯示出來
JPEG 是 web 上用來存儲照片的最佳格式，也被廣泛應用在數碼相機中，然而，這種格式不適合用來存儲圖形，因為有損的壓縮方法將線條和清晰的顏色過渡都變成了「大色塊」
###PNG
為了彌補 GIF 格式的缺點並規避 LZW 演算法的專利問題，PNG（Portable Network Graphics，可攜式網路圖片）應運而生。實際上，人們常開玩笑說 PNG 代表「PNG is Not Gif」的遞迴縮寫，有以下特性：
- 真彩色和調色盤 PNG 格式
PNG 格式有幾種子類型，但它們大致可以分為兩種：調色盤 PNG 格式和真彩色 PNG 格式。可以使用調色盤 PNG 格式來代替 GIF 格式，使用真彩色 PNG 格式來代替 JPEG 格式
- 透明
PNG 支援完全的 alpha 透明，在 Internet Explorer 6 中使用這種特性會出現問題（透明區域變成粉藍色，鋸齒等等，更多相關問題請查看 IE6 下 png 背景不透明問題的綜合拓展）
- 動畫
雖然已經有相關實驗和實際應用存在，但截至目前，針對動畫 PNG 格式，還沒有跨瀏覽器的解決方案
- 無損
與 JPEG 不同的是，PNG 是一種無損的圖像格式：多次編輯不會降低其品質。這使得用真彩色 PNG 來保存 JPEG 的修改過程的中間產物非常合適
- 逐行掃描
和 GIF 格式一樣，相對於那些垂直方向有重複顏色的圖像來說，PNG 格式對那些水平方向有重複顏色的圖像壓縮比更高
- 交錯掃描
PNG 支援交錯掃描，並使用了比 GIF 更好的演算法，它允許對真實圖像進行更好的「預覽」，但是支援交錯掃描的 PNG 圖像在文件大小上會更大一些
##三.PNG
###PNG 的分類
PNG 分為 PNG8、PNG24 和 PNG32：
- PNG8
調色盤 PNG
- PNG24
真彩色 PNG，但不包括 alpha 通道
- PNG32
真彩色 PNG，包括 alpha 通道
###PNG 和 GIF
除了不支援動畫以外，調色盤 PNG 擁有 GIF 的所有功能。此外，它還支援 alpha 透明，並且通常壓縮比更高，文件大小更小，所以，應該儘可能使用 PNG8 來代替 GIF
有一個例外是顏色數很少的小圖像，這時 GIF 的壓縮率可能會更高一些，但是這種小圖像其實應該被放在 CSS Sprite 中，因為 HTTP 請求的開銷已經大大超過節省的那點頻寬，而且用 PNG 格式保存 Sprite 圖像可以獲得更高的壓縮率
###PNG 和 JPEG
當圖像中的顏色數超過 256 種時，需要使用真彩色圖像格式——真彩色 PNG 或者 JPEG。JPEG 的壓縮比更高，而且一般來說，JPEG 也是照片存儲的實際標準。但由於 JPEG 是有損的，而且在清晰的顏色過渡周圍會有大色塊，因此以下情況使用 PNG 更合適：
-
當圖像的顏色略超過 256 種時，可以在不損耗任何可見品質的前提下，將圖像轉換為 PNG8 格式。令人驚奇的是，有時候就算你剝離了 1000 種以上的顏色，都不會注意到圖像中所發生的變化
-
當大色塊變得不可接受時，比如說包含很多顏色的圖像或軟體選單的截圖，這時候 PNG 就是更好的選擇
##四.優化 CSS Sprite
有一些優化原則，能夠讓 Sprite 變得更小：
- 按照顏色合併
比如將顏色調色盤相近的圖示組合在一起
- 避免不必要的空白
讓圖像在行動裝置上更容易處理
- 將元素水平排列
而不是垂直的，這樣 Sprite 會稍微變小
- 將顏色限制在 256 種以內
這是 PNG8 格式的顏色數量上限
- 先優化單獨的圖像，再優化 Sprite
在調色盤色值有限的情況下，可以更容易減少顏色數
- 透過控制大小和對齊減少反鋸齒像素的數量
如果一個圖示稍微接近正方形，通常可以透過在水平方向或垂直方向對齊來減少反鋸齒像素的數量
- 避免使用對角線漸變
這種漸變無法被平鋪
- 避免在 IE6 中使用 alpha 透明圖像
將需要真彩色 alpha 透明的圖像保存在單獨的 Sprite 中
- 每 2~3 個像素改變漸變的顏色
而不是每個像素都改變
- 處理 logo 時候要小心
logo 很容易識別，就算非常小的修改也會很容易被注意到
##五.總結
按照上面的解釋，一般情況下 PNG 似乎是最好的選擇，動畫用 GIF，高解析度圖片用 JPEG
其實 WebP 格式也已經出現很久（2010 年）了，目前相容性還不是特別好，但有相應的解決方案，更多資訊請查看 WebP 探尋之路
###參考資料
- 《高效能網站建設進階指南》
暫無評論，快來發表你的看法吧