音视频之图片(一)

写于开始音视频学习之前

马上就要开始学习mj老师的音视频课程了，为了增加学习的效率，就用博客园记录一下自己的学习过程。想根据mj的视频，自己总结出来图片和声音两篇博客，构思半天，发现mj关于图片和声音的博客确实是最好的素材，我就在他的基础上稍加改动。

简述

音视频顾名思义，音视频分为音频和视频。音频对应的就是声音，而视频对应的就是图片

像素(Pixel)

以下的图片的分辨率是60x50。

用Photoshop放大图片上百倍后，可以清晰地看到图片由若干个方形的色块组成，每一个方形的色块被称为：像素（Pixel）。这张图片的每一行都有60个像素，共50行，总共60*50=3000个像素。

总结一下：

• 每张图片都是由N个像素组成的（N≥1）

如果一张图片的分辨率是WxH，那么：

• 每一行都有W个像素，共H行，总共W*H个像素
• 宽度是W像素，高度是H像素

每个像素都有自己独立的颜色，若干个像素就组成了一张色彩缤纷的完整图片。

RGB颜色模型

1666年，伟大的科学家牛顿进行了著名的色散实验：用一块三棱镜分解太阳光。

实验发现：太阳光通过三棱镜折射后，会被折射分散成红、橙、黄、绿、蓝、靛、紫7种单色光。其中的红、绿、蓝被称为是色光三原色。

接下来，再看一个很重要的概念：RGB颜色模型（RGB color model），又称为三原色光模式。

• 将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的含量相叠加，可以合成产生各种色彩光

每个像素的颜色，可以通过红色、绿色、蓝色以不同的含量混合而成。比如：

• 红色（Red）、绿色（Green）可以合成：黄色（Yellow）

红色（Red）、蓝色（Blue）可以合成：洋红色（Magenta）

绿色（Green）、蓝色（Blue）可以合成：青色（Cyan）

红色（Red）、绿色（Green）、蓝色（Blue）可以合成：白色（White）

位深度

每一个像素的颜色信息是如何存储的呢？

• 取决于图片的位深度（Bit Depth），也称为：色彩深度（Color Depth，简称：色深）

如果一张图片的位深度为n，那么它的每一个像素都会使用n个二进制位来存储颜色信息，window上如下图所示

• 查阅资料了半天，也没发现mac上面图片怎么展示位深度的(很是尴尬)

24bit位深度的含义

上图的位深度是24，它的具体含义是：

• 每一个像素都会使用24个二进制位来存储颜色信息

每一个像素的颜色都是由红（Red）、绿（Green）、蓝（Blue）3个颜色通道合成的

每个颜色通道都用8bit来表示其“含量”（值），取值范围是：

• 二进制：00000000~11111111
• 十进制：0~255
• 十六进制：00~FF

举例：01000000 11100000 11010000（共24bit）表示绿宝石色（Turquoise）

• 红色的值：二进制01000000，十进制64，十六进制40
• 绿色的值：二进制11100000，十进制224，十六进制E0
• 蓝色的值：二进制11010000，十进制208，十六进制D0
• 64的红色 + 224的绿色 + 208的蓝色 = 绿宝石色

24bit颜色的表示形式

我们常用2种形式来表示24bit颜色，比如刚才提到的绿宝石色

• 十进制：rgb(64, 224, 208)

十六进制：#40E0D0

常见的24bit颜色：

• 红色：rgb(255, 0, 0)，#FF0000

绿色：rgb(0, 255, 0)，#00FF00

蓝色：rgb(0, 0, 255)，#0000FF

黄色：rgb(255, 255, 0)，#FFFF00

洋红色：rgb(255, 0, 255)，#FF00FF

青色：rgb(0, 255, 255)，#00FFFF

白色：rgb(255, 255, 255)，#FFFFFF

黑色：rgb(0, 0, 0)，#000000

• 当红绿蓝全为0时，就是黑色
• 这个其实很容易理解：没有任何光，自然是一片漆黑
• 所以说：黑色是世界上最纯洁的颜色，因为它啥也没有，(づ｡◕ᴗᴗ◕｡)づ
• 相反，白色是世界上最不纯洁的颜色，因为它啥都有，而且都是满色（全是255）

更多颜色，可以参考颜色对照表，红绿蓝的比例不同，合成的颜色也就不同

