png 与 jpg的区别，以及图片压缩


此篇是阅读https://www.jianshu.com/p/53f93a917799，https://blog.csdn.net/LHHopencv/article/details/76066664，https://www.jianshu.com/p/5ad19825a3d0三篇文章后总结而出。

区别

创建年份 有损无损 支持颜色数 支持透明 缺点
GIF 87年 无损 256种颜色(8bit彩色) 支持单一透明
JPG 92年 失真压缩标准方法 24bit彩色 不支持透明 不适合线条绘图和文字或图示的图形，不支持动画
PNG 96年 无损数据压缩 8bit/24bit/32bit 8位支持索引透明和alpha透明24位，不支持透明32位在24位基础上增加了8位透明通道，可展现256级透明程度 有的软件不适合，过分臃肿
  • alpha通道：描述图片中的透明区域，此透明区域允许通透地显示背景。
    • 指一张图片的透明和半透明度。alpha只有0或1两种不同的表示。如果alpha有8位，则可以表示256种半透明度。
  • bit是位的意思。
    • 1字节等于8位，二进制数 计算机内部的数知据都用二进制表示，而每一“位”二进制数字就是1bit，是道最小单位，比如二进制的1就是1bit，二进制的1010就是4bit，而每一字节（byte）就由8bit组成。 8bit并不等于某一回个二进制数，他只是决定了位宽，也就是8位二进制位宽

压缩方式

  • JPEG
    • 压缩方式通常是破坏性资料压缩（lossy compression），意即在压缩过程中图像的品质会遭受到可见的破坏。一张图片多次上传下载后，图片逐渐会失真。
  • PNG
    • 使用无损压缩

优点

  • JPEG
    • JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输照片的格式；
    • JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。
    • 在这种情况下，它通常比完全无失真方法做得更好，仍然可以产生非常好看的影像（事实上它会比其他一般的方法像是GIF产生更高品质的影像，因为GIF对于线条绘画和图示的图形是无失真，但针对全彩影像则需要极困难的量化）。
  • PNG
  • 全称叫便携式网络图型（Portable Network Graphics）
    • 支持256色调色板技术以产生小体积文件
    • 最高支持48位真彩色图像以及16位灰度图像
    • 支持Alpha通道的半透明特性
    • 支持图像亮度的gamma校正信息
    • 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息
    • 使用无损压缩
    • 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌
    • 使用CRC循环冗余编码防止文件出错
    • 最新的PNG标准允许在一个文件内存储多幅图像

JPG VS PNG

JPG在图片压缩方面有巨大优势，但采用有损压缩，图片质量有损失。
一般截屏用PNG格式不但比JPG质量高而且文件更小；防锯齿PNG非常有优势。
图1

PNG压缩原理

PNG压缩过程分为两个阶段：Prediction 和 Compression。

Prediction

在这一阶段，我们每次会处理图片中一行的数据，首先通过Filter阶段处理这一行当中
每一个的像素点中每条通道的值，也就是我们常说的ARBG。它交由差分处理器来重新计算该通道的值。差分处理会根据这个像素点上通道和之前或者之上像素点对应通道值之间的差异，进行差分编码，也就是说，如果原本相邻像素点之间通道的值之间很接近，那么我们就会获得很多的1,0,-1这种很小的值。这里有两点需要注意：

  • 整个Prediction阶段的目的，也就是选择合适的差分处理器，让最终的编码结果出现尽可能多的零值和重复值，这一结果将会影响到Compression阶段的压缩率。
  • 差分编码器比较的是像素点之间对应通道的值，而并不是整个像素点。

Compression

在Prediction处理完毕之后，再将这一转换的结果输出给Deflate，Deflate执行真正的压缩操作，它会通过LZ77和Huffman对图像进行编码，最后将处理之后的结果保存。在Compression阶段，它最终的压缩率会受到两方面的影响：

  • Prediction 的处理结果：对于颜色相近的区域，也就是有很多零值的区域，那么压缩率将会更高，而如果颜色之间差异很大，那么压缩效果将不尽人意。
  • Deflate 每一行的匹配情况：前面我们分析过，整个处理过程是按行来处理的。而在处理每一行的数据时，Deflate把处理的符号数限制为3 ~ 258，也就是说，最大的压缩率为1032:1，当出现符号数小于3个时，那么就有可能出现无法匹配的情况，因此，对于图片宽度的改变将有可能影响最终压缩的效果。
    下面，我们对于上面描述的第二点举一个例子，对于下面两幅图，右图虽然之比左图宽了两个像素，但是它的大小整整大了一倍：

我们通过下面这个工具可以观察每个像素点的压缩率：

  • Pngthermal
    在分析的结果中，深蓝色表示该像素点具有较高的压缩率，而黄色/红色则表示压缩率较低，可以发现正是由于改变了图片的大小，导致某些像素点没有匹配到，从而产生了一个较大的文件。

代码表示

对于 Prediction 和 Compression 这两个过程，可以通过下面这个代码来理解：

  • https://gist.github.com/anonymous/906740

总结

PNG有很多优点，并且应用广泛，但是还是需要根据具体的场景来选用：

如果原始的图片为高清的，但是不要求进行无损的压缩，那么可以选择类似于JPG这样的有损压缩
但是从反方面来说，如果原始图片较为简单，并且需要支持透明形式，那么PNG要由于JPG。