重新認識Pixel、DPI / PPI 以及像素密度 - 六小編Editor Leon

透過上面的示意圖可以看到，在相同尺寸的螢幕上，因為解析度的差異，帶給我們視覺上 ... 如果把這張圖檔的DPI 改為150，那X 方向的輸出尺寸計算如下：. 這篇從pixel為起點，談談什麼是DPI、PPI、DRP這幾個與pixel有關的詞彙，試圖釐清這些「解析度」與媒體（螢幕、紙張、感光元件）之間的混亂關係。

解析度？畫素？像素？Pixel？到底什麼是什麼？如同物質組成基本的粒子——原子，組成數位影像的基本單位我們稱為畫素或像素，英文是pixel，一般會簡寫為px。

下面的示意圖是一張尺寸50*50px的圖片，裡面的格線一格代表一個pixel，可以很明確地看到裡面的「Ａ」是由許多的小pixel組合而成：上面的50*50px圖片是經過模擬放大數倍的效果，裡面的「Ａ」也因此充滿鋸齒感，如果不刻意放大看，它應該是這樣的：而這張50*50px的圖片，我們稱它為2,500像素的圖片，因為裡面共有50*50=2,500個像素。

我們一般口語的「解析度」，指的是50*50px這樣寬×高的表達方式，解析度一般會用來表示圖片、螢幕的寬、高畫素數，例如上面的50*50px的圖片，或者是1920*1080px的螢幕，如果把時間往回推三十年，當時的螢幕解析度只有640*480px或更低，在當時的螢幕上，像素點是清晰可見的：舊式單色CRT螢幕模擬圖來源：cool-retro-term而2,500像素，指的是像素的總數量，一般會用來表示相片或相機感光元件的像素數量，例如一張2,500像素的相片，或者一台百萬像素的相機，而「百萬像素」（megapixel）又被縮寫成MP，所以iPhone的相機是12MP，意即iPhone的感光元件的有效面積大約是一千兩百萬像素，在不裁切或縮放的情況下它可以輸出4,032*3,024≈1,200萬像素的照片。

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

像素與螢幕PPI像素是構成影像的基本單位，在一般人的認知，解析度越高通常也意味著畫質越高，同樣是15英吋大小的螢幕，一個的解析度是超古老的640*480px，另一個是1,920*1,440px，兩者的X、Y方向的像素數各差了三倍，這之間的差異可以用不同年代的同一款遊戲的畫面來感受：左：1995年《終極動員令》、右：2020年《終極動員令》重製典藏版來源：EA透過上面的示意圖可以看到，在相同尺寸的螢幕上，因為解析度的差異，帶給我們視覺上畫面精細度的差異感受。

同樣15吋的兩個螢幕，卻可以有著差異數倍的解析度，真實世界的1英吋，對應在這兩個15吋螢幕上會得到不同的像素數，我們把這件事簡化成下面的示意圖：上面的示意圖中，左右代表兩個相同尺寸，但解析度不同的兩個螢幕，在左邊低解析度的螢幕上，1英吋相當於18px；而右邊的高解析度螢幕上，1英吋則是相當於36px，由此我們可以得知pixel具有相對單位的性質。

像上面這樣以「1英吋內有多少pixel」的表示法我們用於表示像素密度，英文是pixelsperinch，簡稱PPI，上面的圖分別是18PPI的螢幕與36PPI的螢幕，當然生活中的螢幕不可能有如此低的PPI，除非你活在麥塊世界：來源：TSMC而自從蘋果開始行銷Retinadisplay後，PPI也開始成各家手機競逐的規格之一，根據蘋果的公式，只要手機螢幕大於300PPI，人眼在正常使用距離下就感受不到顆粒感，但對爾等app開發者來說，app內的圖檔素材也必須跟上這麼高的解析度才能得到最佳的觀看效果，關於PPI與app的關係，後面會再提到，在此先點到為止，先談談常常容易和PPI搞混的「DPI」。

