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的理解了，寫的不好，就像一個支離破碎的中老年，雜亂無章。
想起那年跟初戀分手的原因 是因為怕影響到學習。。。可是分開後成績也還是很爛，不僅錯過了女神，而且到現在也依然一事無成。
如今中年已至，身上揹負著巨大的房貸，家裡還有嗷嗷待哺的孩子，看著身旁呼嚕聲轟天熟睡中的妻子，突然也就想開了。
就像魯迅說的：
“愛情就像在海灘上撿貝殼，不要撿最大的， 也不要撿最漂亮的，要撿就撿自己最喜歡的， 最重要的是撿到了自己喜歡的 就永遠不要再去海邊了。”
。。。。。。
凌晨四點寫完文章 不知不覺睡著了
夢迴到十年前的那個夏天 我們都笑的很甜
看著你哭泣的臉 微笑著對我說再見
再見