颜色数量

如果位深度为n，那么每一个像素能显示2ⁿ种颜色。

• 所以，位深度为24时，每一个像素能显示2²⁴种颜色，也就是16777216种颜色（约1678万）

24bit颜色，也被称为是：真彩色（True Color），也就是常说的24位真彩

其他位深度

除了24bit，常见的位深度还有：

• 1bit：2种颜色，黑白两色

3bit：8种颜色，用于大部分早期的电脑显示器，红绿蓝各占1位

8bit：256种颜色，用于最早期的彩色Unix工作站，红色占3位、绿色占3位、蓝色占2位

16bit：红色占5位、蓝色占5位、绿色占6位

32bit：基于24位，增加8个位的透明通道

• 可以表示带有透明度的颜色
• 比如CSS中的rgba(255, 0, 0, 0.5)表示50%透明度的红色

不同位深度的对比

位深度越大，能表示的颜色数量就越多，图片也就越鲜艳，颜色过渡就会越平滑。下面的图片来源自Tech-ease。

• 24bit（能表示约1678万种颜色） 

8bit（能表示256种颜色） 

7bit（能表示128种颜色） 

6bit（能表示64种颜色） 

5bit（能表示32种颜色） 

4bit（能表示16种颜色） 

3bit（能表示8种颜色） 

2bit（能表示4种颜色） 

1bit（能表示2种颜色） 

格式

一说到图片，大家应该马上能想到拓展名为jpg、png、gif的图片文件。

每张图片都有自己的大小，你是否思考过：一张图片的大小是如何计算出来的？为什么dragon01.jpg的大小是288KB？

• 要想知道一张图片的大小是多少？首先得知道每个像素的大小是多少。

如果位深度是n，那么每个像素的大小就是n个二进制位

下图的分辨率是60x50，位深度是24，所以：

• 每个像素的大小是：24bit（3字节，1字节=8bit）

图片的理论大小是：(60*50)*(24/8)=9000B≈8.79KB

但实际上你会发现：在相同分辨率、相同位深度的前提下，把这张图片存成2种不同的格式（jpg、png），它们的大小是不同的，而且都小于理论上的8.79KB。

其实jpg、png都是经过压缩后的图片（具体的压缩算法和原理，就不在此讨论了，大家可以到网上自行搜索），所以它们的大小会比理论值偏小。

图片的压缩类型可以分为2种：

• 无损压缩
• 不损失图片质量
• 压缩比小，体积大
• 解压（显示）后能够还原出完整的原始图片数据，不会损失任何图片信息

有损压缩

• 会损失图片质量
• 压缩比大，体积小
• 解压（显示）后无法还原出完整的原始图片数据，会损失掉一些图片信息

压缩比 = 未压缩大小 / 压缩后大小

压缩类型	位深度
JPG（JPEG）	有损压缩	24bit
PNG	无损压缩	8bit、24bit、32bit
GIF	无损压缩	8bit

GIF

众所周知，gif是一种支持动画的图片，所以一般也叫作gif动态图，微信的动态表情包就是基于gif动态图。

gif动画的实现原理类似手翻书。

gif的动画原理是：

• gif内部存储了很多帧（张）静态图片

在短时间内，连续按顺序地呈现每一帧静态图片，就形成了动画的效果

像上面那张《悟空vs克林》的gif动态图，它内部存储了44帧静态图，只要按顺序从01.jpg播放到44.jpg，就能呈现出连贯的动画效果。

不管是gif动态图，还是手翻书，它们的动画原理其实都基于：视觉暂留（Persistence of vision）现象。

• 当人眼所看到的影像消失后，人眼仍能继续保留其影像约0.1~0.4秒左右，这种现象被称为视觉暂留现象

人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像，但当物体移去时，视神经对物体的印象不会立即消失，而要延续0.1~0.4秒的时间，人眼的这种性质被称为“眼睛的视觉暂留” 

我们日常使用的日光灯每秒大约熄灭100余次，但我们基本感觉不到日光灯的闪动，这都是因为视觉暂留的作用

在一帧图片消失在大脑中之前呈现下一帧图片，反复如此，就可以形成连贯的动画效果

• 电影的帧率是24fps
• fps：每秒的帧数，Frames Per Second

参考博客地址: https://www.cnblogs.com/mjios/p/14661561.html