像素與列印DPIDPI全文為dotsperinch，和pixelsperinch只差在最前面的「dot」，我們知道pixel是像素，那dot是什麼？對印表機來說，DPI的dot指的是「墨點」，一台規格為600DPI的印表機表示它最多能在1英吋的尺度內印出600個間距相當的墨點：來源：鼎翰科技（TSC）印表機的DPI是由它的機械結構決定的，以噴墨印表機來說，是由X與Y方向的兩組步進馬達的解析度來定義這台印表機的解析度，X方向的步進馬達負責驅動噴墨頭；Y方向的步進馬達負責帶動紙張前進，這也是之所以我們看普通印表機的規格表上常常是寫成600*600DPI的原因，前後兩個數字分別代表X方向與Y方向的DPI。

對於非噴墨型的印表機，例如上圖的熱感式標籤列印機或雷射印表機，他們雖然不存在X軸的步進馬達，但他們的成像元件也是有密度概念的，上圖為TSCTX600，它的成像元件密度就有達到一英吋600個點，密度越高代表越高的製程能力，價錢當然也是越貴。

而雷射印表機則是由Galvano反射鏡（振鏡）的轉動解析度來決定X方向的DPI，不同形式的印表機成像原理不同，但輸出密度這個概念是通用的。

然而DPI的混亂之處在於這個「dot」在不同的媒體有著不同的定義，對印表機來說，dot是墨點，但圖檔內卻也有著DPI的設定：上面是一張512*512px的圖片，它的DPI是72px/inch，這裡的DPI的「dot」指的是「pixel」，而不是「墨點」，但一旦送至印表機，DPI的「dot」又會被解讀成「墨點」，因此以X方向來說，我們可以換算出這張影像的物理尺寸：512px/(72px/inch)=7.111inch=18.062cm把這樣的規格拿去列印，得到的是一張寬度為18.062公分的印刷品，因為圖檔的DPI是設定成72dot/inch，印表機因此會很聽話的在1英吋的尺度內印出72個墨點，而X方向總共有512個「點」，這裡的「點」既是pixel也是墨點，因此就會得到寬度512/72=7.111英吋的圖片，相當於18.062公分。

如果把這張圖檔的DPI改為150，那X方向的輸出尺寸計算如下：512px/(150px/inch)=3.413inch=8.670cm比較一下兩種不同DPI設定下的輸出結果：左邊為72DPI輸出、右邊為150DPI輸出可以看到，512*512px的影像，在72DPI下的輸出儘管尺寸較大，但也是較模糊的，而改用150DPI輸出，結果銳利許多（因為更密集了），而在平面設計或排版界，往往是紙張與印表機的解析度先決，也就是說我的傳單或小冊已經注定是A4，而輸出設備的解析度是400*400DPI，那麼我想印一頁A4寬度滿版的影像，我必須讓我的圖檔能夠撐到這麼大而不模糊，用上面的公式反向推算應有的X方向像素：Xpx/(400px/inch)=8.268inch=21cm上面的X會等於3,307px，假設同樣是正方形的圖片，那Y方向也會是3,307px，因此這張要放到A4寬度滿版的相片，會是3,307*3,307≈10MP，需要千萬畫素的相機才能拍出。

隨著紙張的變大，一張正方形圖像想印成寬度滿版所需要的畫素也隨之變高，以A3來說，要維持400DPI的解析度，大約需要兩千萬畫素的圖檔；A2則需要約四千萬畫素圖檔；A1則需要約九千萬畫素的圖檔，然而現在主流的專業全片幅相機，也大多是兩千萬畫素，因此實際上的做法會是把圖檔的DPI降低，只要能騙過人眼就好。

要騙過人眼，得利用觀看距離，對A4來說，一般的觀看距離是30公分，在這樣的距離下，大約只要400DPI的列印解析度，就能讓肉眼感受不到墨點，對更大尺寸的媒體來說，觀看距離也會相對的拉遠，因此並不需要強求維持400DPI的列印解析度，也能達到看不出墨點的品質，例如廣告牆：來源：小草在這樣大面積的媒材上要以400DPI輸出，顯然是不現實的，不僅電腦處理不了這麼大的圖檔，也沒有實際上的益處，廣告牆的觀看距離遠至數十公尺，在這樣的距離下墨點的密度顯然無關緊要，因此實務上只要150DPI就足以滿足這麼大面積、長距離觀看特性的媒體。

由上面我們可以得知，不論DPI怎麼設，圖檔的原始寬高像素是不會受DPI影響的，DPI僅是用於決定輸出時要叫印表機把「點」印的多密集的一項參數。

