圖片壓縮知識梳理(1) PNG 原理

1、概述

對於PNG這種圖像存儲格式，它有兩個特色：無損壓縮和支持透明效果。

• 因爲PNG文件採用LZ77算法的派生算法進行壓縮，其結果是得到高的壓縮比，不損失數據。它利用特殊的編碼方法標記重複出現的數據，於是對圖像的顏色沒有影響，也不可能產生顏色的損失，這樣就能夠重複保存而不下降圖像質量。
• PNG能夠爲原圖像定義256個透明層次，使得彩色圖像的邊緣能與任何背景平滑地融合，從而完全地消除鋸齒邊緣。這種功能是GIF和JPEG沒有的。

今天，咱們就來介紹一下PNG的相關知識。

2、PNG 原理

2.1 PNG 文件結構

PNG由一個8字節的PNG文件署名域和按照特定結構組織的3個以上的數據塊組成，其中數據塊分紅兩種，關鍵數據塊和可選數據塊，關鍵數塊爲以下四種：

• 文件頭數據塊
• 調色板數據塊
• 圖像數據塊
• 圖像結束數據塊

而每一個數據塊由如下四個數據域組成：

• 長度
• 數據塊類型碼
• 數據塊數據
• 循環冗餘校驗

從上面的構成中，咱們能夠看到，對於用戶可見的部分，真正和展示有關就是圖像數據塊中的數據塊區域，所以，咱們就須要注意有沒有在別的數據塊中引入了沒必要要的數據，例以下面的右圖，在從Photoshop中導出的時候，選擇了export to web，所以它的大小就比左圖要小不少。

2.2 PNG 格式

PNG的格式有8/24/32三種，稱爲PNG 8/ PNG 24 / PNG 32，其中後面的數字表示最多能夠索引和存儲的顏色值。

• PNG 8支持兩種不一樣的透明形式，索引透明和Alpha透明
• PNG 24不支持透明
• PNG 32在24位基礎上增長了8位透明通道，所以可展示256級透明程度

咱們應當根據圖片來選擇正確的格式，在能表示圖片中顏色的前提下，儘可能選擇位數較少的PNG格式。

2.3 PNG壓縮原理

PNG壓縮過程分爲兩個階段：Prediction 和 Compression。

2.3.1 Prediction

在這一階段，咱們每次會處理圖片中一行的數據，首先經過Filter階段處理這一行當中每個的像素點中每條通道的值，也就是咱們常說的ARBG。它交由差分處理器來從新計算該通道的值。差分處理會根據這個像素點上通道和以前或者之上像素點對應通道值之間的差別，進行差分編碼，也就是說，若是本來相鄰像素點之間通道的值之間很接近，那麼咱們就會得到不少的1,0,-1這種很小的值。這裏有兩點須要注意：

• 整個Prediction階段的目的，也就是選擇合適的差分處理器，讓最終的編碼結果出現儘量多的零值和重複值，這一結果將會影響到Compression階段的壓縮率。
• 差分編碼器比較的是像素點之間對應通道的值，而並非整個像素點。

2.3.2 Compression

在Prediction處理完畢以後，再將這一轉換的結果輸出給Deflate，Deflate執行真正的壓縮操做，它會經過LZ77和Huffman對圖像進行編碼，最後將處理以後的結果保存。在Compression階段，它最終的壓縮率會受到兩方面的影響：

• Prediction 的處理結果：對於顏色相近的區域，也就是有不少零值的區域，那麼壓縮率將會更高，而若是顏色之間差別很大，那麼壓縮效果將不盡人意。
• Deflate 每一行的匹配狀況：前面咱們分析過，整個處理過程是按行來處理的。而在處理每一行的數據時，Deflate把處理的符號數限制爲3 ~ 258，也就是說，最大的壓縮率爲1032:1，當出現符號數小於3個時，那麼就有可能出現沒法匹配的狀況，所以，對於圖片寬度的改變將有可能影響最終壓縮的效果。

下面，咱們對於上面描述的第二點舉一個例子，對於下面兩幅圖，右圖雖然之比左圖寬了兩個像素，可是它的大小整整大了一倍：

咱們經過下面這個工具能夠觀察每一個像素點的壓縮率：

• Pngthermal

在分析的結果中，深藍色表示該像素點具備較高的壓縮率，而黃色/紅色則表示壓縮率較低，能夠發現正是因爲改變了圖片的大小，致使某些像素點沒有匹配到，從而產生了一個較大的文件。

2.3.3 代碼表示

對於 Prediction 和 Compression 這兩個過程，能夠經過下面這個代碼來理解：

• gist.github.com/anonymous/9…

3、總結

PNG有不少優勢，而且應用普遍，可是仍是須要根據具體的場景來選用：

• 若是原始的圖片爲高清的，可是不要求進行無損的壓縮，那麼能夠選擇相似於JPG這樣的有損壓縮
• 可是從反方面來講，若是原始圖片較爲簡單，而且須要支持透明形式，那麼PNG要因爲JPG。

這一篇文章，介紹了PNG相關的一些知識，目的仍是讓你們對這種圖片格式有一個大概的理解，這也是咱們後面分析優化的基礎。

4、參考文獻

1.How PNG Works 2.PNG - 百度百科