前端vs图片：2 图片深度、图片分类等基本信息

色彩深度

一般聊起图片的深度，指的都是图片的色深，即色彩深度

来自色彩深度-百度百科
色彩深度在计算机图形学领域中表示在位图或者视频帧缓冲区中储存1像素的颜色所用的位数，它也称为位/像素（bpp）。色彩深度越高，可用的颜色就越多。

色彩深度是用“n位颜色”（n-bit colour）来说明的。若色彩深度是n位，即有2的n次方种颜色选择，而储存每像素所用的位数就是n。

总结一下，色彩深度（Color Depth）为图像的一个像素可以表示多少个bit的颜色
色彩深度越高，可用的颜色就越多，表现出来的画面就越精细

web常见色彩深度

• 8位色，256种颜色。经典的gif图片，适用于比较早期的设备
• 16位增强色，16位彩色，65536种颜色。
• 24位真彩色，约1680万种颜色
• 32位真彩色，在24位真彩色图像的基础上再增加一个表示图像透明度信息的Alpha通道。
  • 32位真彩色并非是2的32次方的色数，它其实也是1677万多色，不过它增加了256阶颜色的灰度,为了方便称呼，就规定它为32位色

图片位深

除了上面的图片色深，其实图片还有一个位深度，简称位深
位深度指的是存储每个像素所用的位数，主要用于存储，单位bit
图片位深与色彩模式有关，比如常用的ARGB_8888，位深32位（4字节，8bit = 1byte ）

图片位深与内存占用

• png/jpg等图片格式在显示之前都需要经过解码生成一张位图，之后根据位图创建纹理传给GPU做渲染
• 位图内存消耗= 图片长度（像素） * 图片宽度（像素） * 位深（单位：字节）
• 现在假如有一个图片是600*800的，文件大小100KB
• 内存所占大小 600 * 800 * 4 byte = 1875KB = 1.83M，由此可见，内存占用大小比图片本身大的多
• 对于GIF图片因为本身有多帧，所以最终的内存消耗为单帧内存x帧数

如何查看图片的色深、位深

在windows电脑上，右击查看图片的属性，可以查看到位深度的

Mac电脑上，预览打开图片 - 工具 - 显示检查器，也能看到深度

不过这个深度始终是8，应当是有问题的，有待以后考证
至于色彩深度，这个没有找到比较便捷的查看方式

图片分类 - 栅格图 vs 矢量图

• 栅格图：是基于像素构成的图像，又叫位图、点阵图。web常见的jpg、png、gif、webp等图片格式等都属于此类
• 矢量图：使用点、线、面来构图，具有高分辨率和缩放功能。 SVG就是一种矢量图。

图片分类 - 有损压缩 vs 无损压缩

• 无压缩。数据无压缩，能准确地呈现原图片。代表：bmp
• 无损压缩。压缩算法对图片的所有的数据进行编码压缩，保证图片的质量+降低图片的尺寸。代表：png
• 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。代表：jpg。

图片的Exif等信息数据

正常我们拿手机/相机拍的照片，除了我们看到的图像之外，还包含了一堆Exif信息，也就是照片的属性信息+拍摄数据，如下图左
除了Exif信息，图片还包括gps信息，以及设备信息等
如上这些信息，包含了作者的数据隐私，占据了图片的大小，而且在web界面中通常没什么用，因此图片优化工具，会将这部分信息删掉，如下图右