話再說回來，那張512*512px的圖片，我硬是要印成A4滿版，卻又想獲得好的畫質，那應該怎麼做？我們可以用手動放大影像的方式把影像放大：以GIMP來說，它就提供了四種放大演算法，但這樣基於補插點的放大只會得到變大也變模糊的影像，剛好近幾年AI演算法爆棚，我們可以利用AI演算法的工具把圖像放大，而不損失畫質：左邊為512*512px原圖、右邊為放大至3,000*3,000px的圖上面左邊是原圖，右邊則是用SmartUpscaler放大的結果，比較頭巾的細節，很明顯的在黑科技的加持下，圖像放大了反而畫質還更好了，再用肉眼比較桌巾的格紋，也可以看到右邊的格紋更加銳利（但格紋形狀卻好像不那麼「方正」了，有一好沒兩好）。

DPI與PPI綜合以上，PPI與DPI都用來表示「1英吋內點的數量」，也就是密度的概念，不同的僅在於PPI的「點」很明確的定義為pixel，因此PPI永遠都只與螢幕相關，而DPI的「點」有時候是pixel，有時候是墨點，因此有時候會用於表示螢幕的點密度，有時候又會用於表示印表機的點密度，甚至3D印表機也是用DPI表示機台的解析度，因為3D印表機也是由步進馬達驅動，只不過多了Z軸的機構。

PPI/DPI兩者混用的狀況時有所見，相當容易令人誤會，因而近代的作業系統也大多屏棄了DPI的字眼，改以更為通俗的方式讓用戶調整解析度與UI元件比例：PPI/DPI兩者的概念也大多是共通的，人的眼力有所極限，能否看到「點」與距離有關，想要騙過大腦讓它認為眼前的螢幕或紙張是高品質的，那就讓螢幕／紙張離眼睛遠一點，或者讓螢幕／紙張的PPI/DPI高一點，這個定律是適用於所有人的，除非他有瞳術那另當別論⋯⋯。

來源：火影忍者另一個涵義模糊的詞彙是「解析度」，「解析度」是個更廣泛的概念，不論是512*512px、300PPI、150DPI，他們都可以被「解析度」稱之，解析度的英文resolution意義也是同樣的粗略，因此看到解析度最好還是看它後面接的是什麼才能正確地理解前後文脈絡。

像素、DPR與更多的單位再把主題拉回像素與PPI的世界，前面提到過自從Retinadisplay問世以來，手機的PPI有著飛躍式的成長，像軍備競賽一樣，隨便都破400PPI，下面是幾款iPhone的面板解析度與PPI表：裝置螢幕像素螢幕對角線尺寸PPIiPhone3320*480px3.5inch163iPhone4640*960px3.5inch326iPhoneSE2750*1134px4.7inch326iPhone12ProMax1284*2778px6.68inch458上表中的iPhon3是末代非Retinadisplay的型號，從iPhone4起，開啟了Retinadisplay的時代，扣掉上面兩排已經停產的型號，看iPhoneSE2與iPhone12ProMax這兩款正在線上的機種，螢幕寬度的像素分別是750px與1,284px，這樣巨大的寬度像素對於app或RWDweb佈局是有問題的，試想1,284px寬的螢幕，相當於一個15吋桌上型顯示器的像素寬度，但它的實際寬度卻只有8公分左右，這對RWD的佈局是不合理的，在CSSmediaquery的判斷上1,284px會落入桌機板的區間內，如此就無法為這樣高PPI的裝置正確的顯示出手機版的網頁，必須有一種機制來處理這樣的問題，於是在web方面引入了CSSpixel這個新尺度。

CSSPixelCSSpixel是web世界的pixel，它與螢幕像素之間有一個倍率關係，這個倍率關係有許多名字，有稱之為devicepixelratio，簡稱DPR，也有稱之為dotsperpixel，簡稱DPPX，也有人稱為pixeldensity，不論是DRP或DPPX或pixeldensity，他們的意義都是一樣的——螢幕像素與CSSpixel之間轉換的倍率值。

在CSSpixel與DPR的引入下，我們把上面的表格擴充一下：裝置螢幕像素螢幕對角線尺寸PPICSSPixelDPRiPhone3320*480px3.5inch163320*480px1iPhone4640*960px3.5inch326320*480px2iPhoneSE2750*1134px4.7inch326375*667px2iPhone12ProMax1284*2778px6.68inch458428*926px3透過DPR與CSSpixel的換算，螢幕寬度從原本的1,284、750px變成了少少的428、375px，完全可以在一個CSSmediaquery區間內處理。

