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

[[271299]]

圖片來自 Pexels

因為之前在 QQ 空間有太多的互動，所以 QQ 推薦好友里面經(jīng)常推薦我倆互相認(rèn)識......謎之尷尬......

同意好友申請以后，仔細(xì)看了她這十年間所有的 QQ動態(tài)和照片。她變美了，會打扮了，以前瘦瘦的身材配上現(xiàn)在的裝扮和妝容，已經(jīng)是超越我認(rèn)知的女神了。

而我依然碌碌無為，逐漸臃腫的身體加上日益上揚的發(fā)際線，每天為生活操勞和奔波，還窮。

用一句話形容現(xiàn)在的感受就是：“妳已經(jīng)登上更高的巔峰 而我只能望著妳遠(yuǎn)去的背影”。

默默點了根煙，把她長得好看的照片都保存了下來。咦?發(fā)現(xiàn)每一張照片都是 .png 的圖片格式。

PNG??PNG 的圖片我們每天都在用，可是 PNG 到底是什么，它的壓縮原理是什么?很好，接下來我將會給大家一一闡述。

什么是 PNG

PNG 的全稱叫便攜式網(wǎng)絡(luò)圖型(Portable Network Graphics)是目前流行的網(wǎng)絡(luò)傳輸和展示的圖片格式。

原因有如下幾點：

• 無損壓縮：PNG 圖片采取了基于 LZ77 派生算法對文件進行壓縮，使得它壓縮比率更高，生成的文件體積更小，并且不損失數(shù)據(jù)。
• 體積小：它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，使得同樣格式的圖片，PNG 圖片文件的體積更小。

網(wǎng)絡(luò)通訊中因受帶寬制約，在保證圖片清晰、逼真的前提下，優(yōu)先選擇 PNG 格式的圖片。

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

PNG 類型

PNG 圖片主要有如下三個類型：

• PNG 8：PNG 8 中的 8，其實指的是 8bits，相當(dāng)于用 2^8(2 的 8 次方)大小來存儲一張圖片的顏色種類。

2^8 等于 256，也就是說 PNG 8 能存儲 256 種顏色，一張圖片如果顏色種類很少，將它設(shè)置成 PNG 8 的圖片類型是非常適合的。

• PNG 24：PNG 24 中的 24，相當(dāng)于 3 乘以 8 等于 24，就是用三個 8bits分別去表示 R(紅)、G(綠)、B(藍(lán))。

R(0~255)，G(0~255)，B(0~255)，可以表達(dá) 256 乘以 256 乘以 256=16777216 種顏色的圖片，這樣 PNG 24 就能比 PNG 8 表示色彩更豐富的圖片，但是所占用的空間相對就更大了。

• PNG 32：PNG 32 中的 32，相當(dāng)于 PNG 24 加上 8bits 的透明顏色通道，就相當(dāng)于 R(紅)、G(綠)、B(藍(lán))、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 就相當(dāng)于我們屌絲心中把女神分為如下三類：

• 一類女神=PNG 8：屌絲舔狗們見到第一類女神，頓時會覺得心情愉悅、笑逐顏開，屌絲發(fā)黑的印堂逐漸舒展，確認(rèn)過眼神，是心動的感覺。
• 二類女神=PNG 24：第二類女神開始厲害了，會給屌絲們一種菊花一緊、振聾發(fā)聵的心弦震撼，接觸多了第二類女神能讓屌絲每天精神抖擻，延年益壽。
• 三類女神=PNG 32：在第三類女神面前，所有的語言都顯得蒼白無力。那是一種看了讓屌絲上下通透、手眼通天的至尊級存在。

超凡脫俗、天神下凡都不足以描摹她美色的二分之一。我曾經(jīng)只有在夢里才見到過。

哎，我的初戀，看著她現(xiàn)在的照片，應(yīng)該是觸及 PNG 24 這一等級了。

PNG 圖片數(shù)據(jù)結(jié)構(gòu)

PNG 圖片的數(shù)據(jù)結(jié)構(gòu)其實跟 HTTP 請求的結(jié)構(gòu)很像，都是一個數(shù)據(jù)頭，后面跟著很多的數(shù)據(jù)塊，如下圖所示：

如果你用 VIM 的查看編碼模式打開一張 PNG 圖片，會是下面這個樣子：

第一眼看到這一坨坨十六進制編碼是不是感覺和女神的心思一樣晦澀難懂?

