PNG圖片壓縮原理解析

背景

今天凌晨一點，忽然有我的加個人qq，一看居然是十年前被我刪掉的初戀。。。。

由於以前在qq空間有太多的互動，因此qq推薦好友裏面常常推薦我倆互相認識。。。。謎之尷尬

贊成好友申請之後，仔細看了她這十年間全部的qq動態和照片。 她變美了，會打扮了，之前瘦瘦的身材配上如今的裝扮和妝容，已是超越我認知的女神了。

而我依然碌碌無爲，逐漸臃腫的身體加上日益上揚的髮際線，天天爲生活操勞和奔波，還窮。

用一句話形容如今的感覺就是： 「妳已經登上更高的巔峯 而我只能望着妳遠去的背影」。

默默點了根菸，把她長得好看的照片都保存了下來。 咦？發現每一張照片都是.png的圖片格式。 png？？png的圖片咱們天天都在用，但是png究竟是什麼，它的壓縮原理是什麼？ 很好，接下來我將會給你們一一闡述。

什麼是PNG

PNG的全稱叫便攜式網絡圖型（Portable Network Graphics）是目前最流行的網絡傳輸和展現的圖片格式，緣由有以下幾點：

• 無損壓縮：PNG圖片採起了基於LZ77派生算法對文件進行壓縮，使得它壓縮比率更高，生成的文件體積更小，而且不損失數據。

• 體積小：它利用特殊的編碼方法標記重複出現的數據，使得一樣格式的圖片，PNG圖片文件的體積更小。網絡通信中因受帶寬制約，在保證圖片清晰、逼真的前提下，優先選擇PNG格式的圖片。

• 支持透明效果：PNG支持對原圖像定義256個透明層次，使得圖像的邊緣能與任何背景平滑融合，這種功能是GIF和JPEG沒有的。

PNG類型

PNG圖片主要有三個類型，分別爲 PNG 8/ PNG 24 / PNG 32。

• PNG 8：PNG 8中的8，其實指的是8bits，至關於用2^8（2的8次方）大小來存儲一張圖片的顏色種類，2^8等於256，也就是說PNG 8能存儲256種顏色，一張圖片若是顏色種類不多，將它設置成PNG 8得圖片類型是很是適合的。

• PNG 24：PNG 24中的24，至關於3乘以8 等於 24，就是用三個8bits分別去表示 R（紅）、G（綠）、B（藍）。R(0~255),G(0~255),B(0~255)，能夠表達256乘以256乘以256=16777216種顏色的圖片，這樣PNG 24就能比PNG 8表示色彩更豐富的圖片。可是所佔用的空間相對就更大了。

• PNG 32：PNG 32中的32，至關於PNG 24 加上 8bits的透明顏色通道，就至關於R（紅）、G（綠）、B（藍）、A（透明）。R(0~255),G(0~255),B(0~255),A(0~255)。比PNG 24多了一個A（透明），也就是說PNG 32能表示跟PNG 24同樣多的色彩，而且還支持256種透明的顏色，能表示更加豐富的圖片顏色類型。

怎麼說呢，總的來講，PNG 8/ PNG 24 / PNG 32就至關於咱們屌絲心中，把女神分爲三類：

• 一類女神 = PNG 8：屌絲舔狗們見到第一類女神，頓時會以爲心情愉悅、笑逐顏開，屌絲髮黑的印堂逐漸舒展，確認過眼神，是心動的感受。

• 二類女神 = PNG 24：第二類女神開始厲害了，會給屌絲們一種菊花一緊、振聾發聵的心絃震撼，接觸多了第二類女神能讓屌絲天天精神抖擻，延年益壽。

• 三類女神 = PNG 32：在第三類女神面前，全部的語言都顯得蒼白無力。那是一種看了讓屌絲上下通透、手眼通天的至尊級存在。超凡脫俗、天神下凡都不足以描摹她美色的二分之一。我曾經只有在夢裏才見到過。

哎。。。個人初戀，看着她如今的照片，應該是觸及PNG 24這一等級了。

PNG圖片數據結構

PNG圖片的數據結構其實跟http請求的結構很像，都是一個數據頭，後面跟着不少的數據塊，以下圖所示：

若是你用vim的查看編碼模式打開一張png圖片，會是下面這個樣子：

握草，第一眼看到這一坨坨十六進制編碼是否是感受和女神的心思同樣晦澀難懂？

老弟 莫慌，講實話，若是撩妹紙有那一坨坨亂碼那麼簡單，哥哥我早就妻妾成羣啦。 接下來我就一一講解這一堆十六進制編碼的含義。

8950 4e47 0d0a 1a0a：這個是PNG圖片的頭，全部的PNG圖片的頭都是這一串編碼，圖片軟件經過這串編碼斷定這個文件是否是PNG格式的圖片。

0000 000d：是iHDR數據塊的長度，爲13。

