目錄表

像素、解析度、PPI(像素密度)

像素 pixel

類似螢幕世界的「原子」的概念,是組成內容的最小單位。「2500萬像素」的意思就是該內容由 2500 萬個小點組成。

解析度

通常表示方式為 W x H。

「百萬像素」、「千萬像素」這類的表示方式大多用在相機上,而在非相機領域時我們比較慣用的是寬×高的表達方式。

PPI

pixels per inch,也就是每英吋有多少個像素的意思,所以數值越大,畫質越好,細節表現得越精細

DPI

對印表機來說,DPI 的 dot 指的是「墨點」,也就是每英吋可以印多少個點

對圖檔來說,dot 指的則是 pixel

所以我們可以計算一張「72 DPI、512 x 512 解析度的圖」的物理尺寸寬度是 512/72=7.111 inch = 18.062 公分。

相同解析度下,DPI 越高的話,圖片印出來會越小、越精細

所以 DPI 和圖檔大小、解析度無關,DPI 只跟印表機有關。

CSS Pixel

把前面講的 Pixel 改稱為 Device Pixel,並新增一個 CSS Pixel 給 Web 做 RWD 使用,而 CSS Pixel 和 Device Pixel 之間的轉換倍率則有多種稱呼: DPR (device pixel ratio)、DPPX (dots per pixel) 或 pixel density。

* Device Pixel Ratio / DPR:描述螢幕像素與 CSS 像素間的比例關係
* Dots Per Pixel / DPPX:「dot」指的是螢幕像素、「pixel」指的是 CSS pixel,描述兩者間的數量比
* Pixel Density:描述像素密度

CSS Pixel 的幾個定義

原始定義本來是這樣: 1 CSS pixel ≈ 1/96 inch

但為了因應不同大小的螢幕,觀看距離也有所不同,而在原始定義之外,有其它的參考定義:

各家廠商也有自己的定義。

Ref