圖像優化原理

原文地址：github.com/berwin/Blog…

咱們都喜歡有圖片的網頁，圖片很美好，頗有趣，同時它涵蓋了豐富的信息。因此，在加載網頁時，大部分流量被圖像資源所佔據（平均60%，數據可能不許確）。

圖像資源不僅佔用網絡資源，它也會佔用網頁中大量的視覺空間。因此圖像渲染的速度會直接影響用戶體驗。圖像優化其實就是最大限度地減小圖像的字節數，從而最大化地縮減網絡資源佔用，使瀏覽器下載速度變的更快。下載速度越快，在屏幕上渲染的時間就越早，因此視覺上就會有一個更好的體驗。

固然，優化圖像最佳的方式就是不用圖像，例如使用CSS效果（漸變，陰影，圓角等）代替圖像。使用CSS比同等視覺效果的圖像資源的字節數要小很是多，這是毋庸置疑的。另外一個好處是CSS不受分辨率影響，使用CSS渲染出的視覺效果能夠在任何分辨率和縮放級別下始終清晰地顯示。

但必須使用圖像資源時，對圖像進行合理的優化將對性能有着相當重要的影響。

本文不會介紹如何進行圖像優化，有大量在線工具和開源項目供咱們使用，使用起來很是的簡單。本文將重點介紹圖像優化的原理。

首先，本文會介紹兩種圖像資源：矢量圖與柵格圖（位圖），並分別介紹優化它們的原理。隨後介紹無損壓縮與有損壓縮以及它們的區別。在本文的最後，咱們會介紹什麼是高分辨率屏幕。

但願經過本篇文章的介紹，可讓您對圖像優化的原理有一個直觀的感覺。

1. 矢量圖與柵格圖（位圖）

矢量圖與柵格圖（位圖）是兩種不一樣的圖像格式。

圖1-1 矢量圖與柵格圖

• 矢量圖形是計算機圖形學中用點、直線或者多邊形等基於數學方程的幾何圖元表示圖像。
• 柵格圖（英語：Raster graphics），又稱位圖（Bitmap）或點陣圖，是使用像素陣列(Pixel-array/Dot-matrix點陣)來表示的圖像。

以矢量圖爲例，程序繪製一個半徑爲r的圓所需的主要信息是：

1. 半徑r
2. 圓心座標
3. 輪廓樣式與顏色（多是透明）
4. 填充樣式與顏色（多是透明）

矢量圖的內容是這些繪製相關的關鍵信息，一樣的圖像若是是柵格圖（位圖），則圖像是由稱做像素的單個點組成的。

柵格圖的每一個像素都分配有特定的位置和顏色值。每一個像素的顏色信息由RGB組合或者灰度值表示。

根據位深度，可將柵格圖分爲一、四、八、1六、24及32位圖像等。每一個像素使用的信息位數越多，可用的顏色就越多，顏色表現就越逼真。固然，相應的數據量就越大，圖像所佔字節數也就越大。

那什麼是位深度呢？位深度也叫作色彩深度或者色彩位數，即柵格圖中要用多少個二進制位來表示每一個點的顏色，色彩深度越高，每一個像素點可用的顏色就越多。色彩深度是用「n位顏色」（n-bit colour）來講明的。若色彩深度是n位，即有2^n種顏色選擇，而儲存每像素所用的位數就是n。例如，位深度爲 1 的像素柵格圖只有兩個可能的值（黑色和白色），因此又稱爲二值柵格圖。位深度爲 8 的圖像有 2^8（即 256）個可能的值。

因此矢量圖對比柵格圖的優勢主要在如下幾點：

• 保存最少的信息，文件字節數比柵格圖小，且文件大小與物體的大小無關
• 任意放大矢量圖形，不會丟失細節或影響清晰度，由於矢量圖形是與分辨率無關的
• 在放大的時候，直線與曲線都不會成比例地變粗，它只會保持不變或者要小於縮放比例
• 保存的物體參數能夠在後面修改。也就是說物體的運動、縮放、旋轉、填充等都不會下降繪製的精度。

但每一種格式都有優缺點，矢量圖適用於簡單的幾何圖像，若是是場景複雜的照片，矢量格式就不能知足要求了，由於描述全部形狀所需的 SVG 標記量可能高得離譜。即使如此，輸出效果可能仍然沒法達到「照片級真實感」，因此這種狀況使用柵格圖顯然更合適。

由於柵格圖是由不少個像素點組成的，因此當咱們放大柵格圖時，咱們會看到圖形會出現鋸齒而且模糊不清（由於像素點被放大了），因此咱們在使用柵格圖時，須要根據不一樣的屏幕分辨率來保存多個版本的柵格圖圖像，這樣能夠提供最佳的用戶體驗。

如今咱們已經瞭解了什麼是矢量圖與柵格圖，接下來咱們將介紹如何優化它們。

2. 優化矢量圖

SVG你們應該都不陌生，它是一種可縮放矢量圖形。前不久我在寫 《嗨，送你一張Web性能優化地圖》 這篇文章時，@安佳 姐姐幫我畫了一張SVG圖。

圖2-1 SVG示例圖

圖2-1您能夠經過點擊連接在瀏覽器打開它，而後查看網頁源代碼，在源碼中能夠看到它涵蓋了大量的元數據，例如圖層信息、註解和 XML 命名空間等，而瀏覽器渲染時一般不須要這些數據。

咱們能夠經過svgo之類的工具將 SVG 文件縮小。

