矢量图、位图、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的压缩效果就越好。

矢量图、位图、RGB、YUV、JPEG、PNG的理解相关推荐

矢量图和位图的区别(转)
百科名片花形矢量图矢量图是根据几何特性来绘制图形,矢量可以是一个点或一条线,矢量图只能靠软件生成,文件占用内在空间较小,因为这种类型的图像文件包含独立的分离图像,可以自由无限制的重新组合.它的特点 ...
PS学习记录-矢量图和位图
目录概念说明矢量图位图常见的格式类型矢量图文件格式举例: 位图(标量图)文件格式举例: 两种图片的适用范围两种图片的核心差异 1.缩放保真 2.色彩不同 3.格式 4.常用绘图工具 5.占 ...
办公和设计必备|矢量图设计软件
在计算机里图形分两种,一种是位图一种是矢量图位图是最常见的.我们能看见的图片都是位图,它通过记录像素的颜色信息来保存图片的,所以颜色很好,但是放大后会模糊的矢量图就比较少见了.矢量图多用于印刷,通过记 ...
python绘制三维矢量图_【知乎专栏】让你的论文图表更sexy
原标题:[知乎专栏]让你的论文图表更sexy 有些同学在写论文的时候光注意文字的阐述,忽略掉了一个重要因素--图表.插入的图表不仅无意义,有时候甚至造成图表影响了文章内容表达.下面干货满满,十分钟教你 ...
Word：插入指定颜色的矢量图
需求在Word中插入矢量图,并且和我原有的保持颜色一致解决 1.首先进入矢量图网站查找想要的图标: 阿里巴巴矢量图官网 2.得到原有的矢量图的RGB颜色值将图片截图后,用本地画图工具打开,获取R ...
点阵图、矢量图、像素图、位图图像、位元块传输
点阵图目录概述点阵图与矢量图概述一般来说点阵图和位图是一个概念.它是由n多的像素组成的. &amp 它的概念主要是相对于区别矢量图而言的.点阵图和矢量图是现代计算机平面图形的两大概念 ...
【Vectorizer.AI】免费将 JPEG 和 PNG 位图转换为 SVG 矢量图
Vectorizer.AI 是一款非常新鲜,正在测试中的网站,由 AI 驱动.它能将 JPEG 和 PNG 位图转换为 SVG 矢量,可无限量放大,目前支持的最大图像像素大小为 2 万像素,最大图像文 ...
【笔记】位图（.bmp）和矢量图（Vector）：位图是点阵图或光栅图，使用像素的一格一格来描述图像，放大以后每一个像素看就像是一个个的马赛克；矢量图是使用直线和曲线来描述图形，可以无限方法，不会失真
一.什么是位图计算机能以位图和矢量图格式显示图像. 1.位图(Bitmap): 图像又称点阵图或光栅图,它使用我们称为像素(象素,Pixel)的一格一格的小点来描述图像.计算机屏幕其实就是一张包含大 ...
游戏中的图像资源(位图与矢量图比较)
当今游戏早已不再是黑白机的时代,游戏都由色彩丰富.精致的图像,流畅的动画构成.Flash游戏也不例外,Flash既支持矢量图又支持位图,他们各有优缺点.本文的目的即是介绍何时使用矢量图,何时使用位图, ...

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

矢量图、位图、RGB、YUV、JPEG、PNG的理解相关推荐

最新文章

热门文章