實際上用CSSmediaquery與JavaScript查出來的寬度，也都會是經過DPR換算後的寬度，CSSpixel與DPR的計算一切都是隱式發生的，就算對CSSPixel與DPR完全沒概念的人，也不影響他開發web，我輩web開發者不需考慮設備的真實解析度，一律都以CSSpixel的尺度去設計即可。

DPR/DPPX/PixelDensity在RetinaDispaly出現以前，CSSpixel與螢幕pixel是很間單的1:1對應，一顆像素就是一顆像素，並沒有比例關系的概念，Retinadisplay問世後，一個CSSpixel對應到螢幕像素的關係呈一種比例關係，可以用下面的圖示理解這個比例關係：螢幕寬度固定在8公分左右，在8公分內塞入越多的螢幕像素，對人眼的感受越細緻，前面提過我們是用PPI來衡量單位距離內塞入的螢幕像素數，而以160PPI做基準設為1x，320PPI則視為2x，以此類推。

而圖中的CSSpixel是被定義為1/160inch，因此CSSpixel與真實世界的關係是穩定的，因此CSSpixel與螢幕像素之間也會有這樣的比例關係存在，關於CSSpixel的定義下面會再談到。

回顧我們賦予這個比例關係的三個名字，各有其意義在：DevicePixelRatio/DPR：描述螢幕像素與CSS像素間的比例關係DotsPerPixel/DPPX：「dot」指的是螢幕像素、「pixel」指的是CSSpixel，描述兩者間的數量比PixelDensity：描述像素密度儘管面向略有不同，但三者指涉的的確是同一個概念——CSS像素與螢幕像素的比例關係。

這邊又接回像素密度的概念，前面有提過PPI的意義——1英吋內有多少pixel，越高的PPI表示越精細的螢幕，而CSSpixel又是因應高PPI螢幕下的產物，CSSpixel的原始定義是這樣的：1CSSpixel≈1/96inch但為了因應不同大小的螢幕，觀看距離也有所不同，而在原始定義之外，有其它的參考定義：ModernlaptopwithLCD:1CSSPixel≈1/125inchSmartphones/Tablets:1CSSPixel≈1/160inch在手機上引用的是第三個參考定義，把公式翻轉一下：160CSSPixel≈1inch因此：在160PPI（每英吋有160顆螢幕像素）的螢幕：1CSSpixel=1螢幕像素（160/160=1），DPR=1在320PPI的螢幕：1CSSpixel=2螢幕像素（320/160=2），DPR=2在163PPI的螢幕：DPR=1.02≈1在326PPI的螢幕：DPR=2.03≈2在458PPI的螢幕：DPR=2.86≈3CSSpixel的定義公式僅為原則，現實上還要考慮到螢幕面板的製程能力與切割最佳化因素，又或者是手機廠牌自己對人機工程的考慮，所以實際上各廠牌還是有自己的一套CSSpixel的決定法則，以iOS來說，它的CSSpixel實際上是以1/163inch為基礎的，這是為了與他們定義的iOSpoint一致，而iOSpoint是以iPhone3的163PPI為基礎的，但還是偶有例外。

Android陣營也有類似的狀況，Android的dp單位是以1/160inch為基礎，但一樣偶有例外，關於iOSpoint與androiddp兩個單位，後面會再提到。

不過就如同前面說的，站在開發者的角度，CSSmediaquery查出來的已經是CSSpixel的尺度，我們的佈局可以不用管真實解析度是多少、不用管DPR是多少、不用管設備的型號，直接在mediaquery用最直觀的pixel做RWD的分區間設計就好，render引擎會幫我們處理好這些底層換算的複雜工作，我們唯一要做的是加上這句標籤讓瀏覽器render出符合裝置寬度，且未縮放的頁面： DPR沒那麼簡單但事情沒有那麼簡單⋯⋯對於文字、SVG、canvas、HTML元素框線等向量元素，他們都是即時render下的結果，因此不論DPR為何，render引擎都會給出最佳化的結果：純文字區域放大看還是相當清晰，但對於點陣圖，就會有畫質劣化的感受：因為在1x設備上，圖像的1個像素對應到1個CSS像素，而1CSS像素也對應到螢幕的1個像素，但在2x的設備，圖像的1個像素對應到1個CSS像素，但此時1CSS像素卻是對應到4個螢幕像素，相當於這100x100px的影像被投放到400x400px的平面上，這讓render引擎只能把那100*100px的圖像粗暴的補插點放大，因此儘管1x設備與2x設備他們的手持寬度都是8公分左右，但螢幕像素密度差異還是讓視覺感受到的品質下降，所以對於圖像，我們必須準備不同解析度的版本供應給不同DPR的設備：綜合以上，在web開發上，我們可以利用&LTimg>的srcset和sizes屬性來供應不同倍率的圖檔，而瀏覽器會自動根據設備當前的DPR來顯示最適合的圖檔。

