矢量图、位图、RGB、YUV、JPEG、PNG的理解

开发的项目中缺少不了图形图像的支持，对图的使用场景也是极多的，但对其内部原理却一直处理模糊状态，抽时间做个整理吧，理一下相关的概念。

一、矢量图与位图

矢量图与位图均为图像的表述方式，矢量图可以理解为在我们口中描述图形的方法，比如：图A：一个半径10cm的绿色实心圆，重点包括：圆、实心、绿色、半径为10cm、圆心位置，这些信息只需要很少的字节即可记录图A，因而，矢量图所占空间较小；还有一个特点就是放大以后不会变形，因为不管放多大，其特征都是固定的。矢量图缺点也很明显，难以表述复杂场景。基于矢量图放大不变形的特点，目前有一个重要的应用场景是电子地图。

位图的基本单元为像素，位图即是像素的集合，具体到某一张平面图片，将其量化为width*heigh的像素矩阵，每个像素使用一定的规则（RGB或YUV，稍后细述）进行表述，得到整个图片的二进制文件格式即为位图。不经过处理的位图持有原图的全部数字化信息，图片文件比矢量图要大很多。

二、RGB

位图的每个像素可以用RGB格式表述，RGB也是像素点色彩值的最直观表述，常用的RGB包括RGB565、RGB888，表示不同的量化级别，以RGB888为例，分别采用8个bit表示红色、蓝色和绿色，各色值的量化范围为[0,255]，可以表述2^24个色值。一幅720*1080的图片如果用RGB888表述的话大小为：720*1080*3=2M左右，文件较大，一般都要进行压缩处理。当前大部分的压缩处理算法是不是基于RGB的，而是针对YUV的。还有一种ARGB格式，在RGB的基础上，加上了Alpha通道，可以处理图片的透明部分。

三、YUV

RGB是把图片的每一个像素值用RGB的格式进行表述，YUV是另一种表述格式，也是针对每一个像素的，提取像素的亮度（Y分量）、色差（UV分量）。RGB的存储中，每个像素的R分量G分量B分量是挨着存放的，而YUV则是分为Y块、U块、V块三个矩阵，人眼最敏感的Y块全量保留，UV分块则可进行压缩处理。YUV的格式包括：YUV444、YUV422、YUV420、YUV411，表示不同的压缩比例，YUV444为源像素值。怎么理解呢，看下述步骤：

首先，取相领的2*2的四个像素

[Y1,U1,V1][Y2,U2,V2]

[Y3,U3,V3][Y4,U4,V4]

YUV444即为上述的四个值全部保留，YUV各占1Byte，四个像素所需空间为4*3=12B

YUV422为U值两个像素取一个、V值也是两个像素取一个，结果为：

[Y1,U1,V2][Y2,U1,V2]

[Y3,U3,V4][Y4,U4,V4]

四个像素所占空间为4*2=8B

YUV411四个像素使用一个像素的UV分量，编码结果为：

[Y1,U1,V3][Y2,U1,V3]

[Y3,U1,V3][Y4,U1,V3]

所占空间为4*3/2=6Byte

YUV420并非不要V分量，而是以行为单位，一行取U值，一行取V值

扩展一下源像素，第三、四行为：

[Y5,U5,V5][Y6,U6,V6]

[Y7,U7,V7][Y8,U8,V8]

YUV420的编码结果为：

[Y1,U1,无][Y2,U1,无]

[Y3,U3,无][Y4,U3,无]

[Y5,无,V5][Y6,无,V5]

[Y7,无,V7][Y8,无,V7]

8个像素所占空间为8*3/2=12Byte，4个像素的话为6B

一幅720*1080的图片YUV420格式的大小为：720*1080*3/2=1M左右，是RGB的一半。

RGB与YUV的转换公式：



 

 

矩阵形式：

         

要注意的是在写代码实现上，两者的存储方式不同，RGB连在一起，YUV分块存放。

四、JPEG

JPEG是一种有损压缩格式，其压缩比可达1:100，一般在1:10左右，右侧的值越大，文件越小，但清晰度也越低，其算法 的实现原理有非常多的文章描述的很清楚了，也不是很复杂，下面是我看到的几篇比较好的，推荐给大家：

中文：

https://blog.csdn.net/newchenxf/article/details/51719597/

https://blog.csdn.net/asdzheng/article/details/51779038

英文资料中维基上的就很全：

https://en.wikipedia.org/wiki/JPEG

总体说来，先压缩UV分量，然后分别对Y、U、V块进行离散余弦变换，将变换完的矩阵使用量化矩阵（和压缩比有关系）进行量化，Z字形拉平矩阵，哈夫曼编码。

五、PNG

PNG是一种无损压缩格式，也就是说经过PNG编码后的图像解码后可以保留源文件全部信息。当然，这个只是理论的，在实际算法中，与PNG支持的色度有关，比如，PNG表示一个颜色值使用8bit，则可以表示256种颜色，也就是说编码及解码可以达到256种颜色的还原，24位的PNG和RGB的精确度是一致的。PNG算法压缩原理利用的是图像相邻的色值有大面积重复部分，比如说，拍摄的蓝天白云，其蓝天部分的色值重复率就很高。PNG算法中首先按图像从左到右、从上到下获得各像素点的色值，然后在表示色值M之前会加一个重复个数的值N，表示该M色值往后N位全就都是M色值，N最大可表示的值取决于重复个数的二进制位，比如8位，最多可表示256个重复值，超过256，即使仍然是相同颜色，也要需要新起色值表示，这样重复色块就合并成数量+色值的表示，从而达到压缩效果。图像重合块越多，PNG的压缩效果就越好。
————————————————
版权声明：本文为CSDN博主「路路人王」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/kcstrong/article/details/81705693