【秒懂音视频开发】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,那么每一个像素能显示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万种颜色)
24bit -
8bit(能表示256种颜色)
8bit -
7bit(能表示128种颜色)
7bit -
6bit(能表示64种颜色)
6bit -
5bit(能表示32种颜色)
5bit -
4bit(能表示16种颜色)
4bit -
3bit(能表示8种颜色)
3bit -
2bit(能表示4种颜色)
2bit -
1bit(能表示2种颜色)
1bit
格式
一说到图片,大家应该马上能想到拓展名为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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2020-04-15 简单易懂的快速幂取模算法
2013-04-15 Core Animation2-CABasicAnimation
2013-04-15 Core Animation1-简介