图片8位, 16位，24位，32位原理，以及如何进行补位互转

写在前面：之前一直没有这个概念，以为像素就是十六进制如 #FFFFFF，或者rgb(255,255,255) 即可实现颜色定义，理解相当肤浅，接触到一个物联网项目，写底层的童鞋让我把16位如 0*FFFF转为24位去显示在浏览器，同时下发给硬件的时候再转回十六位给他，瞬间干懵逼，特意花了两个小时去查阅相关资料，终于有了一知半解，汇总以备忘。

引用了CSDN与知乎优秀总结：

博主：丁香树下丁香花开：8位, 16位，24位，32位图片显示原理及对比https://blog.csdn.net/csdn66_2016/article/details/82850695文章浏览阅读5.9w次，点赞50次，收藏169次。我们都知道一张图片可以保存为很多种不同的格式，比如bmp/png/jpeg/gif等等。这个是从文件格式的角度看，我们抛开文件格式，看图片本身，我们可以分为8位， 16位， 24位， 32位等。单击右键，属性->详细信息即可查看图片位深度：8位： 2^8 = 2^2(B) 2^3(G) 2^3(R) = 256 (256色) 可以总共显示256种颜色16位：..._24位图片https://blog.csdn.net/csdn66_2016/article/details/82850695

博主：wkd_007 ：bmp位图格式详细介绍-1/4/8/16/24/32bit、存储格式等bmp位图格式详细介绍-1/4/8/16/24/32bit、存储格式等_bmp文件详解-CSDN博客文章浏览阅读1.5w次，点赞23次，收藏88次。详细介绍bmp位图文件的四个部分：位图文件头、位图信息头、调色板、位图数据，并且结合位图文件数据举例说明了什么是位图文件，bmp位图看这篇文章就差不多了_bmp文件详解https://blog.csdn.net/wkd_007/article/details/128214157

以及知乎：16位色对24位色的映射？ - 知乎

总结一些概念性知识点：希望能从概念，实操，代码说明上对图片位数理解更深入一些

一，位图

位图图像（bitmap），亦称为点阵图像或栅格图像，是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增大单个像素，从而使线条和形状显得参差不齐。

二，位深

常用的8位图，24位图，其实就是在说这个图像，是用了多少位二进制来表示色值。位深指的就是二进制的位数（bit）。
比如，位深只有1位的话，那就只能用0和1表示颜色，也就是0（黑）和1（白）两种颜色。
通常计算机用一个字节（8位）来控制一种颜色的强度，那要表示R、G、B就需要24位（3*8），这也是最常见的图像位深。【引自知乎：16位色对24位色的映射？ - 知乎】

三，不同位深图片的存储原理

8位： 2^8 = 2^2(B) 2^3(G) 2^3(R) = 256 (256色) 可以总共显示256种颜色

16位：2^16 = 2^5(B) 2^6(G) 2^5(R) = 65536 可以总共显示65536种颜色

24位：2^24 = 2^8(B) 2^8(G) 2^8(R) = 16777216 可以总共显示16777216种颜色

32位：Alpha透明度 + 24位

区别：

当8或16位深度时，单个原始颜色（R/G/B）最大只能表示为（0~2^3）/（0~2^6），无法满足（0~0xff）的范围，所以显示的颜色范围有限。

当24位深度时，使用24bit显示一个像素点，由8bit Red， 8bit Green， 8bit Blue组合颜色而成，每一个原始颜色（R/G/B）都可以完全显示（0~0xff），所以24位及以上，我们就叫做真彩色

当32位深度时，与24位相同，可以显示所有的颜色，同时多了一个透明度值。

【以下位图介绍引自知乎：16位色对24位色的映射？ - 知乎】

1、24位图

24位图每个像素占用3个字节，每一个原始颜色（R、G、B）都使用8位表示，因此占用24位（8*3）。每个原始颜色都能完整显示256阶颜色，其表示的色彩有16777216种颜色（256^3）。由于人眼最多可以识别100多万种颜色，因此也将24位叫做真彩色。
图中像素的信息为:1111 0011 1110 1010 0011 0111

2、16位图

16位图每个像素占用2个字节，也是通过RGB数值来表示颜色，与24位图原理类似。根据二进制的特征，低位数值的变化对于整体数值影响不大，因此将8位缩减，而达到减少字节的效果。在实际显示时，通过特定的转换方式将16位再扩展为24位。概括来说，就是移位补0的方式。
常见的16位图有两种格式，分别为RGB565、RGB555。

RGB565

RGB565的存储信息方式就是R-5位、G-6位、B-5位。565存储方式下，示例的像素点信息为

转换为24位时，R-后3位补0、G-后2位补0、B-后3位补0：

实际显示的颜色信息为：1111 0000 1110 1000 0011 0000，换算为RGB（240，232，48）。

RGB555

RGB555的存储信息方式是，最高位不用，每个颜色都占5位。555存储方式下，示例的像素点信息为：

转换为24位时，每个颜色后3位补0，换算为RGB还是（240，232，48）。

对比色值可以看到，转换之后与原始颜色的RGB数值差异是较小的。只是在有颜色过渡的情况下，会由于丢失细节数据，而导致过渡相对不平滑。但对于本身像素间差异就比较大的图片不会有太大影响，但每个像素点可以节约1个字节的空间，对于大尺寸图片来说存储优势还是比较明显的。

3、8位图

8位图的像素信息与以上二种是完全不同的，采用的是索引色，单个像素存储的值不是直接的RGB色值，而是一个映射关系。这里插一个概念：如果像素信息就是RGB色值，叫做直接色。
8位图的图片信息中先存储了一个256行的色彩数列，单个像素信息存储的值指向对应的行，读取这一行存储的RGB值进行显色，因此称为索引色。假设某一个像素的的值为4，那这个像素就与数列的第4行形成映射，在屏幕显示的实际颜色是就是第4行的RGB值。