點(diǎn)擊「閱讀原文」查看良許原創(chuàng)精品視頻。

轉(zhuǎn)自：airuikun

鏈接：https://github.com/airuikun/blog/issues/1

背景

今天凌晨一點(diǎn)，突然有個(gè)人加我的qq，一看竟然是十年前被我刪掉的初戀。。。。

因?yàn)橹霸趒q空間有太多的互動(dòng)，所以qq推薦好友里面經(jīng)常推薦我倆互相認(rèn)識(shí)。。。。謎之尷尬

同意好友申請(qǐng)以后，仔細(xì)看了她這十年間所有的qq動(dòng)態(tài)和照片。

她變美了，會(huì)打扮了，以前瘦瘦的身材配上現(xiàn)在的裝扮和妝容，已經(jīng)是超越我認(rèn)知的女神了。

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

用一句話形容現(xiàn)在的感受就是：

“妳已經(jīng)登上更高的巔峰?而我只能望著妳遠(yuǎn)去的背影”。

默默點(diǎn)了根煙，把她長(zhǎng)得好看的照片都保存了下來(lái)。

咦？發(fā)現(xiàn)每一張照片都是.png的圖片格式。

png？？png的圖片我們每天都在用，可是png到底是什么，它的壓縮原理是什么？

很好，接下來(lái)我將會(huì)給大家一一闡述。

什么是PNG

PNG的全稱(chēng)叫便攜式網(wǎng)絡(luò)圖型（Portable Network Graphics）是目前最流行的網(wǎng)絡(luò)傳輸和展示的圖片格式，原因有如下幾點(diǎn)：

無(wú)損壓縮：PNG圖片采取了基于LZ77派生算法對(duì)文件進(jìn)行壓縮，使得它壓縮比率更高，生成的文件體積更小，并且不損失數(shù)據(jù)。

體積小：它利用特殊的編碼方法標(biāo)記重復(fù)出現(xiàn)的數(shù)據(jù)，使得同樣格式的圖片，PNG圖片文件的體積更小。網(wǎng)絡(luò)通訊中因受帶寬制約，在保證圖片清晰、逼真的前提下，優(yōu)先選擇PNG格式的圖片。

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

PNG類(lèi)型

PNG圖片主要有三個(gè)類(lèi)型，分別為 PNG 8/ PNG 24 / PNG 32。

PNG8：PNG 8中的8，其實(shí)指的是8bits，相當(dāng)于用2^8（2的8次方）大小來(lái)存儲(chǔ)一張圖片的顏色種類(lèi)，2^8等于256，也就是說(shuō)PNG 8能存儲(chǔ)256種顏色，一張圖片如果顏色種類(lèi)很少，將它設(shè)置成PNG 8得圖片類(lèi)型是非常適合的。

PNG24：PNG 24中的24，相當(dāng)于3乘以8 等于 24，就是用三個(gè)8bits分別去表示 R（紅）、G（綠）、B（藍(lán)）。R(0~255),G(0~255),B(0~255)，可以表達(dá)256乘以256乘以256=16777216種顏色的圖片，這樣PNG 24就能比PNG 8表示色彩更豐富的圖片。但是所占用的空間相對(duì)就更大了。

PNG32：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多了一個(gè)A（透明），也就是說(shuō)PNG 32能表示跟PNG 24一樣多的色彩，并且還支持256種透明的顏色，能表示更加豐富的圖片顏色類(lèi)型。

怎么說(shuō)呢，總的來(lái)說(shuō)，PNG 8/ PNG 24 / PNG 32就相當(dāng)于我們屌絲心中，把女神分為三類(lèi)：

一類(lèi)女神=PNG8：屌絲舔狗們見(jiàn)到第一類(lèi)女神，頓時(shí)會(huì)覺(jué)得心情愉悅、笑逐顏開(kāi)，屌絲發(fā)黑的印堂逐漸舒展，確認(rèn)過(guò)眼神，是心動(dòng)的感覺(jué)。

