阅读 225

前端认知:PPI、DPI、设备像素等概念

前言

关于PPI、DPI、DPR、物理像素、逻辑像素等这些名词概念大家有所耳闻,也应该翻找了许多资料,无奈各种资料描述不一,概念混乱,一笔带过,甚至以讹传讹。没有什么实感去好好理解这些概念。

于是我尽自己所能,尽量描述,让大家有个实质性地认识。

像素

小时候学过数学我们都知道,点成线,线成面。所以在计算机中,一个图像(面)是有一个个点组合而成的。而这个最小的不可分割的点,就是我们常说的“像素”,pixel。如我们常说的分辩率为1366px*768px,就是指宽有1366个像素,高有768个像素组合而成。

像素是一个抽象的概念,不是一个确切的物理量,而真不是一个“点”,点的描述是方便我们去理解。

像素是在数字领域(虚拟世界)的一个概念,厘米这些长度是现实世界的一个概念,要从虚拟往现实中转化对其的认知,需要借助“图像分辨率”。
当图片尺寸以像素(px)为单位时,我们需要指定其固定的分辨率,才能将图片尺寸与现实中的实际尺寸相互转换。毕竟我们总不能拿把尺子去计算机屏幕上量200px*100px的图片多少厘米吧。

这里说的“图像分辨率”是要用下面所说的用PPI作为单位的表达方式。PPI是英寸和像素的关系桥梁,因此可以把像素往英寸方向转化。

分辨率

可以从显示分辨率与图像分辨率两个方向来分类

显示分辨率

又称显示分辨率,是屏幕图像的精密度,是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的,显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示的信息也越多。

通常用每行像素数数目乘每列像素数目来表示分辨率。如1366px*768px。就是说屏幕水平方向上,有1366个像素点,在垂直方向上,有768个像素点。

屏幕分辩率是机器生产时已经确定好的了,即已经规定好了机器屏幕上是有多少个像素点组合而成。

但我们也知道,我们可以修改电脑的屏幕分辨率,这是怎么回事呢?

假设电脑的分辨率是1366px*768px,一般这个为电脑推荐你的分辨率,如果你私自调整成800px*600px,系统就会分配给你800*600个有效像素个数,也就是真实的色彩块。其他的个数呢,就由系统自作主张,通过一系列运算给你一个模拟色彩块,填充成正好1366*768个色彩块。

图像分辨率

图像分辨率则是单位英寸中所包含的像素点数,其定义更趋近于分辨率本身的定义。

从这个定义上来看很明显,跟PPI的含义是一样,所以PPI是用来表示图像分辨率的单位,如一图片分辨率为100ppi,含义是每英寸中所含有100个像素。

跟显示分辨率一样,图像分辨率也可以用“水平像素数×垂直像素数”来表达。其实我们知道ppi,也知道图像的宽高长度(如英寸为单位),就能算出图像是由多少个像素组成,即“水平像素数×垂直像素数”。

这里我们要知道,图像的显示宽高尺寸,不会受到PPI值直接影响,对于计算机的显示系统来说,PPI是没意义的,真正起作用的是图像的“水平像素数×垂直像素数”,只要“水平像素数×垂直像素数”一样,就算PPI不一样,图片同样显示一样的宽高尺寸。

此外,其实在不同的应用领域,图像分辨率也可以用不同的单位进行描述,如在打印领域中,也可以用dpi来描述。

分辨率比

这个常见于你用手机看视频,要求视频按照什么比例来展示。例如16:9,就是屏幕的高和宽的像素比例是16:9

屏幕尺寸

在真正了解这个含义之前,我常以为是指屏幕的宽高,就是屏幕的尺寸。实际上,在介绍产品时常说的,手机屏幕尺寸5.3英寸,电脑屏幕多少英寸之类的,不是指屏幕的宽高,而是指屏幕的对角线长度。

像素密度(PPI)

表示每英寸长度上有多少个像素,又叫像素数目。像素越多,代表画面更细腻更清晰。我们常说的视网膜屏幕(Retina),就是指PPI较普通屏幕要高。

ppi(pixels per inch)是图像分辨率的单位,图像ppi值越高,画面的细节就越丰富,因为单位面积的像素数量更多。

