# 像素、解析度、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

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

  * Modern laptop with LCD: 1 CSS Pixel ≈ 1/125 inch
  * Smartphones / Tablets: 1 CSS Pixel ≈ 1/160 inch

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

## Ref

- https://editor.leonh.space/2021/rediscover-pixel-dpi-ppi-and-pixel-densit