写于开始音视频学习之前
马上就要开始学习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，那么每一个像素能显示2n种颜色。
-
所以，位深度为24时，每一个像素能显示224种颜色，也就是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