App的pt與dp在app方面，也是相同的概念，由於不同的手機也存在著各自的螢幕解析度與PPI，因此一樣會面臨到app開發時需考慮窄至320px，寬至1,284px的佈局呈現，因此iOS與Android也各自引進了類似CSSpixel的單位，在iOS用的是point，簡稱pt，不過這pt與CSS的pt又撞名，實際上兩者是不同的定義，為了分別起見我們稱為iOSpt；而Android這邊用的單位是device-independentpixel，簡稱dp，不論是CSSpixel、iOSpt、dp都是類似概念下的產物。

回顧前面的CSSpixel定義：1CSSpixel≈1/160inch而這是iOSpt的定義：1iOSpt≈1/163inch而這是dp的定義：1dp≈1/160inch與CSSpixel相同的，這些公式都僅做為原則使用，僅供參考，手機上實際的iOSpt與螢幕解析度的比例關係是由人工定義出來的，理由與上面相同，因為面板製程能力或分割效率或廠牌對人機工程的考慮而決定，因此儘管公式不同，但結果卻是完全相同：裝置螢幕像素PPICSSPixeliOSptDPRiOSSacleFactoriPhone3320*480px163320*480px320*480pt1@1xiPhone4640*960px326320*480px320*480pt2@2xiPhoneSE2750*1134px326375*667px375*667pt2@2xiPhone12ProMax1284*2778px458428*926px428*926pt3@3x一模模一樣樣。

在Android方面，在dp與DPI（PPI）的基礎下，直接制定了以倍率為基準的區間：密度限定符倍率DPI(PPI)ldpi0.75x~120DPImdpi1.0x基準~160DPIhdpi1.5x~240DPIxhdpi2.0x~320DPIxxhdpi3.0x~480DPIxxxhdpi4.0x~640DPIAndroid的各廠牌手機都必然會落入上表的某一個組別內，因此Android的app開發者不用去考慮真實的螢幕解析度是多少，只要確保你的佈局可以適用於從ldpi~xxxhdpi而不跑版，並且提供從0.75x起至4.0x的各組倍率的圖檔，那Android會自動根據用戶手機的DPI去呈現佈局以及最適用的圖檔。

不論是iOS還是Android他們都引入了倍率的概念，儘管基準的PPI（DPI）略有不同，在iOS的倍率從@1x到@3x，在Android則從0.75x到4.0x這些倍率的用意也就是我輩開發者需要準備的圖檔倍率，而作業系統會根據用戶當前的設備去顯示最適合他的解析度的圖檔。

結語綜合全文，對開發者而言，需要關注的點有三：不用去管圖檔本身的DPI設定，它只在列印時有意義。

平台佈局的單位是什麼？web用CSSpixel、iOS用iOSpt、Android用dp，用正確的單位進行版面的佈局，不要去糾結螢幕的硬體解析度。

圖檔依照平台指定的倍率提供，iOS有@1x~@4x、Android有ldpi~xxxhdpi，確保app內的圖檔都有提供這些倍率的版本，web的話則是用&LTimg>標籤的srcset和sizes來定義各倍率的圖檔，瀏覽器會自行抓取最適合的做顯示。

這篇文章是本人寫過最長的一篇，在寫的途中參考了大量資料，自己也釐清了一些過往一知半解的認知，但這麼廣的議題（從像素講到DPI/PPI和印表機的機構再講到app的單位）應該是難免有錯，有錯誤的地方請大聲怒罵指責。

Share作者：Leon不是五小編也不是七小編，就是六小編。