一. 图片

  • 每张图片都有N个像素组成（N>=1）

  • 如果一张图片的分辨率是W x H, 那么：

  1. 每一行都有W个像素，共有H行，总计W*H个像素

  2. 宽度是W像素，高度是H像素

  • 每一个像素都有其独立的颜色！！！

二、RGB颜色模型

"RGB颜色模型"

  • RGB Color Model: RGB颜色模型（三原色 光模式）
  1. R+G=Y
  2. R+B=Magenta洋红色
  3. G+B=Cyan青色[saɪæn]
  4. R+G+B=W

思考：每一个像素的颜色信息是符合存储的？

  • 位深度Bit Depth == 色彩深度（色深）Color Depth

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

  • 常见位深度是：24 ,表示每一个像素都会使用24个二进制位来存储颜色信息；

  • 因为每一个像素的颜色都是用R、G、B这3个颜色通道合成的；

  • 每个颜色通道都用8bit（位）表示其“含量”值（范围0000 0000 — 1111 1111，即0-255或00-FF）：

    颜色 rgb表示 十六进制表示
    红色 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

三、图片格式：

位图与矢量图的区别：

分辨率：位图的质量与分辨率有关。而矢量图的质量与分辨率没有任何关系。

绘图工具：矢量图一般是用Adobe公司的Illustrator，而位图则使用的是Photoshop和Windows系统所自带的画图。

性质：位图是由像素所组成的点阵图像，矢量图是使用直线和曲线来描述图形。

  1. png、jpg、gif三种格式称为位图

  2. svg：矢量图

    • 图片大小的计算：

    • 理论值：

      24位深度下，每个像素占3个字节，按kb计算: 像素字节 = (50 * 60 ) ( 24 / 8 ) = 9000b = 8.79kb(9000b/1024)

      注：jpg、png、图片的实际大小都小于理论计算值，因为他们都是经过算法压缩过的图片。

  3. 图片的压缩格式

    • 无损压缩：解压(显示时)后能够还原图片的原始数据：不损失图片质量；压缩率底，图片体积大
    • 有损压缩：损失图片质量；压缩率高，图片体积小
    图片类型 压缩类型 位深度
    JPG/JPEG 有损 24bit
    PNG 无损 8\24\32bit
    GIF 无损 8bit

  4. GIF:支持动画：实现原理类似于手翻书，即：

    • gif内部存储了很多帧图片
    • 短时间内连续按顺序呈现每一帧图片就会实现动画效果
    • 基于：视觉暂留现象（persistence of vision），延续0.1~0.4秒左右
    • 应用：早起电影的帧率：24fps （每秒的帧数）frames per second