【秒懂音视频开发】17_重识图片

要想学好音视频，首先得先好好研究一下图片。

像素

下图的分辨率是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个二进制位来存储颜色信息

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