4948 4452：是數據塊的type,爲IHDR，以後緊跟着是data。

0000 02bc：是圖片的寬度。

0000 03a5：是高度。

以此類推，每一段十六進制編碼就表明着一個特定的含義。下面其餘的就不一一分析了，太多了，小夥伴們本身去查吧。

什麼樣的PNG圖片更適合壓縮

常規的png圖片，顏色越單一，顏色值越少，壓縮率就越大，好比下面這張圖：

它僅僅由紅色和綠色構成，若是用0表明紅色，用1表明綠色，那用數字表示這張圖就是下面這個樣子：

00000000000000000

00000000000000000

00000000000000000

1111111111111111111111111

1111111111111111111111111

1111111111111111111111111

咱們能夠看到，這張圖片是用了大量重複的數字，咱們能夠將重複的數字去掉，直接用數組形式的[0, 1]就能夠直接表示出這張圖片了，僅僅用兩個數字，就能表示出一張很大的圖片，這樣就極大的壓縮了一張png圖片。

因此！顏色越單一，顏色值越少，顏色差別越小的png圖片，壓縮率就越大，體積就越小。

PNG的壓縮

PNG圖片的壓縮，分兩個階段：

• 預解析（Prediction）：這個階段就是對png圖片進行一個預處理，處理後讓它更方便後續的壓縮。說白了，就是一個女神，在化妝前，會先打底，先塗乳液和精華，方便後續上妝、美白、眼影、打光等等。

• 壓縮（Compression）：執行Deflate壓縮，該算法結合了 LZ77 算法和 Huffman 算法對圖片進行編碼。

預解析（Prediction）

png圖片用差分編碼（Delta encoding）對圖片進行預處理，處理每個的像素點中每條通道的值，差分編碼主要有幾種：

• 不過濾
• X-A
• X-B
• X-(A+B)/2(又稱平均值)
• Paeth推斷（這種比較複雜）

假設，一張png圖片以下:

這張圖片是一個紅色逐漸加強的漸變色圖，它的紅色從左到右逐漸增強，映射成數組的值爲[1,2,3,4,5,6,7,8]，使用X-A的差分編碼的話，那就是:

[2-1=1, 3-2=1, 4-3=1, 5-4=1, 6-5=1, 7-6=1, 8-7=1]

獲得的結果爲

[1,1,1,1,1,1,1]

最後的[1,1,1,1,1,1,1]這個結果出現了大量的重複數字，這樣就很是適合進行壓縮。

這就是爲何漸變色圖片、顏色值變化不大而且顏色單一的圖片更容易壓縮的原理。

差分編碼的目的，就是儘量的將png圖片數據值轉換成一組重複的、低的值，這樣的值更容易被壓縮。

最後還要注意的是，差分編碼處理的是每個的像素點中每條顏色通道的值，R（紅）、G（綠）、B（藍）、A（透明）四個顏色通道的值分別進行處理。

壓縮（Compression）

壓縮階段會將預處理階段獲得的結果進行Deflate壓縮，它由 Huffman 編碼 和 LZ77壓縮構成。

如前面所說，Deflate壓縮會標記圖片全部的重複數據，並記錄數據特徵和結構，會獲得一個壓縮比最大的png圖片 編碼數據。

Deflate是一種壓縮數據流的算法. 任何須要流式壓縮的地方均可以用。

還有就是咱們前面說過，一個png圖片，是由不少的數據塊構成的，可是數據塊裏面的一些信息實際上是沒有用的，好比用Photoshop保存了一張png圖片，圖片裏就會有一個區塊記錄「這張圖片是由photshop建立的」，不少相似這些信息都是無用的，若是用photoshop的「導出web格式」就能去掉這些無用信息。導出web格式先後對比效果以下圖所示：

能夠看到，導出web格式，去除了不少無用信息後，圖片明顯小了不少。

結語

以上就是我對png的理解了，寫的很差，就像一個支離破碎的中老年，雜亂無章。

想起那年跟初戀分手的緣由 是由於怕影響到學習。。。但是分開後成績也仍是很爛，不只錯過了女神，並且到如今也依然一事無成。

現在中年已至，身上揹負着巨大的房貸，家裏還有嗷嗷待哺的孩子，看着身旁呼嚕聲轟天熟睡中的妻子，忽然也就想開了。

就像魯迅說的：

「愛情就像在海灘上撿貝殼，不要撿最大的， 也不要撿最漂亮的，要撿就撿本身最喜歡的， 最重要的是撿到了本身喜歡的 就永遠不要再去海邊了。」

。。。。。。

凌晨四點寫完文章 不知不覺睡着了

夢迴到十年前的那個夏天 咱們都笑的很甜

看着你哭泣的臉 微笑着對我說再見

再見

做者：第一名的小蝌蚪

github: 文章會第一時間分享在前端屌絲心路歷程，歡迎star或者watch，感恩