关于像素，你想知道的都在这里
小友图形学入门，交流后才发现他被知乎、百度误导至深，甚至很多高赞回答自己也没有搞清楚基础概念。很多教程也是一笔带过，这就造成中文互联网上有关像素的误读越来越多，甚至随着时间的推移被无数小白奉为真理。
如果你是小白，这篇文章可能能解释你关于像素的所有疑问，如果你已经身经百战，这篇文章可能能带来一些新的理解。
在说像素之前我们先明确一个最基础的概念：
矢量图（vector graphics）和点阵图（raster graphics）
计算机只能记录处理这两种类型的图像。
矢量图的基本组成单位是对象，也就是我们直观感受到的图形，最原始的矢量图对象包括：
- 线段（line）、多边形曲线（polyline）、多边形（polygon）都会被记录成多个有序坐标
- 贝塞尔曲线（Bézier curve），简单来说就是用n个点来控制形状的n阶曲线，常用来创建字体和路径，贝塞尔曲面同理，只是曲线的多维拓展
- 圆（circle）和椭圆（ellipse）
这里的点的坐标都基于图像本身的大小，比如在一个给定坐标系上表达一个圆心为（50，50）、半径为10、且圆圈宽度为1、颜色为蓝、内部填充红色的一个圆，那么可以写为：
<circle cx="50" cy="50" r="10" stroke="blue" stroke-width="1" fill="red" />点阵图也就是栅格图，或者叫位图，它的基本组成单位是图像像素，和矢量图储存一个个对象不同，点阵图储存的是一个个像素，后续本文提到的图像指的都是位图。
说完矢量图和点阵图的区别，我们步入正题：
1、什么是图像像素
图像像素（image pixel）是构成位图的最小单位，它记录的是颜色和位置信息，一个像素只能有一种颜色，而一堆像素的集合就是我们看到的图像。
要明确图像像素不是一个可以客观衡量的物理单位，它既不是长度单位也不是面积单位，而是像点一样构成了长度，填充了面积。但是和点不一样的是，最终呈现出的图片总是由有限个像素构成，所以客观上单个像素存在面积和长宽。但它并不一定是正方形，甚至并不一定是方形，理论上图像像素可以是任何能填满图像的形状，比如六边形、三角形，但不能是圆形。当然我们实际使用中，像素往往都是矩形。
举个例子，现在有一个10英寸*10英寸大小的川普彩色头像图片，它既可以由100个像素构成，也可以由1万个像素构成，很显然虽然都是1像素，但两种构成方式下1像素的大小是不一样的，记录的信息也是不同的。网上盛传的“1像素=0.26458厘米”是对像素的极大误解。
2、什么是屏幕像素
屏幕像素（screen pixel）是显示设备成像的最小单位。和图像不同，我们看到的屏幕像素都是真实发光的物理元件，既然是物理原件就不可能无缝填满整个屏幕，当然像素大小、形状也可以自由定义，我们使用的显示器、电视、手机屏幕都是一样。两个相邻像素之间的距离就是点距（dot pitch），点距越小成像越细腻，近距离使用体验越好。所以即使是一张矢量图，使用显示器近距离观看，还是会看到明显的像素颗粒感，这是显示器决定的。
3、什么是像素深度
像素深度就是我们常说的色深（color depth）或者位深（bit depth），它直接影响了像素颜色的精度与广度，也就色域。我们都知道计算机存储信息的最小单位是位（bit），二进制嘛，每个位非0即1，位数越多，能表达的信息也越多。比如1bit，那么只能表达 2^{1} 种变化，8bit就能表达 2^{8}=256 种。
以我们最常使用的RGB系统为例，所有的颜色都是通过三基色的叠加表现出来的。但是同样是红色，不同的亮度给人的视觉感受是不一样的，亮度划分越精细，最终的色彩呈现就越细腻。基色的从明到暗的变化等级就是灰阶（gray level），8bit就表示每种基色有256种明暗变化。RGB模式下，每种基色有256种变化，那么总共就可以表现出 256\times256\times256=16,777,216 种颜色。
很显然像素深度越大，能表现的颜色越多，所需要的储存空间也越大。
4、什么是像素密度
接着一开始提到的川普彩色头像例子，很显然100个像素你可能只能看到是个人，说不定还有点像郭德纲，而1万个像素能让你一眼认出这是川普，甚至连皱纹都清晰可见。这里就引申出了像素密度（Pixels Per Inch）的概念，也就是我们常说的ppi，单位：像素/英寸。
通常我们会用像素密度ppi来衡量显示屏的好坏。
一个显示屏横着排列了100个屏幕像素，纵列了200个像素，屏幕尺寸（对角线长度）是2英寸，那么根据ppi的计算公式：
PPI=\frac{\sqrt{a^2+b^2}}{d} =\frac{\sqrt{50000}}{2}\approx111.8
a=图像长度的像素数，b=图像宽度的像素数，d=屏幕尺寸（英寸）
这个公式代表着什么呢？有人把它解释为一个1英寸*1英寸的图像对角线上的像素个数，有人把它解释为一个1英寸*1英寸的图像所包含的所有像素个数，这都是错误的。从公式直观来看是对角线上每英寸的像素数，可是对角线又不是完美地平均穿越像素，对角线上的像素要怎么计算呢？对于这个公式我们有太多的疑问。
回归到ppi的计算公式：
a=图像长度的像素数，b=图像宽度的像素数，d=屏幕尺寸（英寸）
da=图像长度（英寸），db=图像宽度（英寸）
令 a=k1*da, b=k2*db
则 PPI=\frac{\sqrt{a^2+b^2}}{d}=\frac{\sqrt{k1^2da^2+k2^2db^2}}{\sqrt{da^2+db^2}}=\sqrt{\frac{k1^2da^2+k2^2db^2}{da^2+db^2}}
若像素为矩形像素，即 \frac{k1}{k2}=\mu 时， PPI=k2*\sqrt{\frac{\mu^2da^2+db^2}{da^2+db^2}}
若像素为正方形像素，即 \mu=1时， PPI=k1=k2
回归算式的几何含义，μ是单个矩形像素的长宽比，μda就是用宽边的像素长度*长边的像素数得到的一条长边，这是一条因为像素宽高比不等于1而虚构出来的边，为的是可以用同一个像素长度来计算像素/英寸，不然宽边的像素/英寸和长边的像素/英寸是无法参照的。
下图较为直观地表示了这种关系， PPI=k2*\frac{d_{L1}}{d_{L2}}
5、什么是分辨率
分辨率家族实在过于庞大，这里只区分显示器分辨率、屏幕分辨率和图像分辨率这三种我们日常最容易混淆的分辨率。
显示器分辨率（display device resolution）是一种物理分辨率，显示器在出厂时横排排列多少个像素点、竖排排列多少个像素点都是已经固定了的，比如我们常见的显示器参数中的分辨率1920*1080就是说这台显示器横排排列了1920个像素，竖排排列了1080个像素。
屏幕分辨率（screen resolution）也叫显示分辨率（display resolution），和显示器分辨率只有一字之差但含义不同。屏幕分辨率是显示设备当前使用的分辨率。简单来说，显示器分辨率是显示器的最大屏幕分辨率，但是实际使用过程中可以随时调整使用的分辨率，这里的分辨率可以小于显示器分辨率，这就是屏幕分辨率。
如果使用显示器分辨率作为屏幕分辨率，每一个物理像素都会显示一个像素，而如果使用的屏幕分辨率小于显示器分辨率，显示设备会用多个物理像素来模拟一个像素，由于设置的分辨率宽高比的不同还会加入一些算法去模拟像素，这些模拟都是会带来画质损失的，这也是为什么高分屏上开低屏幕分辨率，反而没有原生的低分屏显示效果好。
这里顺便“证实”一个谣言，常有谣传高分屏上开低屏幕分辨率可以省电，从结果看这是对的，调低分辨率可以省电，但是省的不是屏幕的电而是显卡的电。调低分辨率每一个物理像素还是在发光，并不会因此休息，但是低分辨率下显卡可以通过更少计算就输出画面。
图像分辨率（image resolution）有两种表示方式：一种常用于平面设计中，就是直接使用像素密度表示；另一种则广泛应用于计算机图形学，采用长宽的像素数乘积表示。