上述我们知道了屏幕尺寸是指对角线长度,如果又知道了屏幕的分辨率(即知道了宽高的像素值),那么宽高和对角线就形成了一个垂直三角形。利用勾股定理,可以算出对角线的像素值了。而又知道了对角线的英寸值,那么就可以算出屏幕的PPI值了

DPI

DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。这里说的点,类似打印的“墨点”,打印成像是由这些墨点成线,线成面这样组合而成。

它是一个输出分辨率(打印分辨率),常用于描述打印机的打印精度,一般来说,DPI值越高,表明打印机的打印精度越高。它表示每英寸所能打印的点数,即打印精度

一般的激光打印机的输出分辨率是300dpi-600dpi,印刷的照排机达到1200dpi-2400dpi,常见的冲印一般在150dpi到300dpi之间。

图像的像素、打印分辨率和打印尺寸的关系如下:

图像的横向(竖向)像素数=打印横向(竖向)分辨率×打印的横向(竖向)尺寸

例如:希望打印照片的尺寸是4*3inch,而打印分辨率横向和竖向都是300dpi,则需要照相机采集的像素数至少为(300*4)*(300*3)=1080000像素,约一百万像素。采集的像素数过低(采集图像机器的PPI决定)会降低图像的打印质量,过高也不能提升打印质量。

ppi和dpi经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说,“像素”只存在于电脑显示领域,而“点”只出现于打印或印刷领域。

设备像素、设备独立像素、DPR

设备像素

device pixel(s),简称dp(s),又称物理像素。我们把一台设备的显示器,看似一个图片的话,它要成像,不还是由一个个最小单位“点”组合成。那这种“点”(实际上是机器的发光点,是物理机件),就是设备像素。设备像素在机器生产时就确定好了,是固定的,不能改变的。

设备独立像素

device independt pixel(s),简称dip(s),又称逻辑像素。首先我们要知道,为啥要出现这么一个概念,身为前端工程师的你,常写css对吧,css里常写px单位吧。css里这些px值,就是指的是设备独立像素。

在没出现视网膜屏幕前,其实并没有设备像素和设备独立像素的区分,因为他们都是一样的。你在css里写多少px,就是占用了设备像素多少个像素点。但是当出现了视网膜,甚至更高PPI值的屏幕后,屏幕上分布的像素点越来越多,如果你仍然用css的1px来表示设备上的1px物理像素点,那么在一个低ppi值的屏幕上和高ppi值的屏幕上,你编写的同样一个css里的px值,在两个屏幕上显示就很大差别了,如在低ppi屏上正常显示,另一个就会十分小。为了解决这个问题,就区分出两个概念了。

设备独立像素,就是把组成设备显示的像素点重新编排,这个编排结果符合开发人员认知上的px情况,而不是设备真实的物理像素。就是在设备像素上抽象了一层,以固定数量的设备像素来表示一个设备独立像素,重新构成设备显示的像素点。
因此,我们写css时的px值,就是基于这个设备独立像素上进行的。

至于要以多少个设备像素组成一个设备独立像素,还引入了一个“设备像素比(Device Pixel Ratio),简称DPR的概念来解释了。

设备像素比(DPR)

记住该公式:

DPR = DP / DIP, 即,设备像素比 = 设备像素 / 设备独立像素

为啥要引入该概念呢? 他主要是告诉设备显示内容时,1设备独立像素应该包含多少个设备像素,或者说,多少个设备像素显示成1个设备独立像素(即显示成你css中写的那个px值)。

如DPR为2,即1设备独立像素应该包含2个设备像素。

这样的话,这就符合我们编写css的逻辑了,我们要求浏览器显示1px宽的内容,因此不论在低ppi设备上还是高ppi设备上,它还是显示成1px(你用开发者工具审查元素看看他的px值,不论在什么设备都是1px)。但是实际上这个1px的所含的设备像素是不一样的。

当然DPR并不是开发者所能控制的,是设备生厂商就决定了的。DPR和PPI有什么关系呢?他们之间没有很明确的计算关系,毕竟是人为决定的,他们就把一个DPR值对应着某个范围的PPI。即生厂商告诉业界人士,ppi达到多少是高清屏,此时对应的dpr是多少。

其实说白了,就是这个DPR比例,设备会根据它来协调设备独立像素与设备像素的比例关系,让每个设备都显示一样的设备独立像素,从而达到我们css上统一认知的px值。

未经允许,请勿私自转载

关注下面的标签,发现更多相似文章
评论