图像

一、像素

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

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

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

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

二、RGB颜色模型（三色光模式）

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

三原色合成

三、位深度（色彩深度）

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

位深度越大，能表示的颜色数量就越多，图片也就越鲜艳，颜色过渡就会越平滑。

常见位深度：

• 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%透明度的红色

24bit位深度的含义

• 每一个像素都会使用24个二进制位来存储颜色信息
• 每一个像素的颜色都是由红（Red）、绿（Green）、蓝（Blue）3个颜色通道合成的
• 每个颜色通道都用8bit来表示其“含量”（值），取值范围是：
  • 二进制：00000000~11111111
  • 十进制：0~255
  • 十六进制：00~FF

24bit颜色的表示形式

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

• 十进制：rgb(64, 224, 208)
• 十六进制：#40E0D0

颜色数量

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

• 所以，位深度为24时，每一个像素能显示224种颜色，也就是16777216种颜色（约1678万）
• 24bit颜色，也被称为是：真彩色（True Color），也就是常说的24位真彩

四、图像压缩

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

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

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

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

五、GIF

gif是一种支持动画的图片，所以一般也叫作gif动态图

gif的动画原理是：

• gif内部存储了很多帧（张）静态图片
• 在短时间内，连续按顺序地呈现每一帧静态图片，就形成了动画的效果

视觉暂留（Persistence of vision）现象。

• 当人眼所看到的影像消失后，人眼仍能继续保留其影像约0.1~0.4秒左右，这种现象被称为视觉暂留现象
• 人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像，但当物体移去时，视神经对物体的印象不会立即消失，而要延续0.1~0.4秒的时间，人眼的这种性质被称为“眼睛的视觉暂留”
• 我们日常使用的日光灯每秒大约熄灭100余次，但我们基本感觉不到日光灯的闪动，这都是因为视觉暂留的作用
• 在一帧图片消失在大脑中之前呈现下一帧图片，反复如此，就可以形成连贯的动画效果
  • 电影的帧率是24fps
  • fps：每秒的帧数，Frames Per Second