上面這張圖片，我使用svgo優化完以後，文件大小縮減了69.3%！原圖16.315 KiB優化後文件大小5.009 KiB。您能夠點擊連接在瀏覽器打開優化後的SVG矢量圖，並查看網頁源代碼，對比它們之間的區別，您能夠看到源代碼明顯少了不少，但並不影響瀏覽器正常渲染。

圖2-2 SVG矢量圖源碼優化先後對比

3. 優化柵格圖

經過第一小節的介紹，咱們大體能夠想象出，其實柵格圖是二維「像素」柵格。例如一個10*10像素的圖像是 100 個像素序列，而每一個像素中又存儲了RGBA值（R紅色通道、G綠色通道、B藍色通道、A alpha透明度通道）。

在內部，瀏覽器會爲每一個通道分配 256 個值（色階），就是說每一個通道 8 位（由於2^8=256），那麼一個像素有四個通道（RGBA），因此每一個像素一共 32 位（4 個通道 * 8 位 = 32 位），32 位 = 4 字節，也就是說每一個像素 4 佔個字節。因此，只要咱們知道柵格圖尺寸，咱們就能夠輕易地計算出圖像文件的大小。

尺寸	像素	文件大小
100 * 100	10,000	39 KB
200 * 200	40,000	156 KB
300 * 300	90,000	351 KB
500 * 500	250,000	977 KB
800 * 800	640,000	2500 KB

從上表能夠看到，隨着圖片尺寸的變大，文件大小會以驚人的速度暴增。

再基於此特徵的前提下，咱們應該怎樣改善柵格圖的文件大小以得到更快的加載速度呢？

在第一小節中，咱們簡單介紹了」色彩深度「，因此一個簡單的策略是咱們能夠經過調整圖像的色彩深度來下降圖像文件的大小。每一個通道 8 位爲每一個通道提供 256 個值，RGB三個通道一共能夠爲每一個像素提供 16777216 種顏色（256^3=16777216）。若是咱們將色彩深度調整爲 RGB 通道一共只須要 8 位，那麼加上 Alpha 透明度通道的 8 位，一共爲 16 位，也就是說每一個像素兩個字節（16位 = 2個字節），與原來每一個像素 4 個字節相比，節約了 50% 的字節！

可是你必定會有疑問，顏色值少了那麼多，圖像的質量會不會變得不好？咱們能夠用一張圖來對比一下。

圖3-1 不一樣色彩深度的圖片進行對比

這張圖是上個月（2018-10）我去參加W3C TPAC會議時在法國讓彭星小哥哥幫我拍攝的。這張圖包含漸變色過渡的複雜場景（天空），能夠看到，調整了色彩深度後，從肉眼上看到的視覺差別並不明顯。

在優化了各個像素中存儲的數據以後，咱們還能夠更進一步。事實上，許多圖像的相鄰像素都具備類似的顏色，壓縮程序能夠利用這個特徵採用「增量編碼」的方式對圖像進行壓縮。在這種編碼方式下，並不爲每一個像素單獨存儲值，而是存儲相鄰像素之間的差別，若是相鄰像素相同，則增量爲「零」，只需存儲一位便可。經過存儲數據之間的差別，而不是存儲數據自己，這樣的方式能夠大幅減小數據的重複，從而下降文件大小。

固然，圖像壓縮領域的解決方案還遠不止這些，由於圖像佔據了網絡世界中大量的字節，因此好的圖像壓縮方法具備極大的價值，這一領域學術性很強，咱們也沒有能力去發明新的算法，但瞭解這一領域的基本概念仍是能夠的，例如本文介紹的 RGBA 像素、色彩深度和各類優化方法。

4. 無損壓縮與有損壓縮

無損數據壓縮（Lossless Compression）指數據通過壓縮後，信息不受損失，還能徹底恢復到壓縮前的原樣。

那麼無損壓縮是如何作到保存完整的原始信息的同時下降文件大小的呢？

舉個例子：一張圖是由100個紅點構成，那麼正常狀況下它會以相似「紅點、紅點、...（重複97次）...、紅點」的格式來存儲它（柵格圖的存儲格式咱們在本文的第三小節中介紹過）。爲了下降文件大小，咱們能夠改爲用「100個紅點」這樣的格式來存儲這張圖片，這樣就能夠在不失去任何信息的狀況下完成壓縮，這就是無損壓縮。

但若是想保存文件的全部信息，那麼不管使用任何壓縮方法，文件大小都沒法低於一個下界。舉個例子：壓縮後獲得的zip文件會比源文件更小，但一直重複壓縮同一個文件並不會讓文件大小變成0，由於源文件終究含有必定的數據量。

這個時候，使用有損壓縮能夠突破這個限制。

由於人的肉眼很難觀察到一張高分辨率圖像裏面的一些細節，因此捨棄這些人類沒法察覺的細節，就能夠用更小的數據量提供與原始數據相差無幾的感官體驗（固然也能夠更進一步，例如：經過失去一部分能夠察覺的細節，來達到更好的壓縮率），這就是有損壓縮。有損數據壓縮又稱破壞性資料壓縮、不可逆壓縮。有損數據壓縮是將次要的信息數據捨棄，犧牲一些質量來減小數據量，提升壓縮比。

有損壓縮的一個優勢是在有些狀況下，它可以得到比任何已知無損壓縮小得多的文件大小，同時又能知足系統的須要。

總結

本文重點介紹了什麼是矢量圖與柵格圖（位圖），以及各類圖片優化工具是如何優化它們的。

最後，咱們還討論了什麼是有損壓縮與無損壓縮，以及它們之間的區別。