今天凌晨一點，突然有個人加我的 QQ，一看竟然是十年前被我刪掉的初戀......

[[271299]]

圖片來自 Pexels

因為之前在 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 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 的理解了，寫的不好，就像一個支離破碎的中老年，雜亂無章。

想起那年跟初戀分手的原因是因為怕影響到學習......可是分開后成績也還是很爛，不僅錯過了女神，而且到現在也依然一事無成。

如今中年已至，身上背負著巨大的房貸，家里還有嗷嗷待哺的孩子，看著身旁呼嚕聲轟天熟睡中的妻子，突然也就想開了。

就像魯迅說的：“愛情就像在海灘上撿貝殼，不要撿最大的， 也不要撿最漂亮的，要撿就撿自己最喜歡的， 最重要的是撿到了自己喜歡的就永遠不要再去海邊了。”

凌晨四點寫完文章，不知不覺睡著了，夢回到十年前的那個夏天，我們都笑的很甜，看著你哭泣的臉，微笑著對我說再見，再見!