背景今天凌晨一点，突然有人加了我的QQ，竟然是我十年前删掉的初恋。...因为之前在QQ空间互动太多，QQ推荐的朋友经常推荐我们认识。...谜语的尴尬同意了好友申请后，她仔细看了十年来自己的所有QQ动态和照片。她变漂亮了，懂得打扮了。以前瘦弱的身材，现在的打扮和妆容，已经是超乎我认知的女神了。可我还是无所事事，身体逐渐臃肿，发际线不断上扬，每天努力工作，为生活奔波，依然穷困潦倒。用一句话来形容现在的心情就是：“你已经登上了更高的高峰，我只能看着你远去的背影。”她默默的点了根烟，把自己的美颜照片全都存了起来。嗯？发现每张照片都是.png图片格式。PNG？？我们每天都会用到png图片，但是png到底是什么，它的压缩原理是什么？很好，那我就一一给大家讲解。什么是巴新？PNG的全称是PortableNetworkGraphics（便携式网络图形），是目前最流行的网络传输和显示图像格式。原因如下：无损压缩：PNG图像基于LZ77派生算法进行压缩。使其压缩率更高，生成的文件体积更小，且无数据丢失。体积小：使用特殊的编码方式标记重复的数据，使相同格式的图片PNG图片文件的体积更小。由于网络通讯带宽受限，在保证图片清晰逼真的前提下，首选PNG格式图片。支持透明效果：PNG支持为原图定义256级透明度，使图像的边缘可以平滑地与任何背景融合，这是GIF和JPEG所不具备的。PNG类型PNG图片主要分为三种类型，分别是PNG8/PNG24/PNG32。PNG8：PNG8中的8其实是指8bits，相当于用2^8（2的8次方）来存储图片的颜色类型。2^8等于256，也就是说PNG8可以存储256种颜色。如果一张图片颜色比较少，那么设置成PNG8图片类型就很合适了。PNG24：PNG24中的24相当于3乘以8等于24，即用三个8bits分别表示R（红）、G（绿）、B（蓝）。R(0~255),G(0~255),B(0~255)，可以表达256次256次256=16777216种颜色的图片，这样PNG24比PNG8的图片可以表示更多色彩的图片。但占用空间相对较大。PNG32：PNG32中的32相当于PNG24加上8bits透明色通道，相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0~255)、G(0~255)、B(0~255)、A(0~255)。比PNG24多了一个A（透明度），也就是说PNG32可以表示和PNG24一样多的颜色，而且还支持256种透明色，可以表示更丰富的图片颜色类型。怎么说呢，总的来说，PNG8/PNG24/PNG32相当于我们屌丝以为我们把女神分为三类：第一类女神=PNG8：屌丝和舔狗看第一类女神们，顿时心情愉悦，满脸笑容，焦黑的印堂渐渐舒展开来，双眼也能确定下来，那是一种心跳加速的感觉。第二种女神=PNG24：第二种女神开始发力了，会给鸡巴一种菊花紧绷震耳欲聋的震撼。多接触第二种女神，可以让鸡巴每天都元气满满，延年益寿。三种女神=PNG32：在第三种女神面前，所有语言都是苍白的。是一种让屌丝看破的至高无上的存在，双手双目向天一开。超凡脱俗和分身都不足以形容她一半的美。我只在梦里见过。为什么。..我的初恋，看她现在的照片，应该是PNG级别的24.PNG图片数据结构PNG图片的数据结构其实和http请求的结构很像。它是一个数据头后面跟着很多数据块，如下图所示：如果你用vim的视图编码模式打开一个png图片，它会是这样的：拿着草，是不是感觉和下面一样晦涩难懂第一眼看到这堆十六进制代码时的女神心态？哥你别慌，说实在的，要是撩妹子真的像那堆乱码那么简单，我和哥早就是妻妾成群了。下面我就一一解释这串十六进制码的含义。89504e470d0a1a0a：这是PNG图像的标题。所有PNG图片的头部都是这串代码。图片软件通过这串代码判断文件是否为PNG格式图片。0000000d：是iHDR数据块的长度，为13。49484452：是数据块的类型，是IHDR，后面是data。000002bc：是图片的宽度。000003a5：是高度。以此类推，每一段十六进制码代表一个特定的含义。其他的我下面就不一一分析了，太多了，小伙伴们自己看吧。WhatkindofPNGimageismoresuitableforcompressingconventionalPNGimages,themoremonotonousthecolor,thelessthecolorvalue,thegreaterthecompressionrate,suchasthefollowingpicture:itisonlycomposedofredandgreen,if0isusedtorepresentred,and1isused代表绿色，那用数字表示这张图就是下面这个样子：000000000000000000000000000000000000000000000000000111111111111111111111111111111111111111111111111111111111111111111111111111我们可以看到，这张图片是用了大量重复的数字，我们可以将重复的数字去掉，直接用数组形式的[0,1]Thispicturecanbedirectlyexpressed,andalargepicturecanbeexpressedwithonlytwonumbers,whichgreatlycompressesapngpicture.so!Themoremonotonousthecolor,thefewerthecolorvalues,andthesmallerthecolordifference,thehigherthecompressionrateandthesmallerthesizeofthepngimage.PNGcompressionThecompressionofPNGimagesisdividedintotwostages:Prediction:ThisstageistoperformapreprocessingonthePNGimage,whichmakesitmoreconvenientforsubsequentcompression.Toputitbluntly,sheisagoddess.Beforemakeup,shewillfirstapplyprimer,lotionandessencetofacilitatesubsequentmakeup,whitening,eyeshadow,lighting,etc.Compression:PerformDeflatecompression,whichcombinestheLZ77algorithmandtheHuffmanalgorithmtoencodepictures.Prediction(Prediction)PNGimagesarepreprocessedwithdifferentialencoding(Deltaencoding)toprocessthevalueofeachchannelineachpixel.Therearemainlyseveraltypesofdifferentialencoding:nofilteringX-AX-BX-(A+B)/2(alsoknownastheaveragevalue)Paethinfers(thisismorecomplicated)assumingthatapngpictureisasfollows:Thispictureisagradientcolormapwithgraduallyenhancedred,anditsredgraduallystrengthensfromlefttoright,Thevaluemappedintoanarrayis[1,2,3,4,5,6,7,8],ifusingX-Adifferentialencoding,itis:[2-1=1,3-2=1,4-3=1,5-4=1,6-5=1,7-6=1,8-7=1]theresultis[1,1,1,1,1,1,1]thelast[1,1,1,1,1,1,1]Thisresulthasalargenumberofrepeatednumbers,whichisverysuitableforcompression.Thisiswhyimageswithgradientcolors,imageswithlittlechangeincolorvalues,andimageswithasinglecolorareeasiertocompress.Thepurposeofdifferentialencodingistoconvertpngimagedatavalues??intoasetofrepeated,lowvalues??asmuchaspossible,sothatsuchvalues??areeasiertobecompressed.最后需要注意的是，差分编码处理的是每个像素中每个颜色通道的值，R（红）、G（绿）、B（蓝）、和四个颜色通道的值A（透明）。分别处理。压缩（Compression）压缩阶段会对预处理阶段得到的结果进行Deflate压缩，包括霍夫曼编码和LZ77压缩。前文提到，Deflate压缩会标记图片所有重复的数据，并记录数据特征和结构，会得到一张压缩比最大的png图片编码数据。Deflate是一种用于压缩数据流的算法。它可以用于任何需要流压缩的地方。还有，我们之前说过，一个png图片是由很多数据块组成的，但是数据块中的一些信息其实是没有用的。比如你用photoshop保存一张png图片，会有一个block记录“thispicturewascreatedbyphotoshop”，这些信息很多都是没用的，如果你用photoshop的“导出网页格式”，就可以去掉这些无用的信息。导出web格式前后的对比效果如下图所示：可以看到导出web格式后去掉了很多无用的信息后，图片明显小了很多。结论以上是我对png的理解。写得不好，像一个支离破碎的中老年人，杂乱无章。回想当年之所以和初恋分手，是怕影响学习。..但是分开之后，成绩还是很差。他们不仅错过了女神，而且直到现在，他们仍然一无所获。如今人到中年，背负着巨额房贷，家里还有孩子待养。看着在身边呼呼大睡的老婆，他忽然想到了。正如鲁迅所说：“爱情就像在沙滩上捡贝壳，不要捡最大的，也不要捡最美的。要捡就捡自己喜欢的。”最重要的是，喜欢的一旦捡到，就再也不会捡到。”去海边了。。。。。。。写完了凌晨四点的文章，不知不觉就睡着了，梦回十年前的那个夏天，我们都甜甜的笑着看着你哭着脸笑着和我说再见作者：第一只蝌蚪github：文章会第一时间分享前端屌丝的心路历程，欢迎star或围观，感谢团队推广。最后，腾讯新闻TNFE前端团队为前端开发者整理了小程序和web前端技术领域的最新优质内容，每周更新?，欢迎star，github地址:https://github.com/Tnfe/TNFE-...
