TRTC案例：截图体积与清晰度

背景：

业务场景和架构：TRTC安卓端与小程序端实现视频互通，房间旁路到直播，采用直播云端截图。

本文旨在透过一个常见的case，尽量简单通俗的梳理下关于图片的基础知识，后续精力允许会出关于色彩、图像的解析系列。

问题：

采用这种方式获得的截图，体积很小且清晰度较差，不适用与需要高清截图的场景。为什么同样尺寸的照片清晰度和体积差那么多，业务上该如何实现高清截图。

分析解决方案：

问题1：如何有效调整分辨率

这里各端直接使用SDK提供的调整分辨率接口即可。

以Android端为例，可以在setVideoEncoderParam是传入TRTCVideoEncParam中，指定videoResolution。

参考：http://doc.qcloudtrtc.com/group__TRTCCloudDef__android.html#classcom_1_1tencent_1_1trtc_1_1TRTCCloudDef_1_1TRTCVideoEncParam

问题2：为什么同样分辨率的图片，大小和质量不一样

下图是一张基本图片信息的对比图，左边的照片是采集端上行音视频时候抓到的截图，右边的照片是采用旁路直播后，在云端截图中取出来的照片。可以看出左边照片的文字清晰度是明显高于右边照片文字清晰度的。

最右侧的两张图中可以看到，两张照片的分辨率基本一致。那么，为什么同样分辨率的两张照片，清晰度会有那么大的差别的呢，一张图片是2M而另一张只有150kb？下面分3个部分展开做阐述：

PART1:常见图片格式与对比

图片是指由图形、图像等构成的平面媒体。图片格式是计算机存储图片的格式，常见格式包括jpeg,png,bmp,gif,pcx,tga,exif,fpx,svg,psd,cdr等。

图片的格式多种多样，总体上可以分为点阵图(位图)和矢量图两大类；常见的BMP、JPEG、PNG等格式都是点阵图形，而SVG、SWF等格式的图形属于矢量图形。

那点阵图和矢量图有什么区别呢，通俗的将，点阵图是由最小单位为像素构成的图，缩放会失真；而矢量图是采用线条和填充的方式构成，缩放不会失真的图。

PNG/JPEG/BMP格式的简单对比：

为了描述组成图像的像素色彩信息，需要知道图像的长、宽像素、像素位深等信息。而为了规范图像的信息和像素数据，衍生出不同的图像文件存储格式，常见的如BMP、PNG、JPEG等，下面分别对这三种格式做简单对比。

PNG（Portable Network Graphics）为可移植网络图形格式，也是一种位图文件存储格式，可以进行无损压缩，

PNG格式因其支持透明的属性是网页中广泛使用的一种格式。通常，png格式图片的大小是jpg图像大小的数倍

PNG格式有8位、24位、32位三种形式，其中8位PNG支持两种不同的透明形式（索引透明和alpha透明【附1】）。PNG-8颜色信息最多只能有256种颜色；PNG-24不支持透明PNG-24可以容纳1670万种颜色的颜色信息；PNG-32在PNG-24基础上增加了8位透明通道，因此可展现256级透明程度。

由于PNG是无损的，保存将要被编辑的图像来说更加合适。

JPEG（Joint Photographic Experts Group，联合图像专家小组）是一种针对照片影像而广泛使用的有损压缩标准方法。

JPEG是最常见的图像格式，是不支持透明的。图像占用的存储较小，但是牺牲了图像的质量。

作为一种有损的图像格式，用存储空间换了图像质量，各种压缩算法说白了就是抹掉图片里不打算存的数据。

由于JPEG是有损压缩，会产生迭代有损，在重复压缩和解码的过程中会不断丢失信息使图像质量下降。

JPEG的文件格式一般有两种文件扩展名：.jpg和.jpeg，这两种扩展名本质上是一样的，.jpg后缀的图片改为.jpeg对文件本身不会有任何影响。严格来讲，JPEG的文件扩展名应该为.jpeg，由于DOS时代的8.3文件名命名原则，就使用了.jpg的扩展名。

BMP（Bitmap）是一种没有压缩过的位图文件格式，色彩度很真实。但因该格式的图片保存了大量的数据，所以缺点是图片相对是比较大的。

因其未压缩的特性，区别于png、jpg格式采用不同压缩算法压缩体积会不同，后面会以BMP格式为例，计算图片的体积。

	GIF	JPEG	PNG8	PNG24	PNG32
创建年份	87年	92年	96年	96年	96年
是否有损压缩	无损	有损	无损	无损	无损
支持颜色数	256(8bit)	1670W(24bit)	256(8bit)	1670W(24bit)	1670W (32bit)
体积	较小	压缩	较小	较大	大
是否支持透明	支持单一透明	否	支持索引透明和alpha透明	不支持透明	在24位的基础上增加了8位透明通道，可展现256级透明程度

PART2:图片大小的计算方式

图片体积的影响因素：

带着本文最初的问题，客户提供的图片中，为什么一样尺寸的两张图片，体积不一样？

Png格式图片是 1080宽，2130高，32位深度，体积是2.02MB

jpg 格式图片是 1080宽，2340高，24位深度，体积是149kb

要探究为什么体积不一样，就要搞清楚决定图片体积的主要因素。

1. 像素数量即图片长宽尺寸；如1080x2130

2. 图片格式，主要是格式对应的压缩算法；如JPEG

3. 位深和色深、通道数量

4. 图片压缩格式，如png，jpeg等