老弟莫慌，講實話，如果撩妹紙有那一坨坨亂碼那么簡單，哥哥我早就妻妾成群啦。

接下來我就一一講解這一堆十六進制編碼的含義：

• 8950 4e47 0d0a 1a0a：這個是 PNG 圖片的頭，所有的 PNG 圖片的頭都是這一串編碼，圖片軟件通過這串編碼判定這個文件是不是 PNG 格式的圖片。
• 0000 000d：是 iHDR 數(shù)據(jù)塊的長度，為 13。
• 4948 4452：是數(shù)據(jù)塊的 type，為 IHDR，之后緊跟著是 data。
• 0000 02bc：是圖片的寬度。
• 0000 03a5：是高度。

以此類推，每一段十六進制編碼就代表著一個特定的含義。下面其他的就不一一分析了，太多了，小伙伴們自己去查吧。

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

常規(guī)的 PNG 圖片，顏色越單一，顏色值越少，壓縮率就越大，比如下面這張圖：

它僅僅由紅色和綠色構(gòu)成，如果用 0 代表紅色，用 1 代表綠色，那用數(shù)字表示這張圖就是下面這個樣子：

00000000000000000 
00000000000000000 
00000000000000000 
1111111111111111111111111 
1111111111111111111111111 
1111111111111111111111111 

我們可以看到，這張圖片是用了大量重復(fù)的數(shù)字，我們可以將重復(fù)的數(shù)字去掉，直接用數(shù)組形式的[0，1]就可以直接表示出這張圖片了，僅僅用兩個數(shù)字，就能表示出一張很大的圖片，這樣就極大的壓縮了一張 PNG 圖片。

所以!顏色越單一，顏色值越少，顏色差異越小的 PNG 圖片，壓縮率就越大，體積就越小。

PNG 的壓縮

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

• 預(yù)解析(Prediction)：這個階段就是對 PNG 圖片進行一個預(yù)處理，處理后讓它更方便后續(xù)的壓縮。說白了，就是一個女神，在化妝前，會先打底，再涂乳液和精華，方便后續(xù)上妝、美白、眼影、打光等等。
• 壓縮(Compression)：執(zhí)行 Deflate 壓縮，該算法結(jié)合了 LZ77 算法和 Huffman 算法對圖片進行編碼。

預(yù)解析(Prediction)

PNG 圖片用差分編碼(Delta encoding)對圖片進行預(yù)處理，處理每一個的像素點中每條通道的值。

差分編碼主要有幾種：

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

假設(shè)，一張 PNG 圖片如下：

這張圖片是一個紅色逐漸增強的漸變色圖，它的紅色從左到右逐漸加強，映射成數(shù)組的值為[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] 

得到的結(jié)果為：

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

最后的[1,1,1,1,1,1,1]這個結(jié)果出現(xiàn)了大量的重復(fù)數(shù)字，這樣就非常適合進行壓縮。

這就是為什么漸變色圖片、顏色值變化不大并且顏色單一的圖片更容易壓縮的原理。

差分編碼的目的，就是盡可能的將 PNG 圖片數(shù)據(jù)值轉(zhuǎn)換成一組重復(fù)的、低的值，這樣的值更容易被壓縮。

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

壓縮(Compression)

壓縮階段會將預(yù)處理階段得到的結(jié)果進行 Deflate 壓縮，它由 Huffman 編碼 和 LZ77 壓縮構(gòu)成。

如前面所說，Deflate 壓縮會標(biāo)記圖片所有的重復(fù)數(shù)據(jù)，并記錄數(shù)據(jù)特征和結(jié)構(gòu)，會得到一個壓縮比最大的 PNG 圖片編碼數(shù)據(jù)。

Deflate 是一種壓縮數(shù)據(jù)流的算法，任何需要流式壓縮的地方都可以用。還有就是我們前面說過，一個 PNG 圖片，是由很多的數(shù)據(jù)塊構(gòu)成的，但是數(shù)據(jù)塊里面的一些信息其實是沒有用的。

比如用 Photoshop 保存了一張 PNG 圖片，圖片里就會有一個區(qū)塊記錄“這張圖片是由 Photshop 創(chuàng)建的”，很多類似這些信息都是無用的，如果用 Photoshop 的“導(dǎo)出 Web 格式”就能去掉這些無用信息。

導(dǎo)出 Web 格式前后對比效果如下圖所示：

可以看到，導(dǎo)出 Web 格式，去除了很多無用信息后，圖片明顯小了很多。

結(jié)語

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

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

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

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

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