二類(lèi)女神=PNG24：第二類(lèi)女神開(kāi)始厲害了，會(huì)給屌絲們一種菊花一緊、振聾發(fā)聵的心弦震撼，接觸多了第二類(lèi)女神能讓屌絲每天精神抖擻，延年益壽。

三類(lèi)女神=PNG32：在第三類(lèi)女神面前，所有的語(yǔ)言都顯得蒼白無(wú)力。那是一種看了讓屌絲上下通透、手眼通天的至尊級(jí)存在。超凡脫俗、天神下凡都不足以描摹她美色的二分之一。我曾經(jīng)只有在夢(mèng)里才見(jiàn)到過(guò)。

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

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

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

如果你用vim的查看編碼模式打開(kāi)一張png圖片，會(huì)是下面這個(gè)樣子：

握草，第一眼看到這一坨坨十六進(jìn)制編碼是不是感覺(jué)和女神的心思一樣晦澀難懂？

老弟?莫慌，講實(shí)話，如果撩妹紙有那一坨坨亂碼那么簡(jiǎn)單，哥哥我早就妻妾成群啦。
接下來(lái)我就一一講解這一堆十六進(jìn)制編碼的含義。

89504e470d0a1a0a：這個(gè)是PNG圖片的頭，所有的PNG圖片的頭都是這一串編碼，圖片軟件通過(guò)這串編碼判定這個(gè)文件是不是PNG格式的圖片。

0000000d：是iHDR數(shù)據(jù)塊的長(zhǎng)度，為13。

49484452：是數(shù)據(jù)塊的type,為IHDR，之后緊跟著是data。

000002bc：是圖片的寬度。

000003a5：是高度。

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

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

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

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

00000000000000000

00000000000000000

00000000000000000

1111111111111111111111111

1111111111111111111111111

1111111111111111111111111

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

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

PNG的壓縮

PNG圖片的壓縮，分兩個(gè)階段：

預(yù)解析（Prediction）：這個(gè)階段就是對(duì)png圖片進(jìn)行一個(gè)預(yù)處理，處理后讓它更方便后續(xù)的壓縮。說(shuō)白了，就是一個(gè)女神，在化妝前，會(huì)先打底，先涂乳液和精華，方便后續(xù)上妝、美白、眼影、打光等等。

壓縮（Compression）：執(zhí)行Deflate壓縮，該算法結(jié)合了 LZ77 算法和 Huffman 算法對(duì)圖片進(jìn)行編碼。

預(yù)解析（Prediction）

png圖片用差分編碼（Delta encoding）對(duì)圖片進(jìn)行預(yù)處理，處理每一個(gè)的像素點(diǎn)中每條通道的值，差分編碼主要有幾種：

• 不過(guò)濾

• X-A

• X-B

• X-(A+B)/2(又稱(chēng)平均值)

• Paeth推斷（這種比較復(fù)雜）

假設(shè)，一張png圖片如下:

這張圖片是一個(gè)紅色逐漸增強(qiáng)的漸變色圖，它的紅色從左到右逐漸加強(qiáng)，映射成數(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]這個(gè)結(jié)果出現(xiàn)了大量的重復(fù)數(shù)字，這樣就非常適合進(jìn)行壓縮。

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

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

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

壓縮（Compression）

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

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

Deflate是一種壓縮數(shù)據(jù)流的算法. 任何需要流式壓縮的地方都可以用。

還有就是我們前面說(shuō)過(guò)，一個(gè)png圖片，是由很多的數(shù)據(jù)塊構(gòu)成的，但是數(shù)據(jù)塊里面的一些信息其實(shí)是沒(méi)有用的，比如用Photoshop保存了一張png圖片，圖片里就會(huì)有一個(gè)區(qū)塊記錄“這張圖片是由photshop創(chuàng)建的”，很多類(lèi)似這些信息都是無(wú)用的，如果用photoshop的“導(dǎo)出web格式”就能去掉這些無(wú)用信息。導(dǎo)出web格式前后對(duì)比效果如下圖所示：

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