除此之外，还有些影响因素如：附加信息（如EXIF，【附2】）、图片内容复杂度等

下面对这几个影响因素分别做简单阐述：

1. 尺寸：

像素数量这个就是字面意思，图片的高度乘以图片的宽度即可。

2. 位深

在某一分辨率下，每一个像素点可以有多少种色彩来描述，单位为“bit”(位)。

典型的色深有8-bit、16-bit、24-bit和32-bit几种。深度数值越高，可以获得更多的色彩。

24位色被称为“真彩色”，R、G、B各8bit，常说的 8bit，色彩总数为1670万；

3. 色深与通道

色深又叫色彩深度/色彩位数。

我们在计算机视觉领域，称RGB为颜色通道，彩色图像有三个通道值，每个颜色通道，都是一个 0～255 的整数值，占用一个字节（Byte）的存储空间。

画面中红、绿、蓝三个颜色通道中每种颜色为N位，总的色彩位数则为3N，色彩深度也就是视频设备所能辨析的色彩范围。

4. 图片压缩格式

压缩格式是影响图片体积的重要因素。

不同的压缩格式体积差别很大，如png格式通常要比jpeg大很多。

同样的尺寸的JPG图像大小通常也是不一样的，因为用DCT在压缩的时候，如果图像的色彩越丰富，那么压缩以后的尺寸越大，所以一张空白图和一张风景照压缩以后的文件大小是不一样的。

在不考虑第四点图片压缩格式的情况下，图片的体积计算方式基本是一致的。

如下图，一张尺寸为4x4的图片，每一个网格代表一个像素，则未压缩的的原始图像数据，占用的存储空间为 4 x 4 x 3 = 48 字节 (Bytes) 。

照片大小= 整张照片的像素总数*每个像素点上的颜色编码大小（无压缩位图，BMP等格式都属于这种格式）

在不压缩的情况下，图片占用空间的大小:

照片大小= 整张照片的像素总数*每个像素点上的颜色编码大小（无压缩位图）

bmp位图的计算方式如下

大小=高度*宽度*位深/8/1024/1024 (MB)

如客户图1是未经压缩的位图: 1080*2130*32/8/1024/1024 = 8.77MB

如客户图2是未经压缩的位图: 1080*2340*24/8/1024/1024 = 7.32MB

常用的web图片格式——png/jpg/gif，无法得到准确公式，因为这几个格式都是有压缩的。

PART3:云端截图清晰度的影响因素

聊完图片体积，最后再结合本文阐述的图片体积影响因素，聊聊视频清晰度的一个影响因素。

视频是由一张张图片组成的，每张图片就是一帧（视频压缩又叫编码，本文不展开，后会开一篇专门聊聊视频清晰度），每张图片的体积又如上文所述有明确的影响因素，因而这些因素也同样会影响视频。

视频本身清晰度影响因素复杂，经过本地编码传输和云端的一些列处理，可以干预的因素就很少了。

码率是音视频中另一个重要的概念，这里引入一个参数值，Bits/(Pixel*Frame)， bits指的是比特率，pixel像素数，frame帧率。那么这个参数的意思就很明显了，平均每个像素所分配的数据空间大小。

一般来说，这个值越大，视频相对越清晰。所以简单理解，视频某帧的截图清晰度，很大程度上由当时的码率决定，一定情况下，提高视频的码率，对清晰度的提升会有一定的影响。（无限提高码率是不对的，一般分辨率和码率都是有对应的档次关系的，后续文章展开讲解）

那么，如果业务侧想要获取高质量的截图，最有效的方法是什么呢，是在推流端本地获取。云端截图功能的本质，更多的是配合监管或结合鉴黄等功能综合使用，对于有高清截图需求的场景，并不适合。

最后简单总结一下

1）BMP是无压缩的位图，简单的根据尺寸和位深度，就可以算出来尺寸

2）png是常见的无损压缩方式，图片质量通常要比jpeg好

3）jpeg跟jpg简单可以理解为一样的，是常见的有损压缩方式

4）jpeg有多重压缩算法，压缩后的压缩比，跟原图的“色彩丰富度”有关，没法定量计算压缩比

5）截图码率对截图清晰度很重要，但是业务侧想要获取“高清截图”，更有效的方式是在推流端上处理，从源头获取

附：

（1）补充alpha通道的概念：

“描述图片中的透明区域，此透明区域允许通透地显示背景，是指一张图片的透明和半透明度。例如：一个使用每个像素16比特存储的位图，对于图形中的每一个像素而言，可能以5个比特表示红色，5个比特表示绿色，5个比特表示蓝色，最后一个bit是alpha。在这种情况下，它要么表示透明要么不是，因为alpha bit只有0或1两种不同表示的可能性。又如一个使用32个bit存储的位图，每8个bit表示红绿蓝，和alpha通道。在这种情况下，就不光可以表示透明还是不透明，alpha通道还可以表示256级的半透明度，因为alpha通道有8个bit可以有256种不同的数据表示可能性。”

（2）Exif信息

Exif（Exchangeable image file format）是专门为数码相机的照片设定的，可以记录数码照片的属性信息和拍摄数据。

Exif 所记录的元数据信息非常丰富，主要包含了以下几类信息：

拍摄日期

拍摄器材（机身、镜头、闪光灯等）

拍摄参数（快门速度、光圈F值、ISO速度、焦距、测光模式等）

图像处理参数（锐化、对比度、饱和度、白平衡等）

图像描述及版权信息

GPS定位数据

缩略图