PNG

PNG 特点

• 无损压缩：PNG图片采取了基于LZ77派生算法对文件进行压缩，使得它压缩比率更高，生成的文件体积更小，并且不损失数据。
• 体积小：它利用特殊的编码方法标记重复出现的数据，使得同样格式的图片，PNG图片文件的体积更小。
  • 网络通讯中因受带宽制约，在保证图片清晰、逼真的前提下，优先选择PNG格式的图片。
• 支持透明效果：PNG支持对原图像定义256个透明层次，使得图像的边缘能与任何背景平滑融合，这种功能是GIF和JPEG没有的。

PNG 类型

• PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8（2的8次方）大小来存储一张图片的颜色种类 ,也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
• PNG 24：PNG 24中的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 数据结构

• 8950 4e47 0d0a 1a0a：这个是PNG图片的头，所有的PNG图片的头都是这一串编码，图片软件通过这串编码判定这个文件是不是PNG格式的图片
• 0000 000d：是iHDR数据块的长度，为13
• 4948 4452：是数据块的type,为IHDR，之后紧跟着是data
• 0000 02bc：是图片的宽度
• 0000 03a5：是高度

PNG 适用场景

• 颜色越单一，颜色值越少，压缩效果就越好
• 渐变色图片、颜色值变化不大的图片
  

// 仅由红色和绿色构成，如果用0代表红色，用1代表绿色，那用数字表示这张图就是下面这个样子
00000000000000000
00000000000000000
00000000000000000
1111111111111111111111111
1111111111111111111111111
1111111111111111111111111

• PNG 将重复的数字去掉，直接用数组形式的[0, 1]就可以直接表示出这张图片了，仅仅用两个数字，就能表示出一张很大的图片，这样就极大的压缩了一张图片

PNG 压缩过程

• 预解析
  • 用差分编码（Delta encoding）对图片进行预处理，处理每一个的像素点中每条通道的值，比如下图用 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]
    
• 压缩
  • 压缩阶段会将预处理阶段得到的结果进行 Deflate 压缩，它由 Huffman 编码 和 LZ77压缩构成。

JPG/JPEG

• 一种有损压缩的格式，在不影响人们可分辨图片质量的前提下，尽可能的压缩文件的大小，这意味着JPG/JPEG去掉了一部分图片的原始信息。就是可以用最少的磁盘空间得到较好的图像质量。

WebP

• WebP格式是谷歌开发的一种旨在加快图片加载速度的图片格式。WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。据官方实验显示：无损WebP相比PNG减少26%大小；有损WebP相比JPG/JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。
• 谷歌浏览器对WebP格式支持比较好之外，其他浏览器对WebP的支持显然还不够好，这也是WebP的短板之一。
  • 多后缀方式兼容：图片请求有2个格式后缀，分别是JPG和WebP，这里说明这个图片有2种形式，然后程序根据浏览器的型号确定是否支持WebP格式的图片，如果不支持则返回JPG格式，如果支持则返回WebPack格式。
  • 指定Accept头支持WebP格式