Pixels And Colors

yahone chow
3 min readMay 20, 2020

Pixels

屏幕由若干个像素排列组成

tips: Physical pixels are not always squares ( in difference display devices ).

https://apenasimagens.com/en/pixel-anatomy/
https://www.quora.com/True-or-false-a-pixel-is-a-single-square-on-computer-screen
https://www.quora.com/True-or-false-a-pixel-is-a-single-square-on-computer-screen

Native resolution i.e physical resolution 原始解析度或物理解析度

The native resolution of a screen refers to the physical number of vertical and horizontal pixels contained within it. More plainly, the number of dots on the screen that can change color.

iPhone 11 为例:

https://www.dimensions.guide/element/apple-iphone-11

diagonal 6.1
长宽比为 19.5 : 9
通过计算得 长宽为 2.56 和 5.54
pixel resolution 1792*828
ppi 326

ppi的计算
sqrt(1792² + 828²) / 6.1≈323.61

手机 ppi 超过了 300 所以就是视网膜屏🙃

此处的 1792*828 即 Native resolution (physical resolution)

由此,一块屏幕上的像素为 physical pixel,即物理像素。

Logical pixel 则是抽象的,数据化的,无关于 physical pixel 的。在我们决定在哪种显示设备以何种显示形式呈现它之前,它只是一堆数据而已。

ppi (Pixels per inch):

https://en.wikipedia.org/wiki/Pixel_density#Calculation_of_monitor_PPI

dpi (dots per inch) 是一个量度单位,用于点阵数位影像,意思是指每一英寸长度中,取样或可显示或输出点的数目。

如一台打印机最高 dpi 为 300, 在 1 inch * 1 inch 的方块内的有效点为300*300 个。

Monitors do not have dots, but do have pixels; the closely related concept for monitors and images is pixels per inch or PPI.

dp or dip:

on the Android operating system a device-independent pixel is equivalent to one physical pixel on a 160 dpi screen,[1] while the Windows Presentation Foundation specifies one device-independent pixel as equivalent to 1/96th of an inch.[2]

As dp is a physical unit it has an absolute value which can be measured in traditional units, e.g. for Android devices 1 dp equals 1/160 of inch or 0.15875 mm.

While traditional pixels only refer to the display of information, device-independent pixels may also be used to measure user input such as input on a touch screen device.

可以认为 1dp(dip) = 1/160 of inch = 0.15875 mm

PT 印刷单位

十八世纪以来, 1pt 的值 从 0.18mm 到 0.4mm 不等,到了二十世纪八九十年代,DTP point(DeskTop Publishing point) 被创建,其被定义为 1⁄72 international inch (约 0.353 mm)。

dpr (device pixel ratio)

此安卓设备的物理分辨率(physical resolution)为 1080 * 1090

系统决定将界面渲染到屏幕的像素比,即为逻辑分辨率(Logical resolution)

通过 display 的设定,我们可以实现不同的逻辑分辨率以及dpr。

1080 / 424 ≈ 2.5471698113 dpr

1080 / 360 = 3 dpr

1080 / 320 = 3.375 dpr

i.e Physical Resolution w h divide Logical Resolution w or h

而不同设备的逻辑像素是不同的,比如在web应用中,320逻辑像素宽度和420宽逻辑像素宽度的设备在呈现一张被设定为100虚拟像素(px)的图片时,呈现效果相对于 viewport width 的比例是不同的,为了较为精确的跨设备还原设计稿,于是就有了js动态计算宽度, rem 以及 vw 等技术。

Colors

Color depth 颜色深度

Color depth or colour depth (see spelling differences), also known as bit depth, is either the number of bits used to indicate the color of a single pixel

— from wiki

不同色深时一个像素点能表示的颜色有

bit 即,计算机的一个处理单位,1bit 能代表的数据可以是 0 和 1。

2¹ = 2
2² = 4
2³ = 8
2⁴ = 16
2⁸ = 256

不同的色深能表示的颜色是不同的,当我们使用8bit,一个像素能表示的颜色多达256种。更高的色深则代表能表示的颜色数量越多,色彩更丰富,表达更精准。

8bit 和 24 bit :

http://www.cs.ucc.ie/~gavin/cs1050/the_internet/slides/ch07s01s02.html.htm
http://www.cs.ucc.ie/~gavin/cs1050/the_internet/slides/ch07s01s02.html.htm

pixel aspect ratio 像素长宽比

pixel’s width/height

https://graphicdesign.stackexchange.com/questions/75815/what-is-pixel-aspect-ratio/75824

一般为1:1,在一些特殊情况如很古老的设备可能有所不同,通常不需考虑修改或兼容此因素。

color mapping

With low colour depths (up to 8 bit) it is practical to map every colour to a binary code because there are not too many colours involved. This is called colour mapping and an example might be the binary code 110 representing yellow.

from https://teachcomputerscience.com/extras/1_4/colour_depth.html

即在较低色深时(最高8位),将每个颜色值映射到二进制数据。

另有一个 同义词 color mapping(color transfer)不做深究

refer:https://www.cs.tau.ac.il/~turkel/imagepapers/ColorTransfer.pdf

--

--