【秒懂音視訊開發】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