你真的了解「像素」吗?

配图源自 Freepik

一切都从「像素」开始...

维基百科词源可知,像素 pixel 一词由 pictureselement 两个词的简写形式 pixel 结合而来。

像素,在数字成像中是不可分割的最小单元,可分为两类:

  • 虚拟像素:其大小是任意的、可变的,没有实际的物理尺寸大小。
  • 物理像素:通常用于描述手机、电脑、显示器等设备的像素,它在设备出厂时已经确定,是不可变的,具有实际的物理尺寸大小(一般使用英寸表示)。

物理像素(即屏幕像素,screen pixel)是显示设备成像的最小单位。我们「肉眼」看到的物理像素都是真实的物理发光元件,既然是物理元件,就不可能「无缝」填满整个屏幕,而且像素(即元件)大小、形状也是可以自由定义的,在屏幕上多是方形或者接近方形的。两个相邻像素之间的距离就是点距(dot pitch),点距越小成像越细腻,近距离使用体验越好。

但并不是说像素紧密排列就意味着「视觉效果」更好,比如说户外硕大的 LED 广告牌,是可以明显地看到黑色缝隙的,原因是它们的元件排列是有间隙的。

虚拟像素到物理成像,是有一定的映射关系的,具体由显示设备或打印设备来决定。

分辨率

我们发现,通常描述「分辨率」的单位也叫像素,但有什么区别呢?

  • 物理屏幕分辨率(Physical screen resolution):泛指电视机、电脑显示器、手机屏幕等显示设备的分辨率,它在设备出厂时便以确定,不可修改,而且是有着具体的物理尺寸大小。

    常说的 1920 × 1080 分辨率的手机,指的是显示器横向排列了 1080 个像素,纵向排列了 1920 个像素。

  • 显示分辨率Display resolution):也称作屏幕分辨率(screen resolution),它没有具体的物理大小,是可以修改的。

    常说的“调节电脑屏幕分辨率”,修改的就是显示分辨率。当显示器分辨率与屏幕分辨率一致时,表示一个虚拟像素将会用一个物理像素来显示,此时显示效果是最佳的。当二者不相同时,将有相关系统使用算法去模拟像素,而这些模拟处理都会带来画质的损失。

  • 还有很多分类,比如 Image resolution、Printing resolution、Sensor resolution 等等,详看 Wiki

以上描述源自

请注意,不能单凭显示器分辨率来计量屏幕的细腻程度。试想,同样是 1920 × 1080 分辨率,一个放在 5.5 英寸的手机屏幕上,一个放在 40 英寸的电视机屏幕上,细腻程度会一样吗?

屏幕尺寸

这玩意本来就是外国人发明的,因此常用单位「英寸」来描述。单位换算:1 英寸 = 2.54 厘米(cm)。

请注意,英寸是「长度」单位,而不是「面积」单位。

比如 4.7 英寸的手机,这里的 4.7 英寸指的是手机显示屏「对角线」的长度,而不是显示器的宽度或者高度,更不是面积。对,就是数学中直角三角形的那个斜边,勾股定理还记得吧。

下文将会提到的像素密度(PPI)表示「每英寸」屏幕所拥有的像素数,也是指对角线的长度,而非面积大小。

像素密度

像素密度(Pixel density),通常用来计量电子设备屏幕细腻程度。

像素密度的单位一般是 PPI(Pixel Per Inch,每英寸像素),表示单位长度上的像素数量(注意,不是单位面积的像素数量)。

电子设备的 PPI 取决于「屏幕尺寸」和「显示器分辨率」,计算规则如下:

其中,

  • dp 为屏幕对角线的分辨率
  • di 为屏幕对角线的长度(单位为英寸)
  • wp 为屏幕横向分辨率
  • hp 为屏幕纵向分辨率

以 4.7 英寸的 iPhone 7 为例,分辨率为 750 × 1334,像素密度约为 326PPI(在线换算)。需要注意的是,应以设备「实际尺寸」换算,而非厂商「宣传尺寸」,二者之间可能会有一定的偏差,自然计算结果就会产生误差。比如:

「数码相机」与手机等屏幕不同的是,数码相机的屏幕通常用「点色数」来描述,而不是像素。每个像素包含了三个点色数(分别是红、绿、蓝三原色)。以佳能 50D 相机显示屏为例,它有 920,000 个点色数(应该是约数),即 92 万色,通过这个数据,可以推算出屏幕为 307,200 个像素,分辨率为 640 × 480。因此,相机显示屏的点色数和像素常被人混淆(源自维基百科)。

还有,用于量度「打印机」打印精细程度的计量单位是 DPI

DPI(Dots Per Inch,每英寸点数),表示单位长度上可打印的点数。

虽说 PPI 和 DPI 两者所用的领域存在区别,「像素」只存在于屏幕显示领域,而「点」只出现于打印或印刷领域。但由于 PPI 也会影响到图片的打印质量,因此容易出现混用或混淆的情况。比如,在 SONY Support 的一篇文章中指出:

Much of the confusion between these two terms happens for a couple of reasons. First, even though PPI refers to the resolution of an on-screen digital image, it can also affect the quality of the final printed picture. Second, even some professional print services request that pictures must be at a certain DPI level before they can be printed; what they normally mean is PPI, not DPI - thus, this adds to the confusion.

由于本文的重点讨论的是显示屏幕领域像素之间的关系,而非打印领域,加之本人对此并不是很了解,因此不作过多介绍,点到为止,哈哈!

设备独立像素

DIPdevice-independent pixel,设备独立像素;density-independent pixel,密度独立性),是一种长度单位, 常见简写形式为 DP 或 DIP。

在 Android 开发中很常见,一种基于屏幕密度的抽象单位,这些单位与 160 dpi 屏幕相关(通常 Android 设备的分辨率是 160 的整数倍)。在 Android 操作系统上,1dp 相当于 160dpi 屏幕上的一个物理像素,dp 与物理像素的比例会随着屏幕密度而变化,但不一定成正比。

而在 Web 设计中应以 px 作为单位。其中 Material Design 设计指南中表示:

When designing for the web, replace dp with px (for pixel).

CSS 像素

我们知道,Web 标准由 W3C(The World Wide Web Consortium) 制定,在 CSS 标准中,长度单位包括「相对长度」和「绝对长度」两类。其中 px 是绝对长度单位之一(详见),

但真的「绝对」吗?

网上很多文章提到 px 归为「相对单位」, 原因有二:

  1. 不加思索,人云亦云。
  2. 所选参照物不一样。由于 CSS 像素与物理像素不一定是 1 : 1 的关系,它跟屏幕的像素密度有关,比如在 iPhone 7 下 1 × 1 的 CSS 像素,将会使用 2 × 2 个物理像素去渲染。在 Web 领域通常使用「设备像素比」(Device Pixel Ratio,DPR)去描述 CSS 像素与最终显示成像的关系。

我看到一句话「A pixel no longer equals a pixel」,在当下高清屏大行其道的时代,这句话就成立了,一个虚拟像素不再等于一个物理像素。

未完待续...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 161,601评论 4 369
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,367评论 1 305
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 111,249评论 0 254
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,539评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,967评论 3 295
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,929评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,098评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,825评论 0 207
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,609评论 1 249
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,796评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,282评论 1 265
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,603评论 3 261
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,277评论 3 242
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,159评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,959评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 36,079评论 2 285
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,874评论 2 277

推荐阅读更多精彩内容