跳至主要內容
RAR 設計攻略
  • 線上課程
  • 專欄文章
  • AI 覺醒
  • 關於講師
管理後台
登入
客服信箱:riven@rar.design

© 2026 RAR 設計攻略 All Rights Reserved.欸嗚欸嗚欸欸嗚嗚嗚喔喔有限公司.統一編號: 90841757
使用者條款.隱私權政策
Made with ♥ by 無為教育科技股份有限公司.Teachify
Developer and agent API documentationSite content index for AI agents (llms.txt)API documentation (OpenAPI)API authentication guide
  1. 首頁
  2. 文章列表
  3. 解析度、PPI 和 DPI 到底差在哪?300 DPI、72 PPI 與列印尺寸換算一次看懂

解析度、PPI 和 DPI 到底差在哪?300 DPI、72 PPI 與列印尺寸換算一次看懂

改 PPI 為什麼像素不變、客戶要的 300 DPI 怎麼算、網頁和手機為什麼只看像素
設計師 Riven

設計師 Riven

2026年11月12日 下午 1:30

平面設計

DESIGN BASICS · PRINT & SCREEN

解析度、PPI 和 DPI 到底差在哪的像素風封面:同一張 96×64 像素的小屋圖存成兩份,分別標上 72 PPI 與 300 PPI,中間寫著像素一樣

▲ 這篇的示範圖都來自我做的一支像素動畫。畫面裡的像素數、列印尺寸與放大結果都是程式實際算出來的。

QUICK ANSWER

PPI 是影像每英吋幾個像素,決定同一批像素印出來多大;DPI 是印表機每英吋能放幾個墨點,屬於機器的規格。檔案真正的資料是像素尺寸,改 PPI 不會增減像素,只改列印尺寸。客戶要的「300 DPI」通常指成品尺寸下每英吋 300 個像素,所以先算像素:英吋 × 300。網頁和社群只看像素。

CONTENTS

01

兩張一樣的圖,哪張比較清楚?

02

像素尺寸才是檔案裡的資料

03

「解析度」有兩種意思

04

改 PPI,像素一個都沒變

05

英吋 = 像素 ÷ PPI

06

客戶要的 300 DPI 怎麼算

07

印刷一定要 300 PPI 嗎

08

DPI 是印表機的規格

09

印刷廠說的 LPI 是什麼

10

圖太小,放大補得回來嗎

11

72 和 96 是從哪來的

12

螢幕、網頁、手機只看像素

13

交件前先問五件事

14

重點整理

CHAPTER 01 · THE QUESTION

兩張一樣的圖,哪張比較清楚?

客戶傳來一句話:「請給我 300 DPI 的高解析圖。」這句話,做設計的人應該都收過。手上的檔案寫著 72,改成 300 就能交差了嗎?

我做了一個簡單的實驗:同一張圖存成兩份,一份標 72,一份標 300,然後逐格比對每一個像素。

同一張像素小屋圖存成兩份,左邊標 72 PPI、右邊標 300 PPI,中間的比對讀數顯示 6144 個像素中 6144 個相同,下方寫著一模一樣

▲ 96 × 64 = 6144 個像素,逐格比對,6144 個全部相同。在螢幕上,兩張一樣清楚。

結果是一模一樣。那個被改來改去的數字,沒有動到任何一個像素。要弄懂它到底改了什麼,得先把四個常被混在一起的詞分開:

四個常被混在一起的詞

像素尺寸

PIXELS

寬幾格、高幾格,例如 96 × 64。檔案裡真正存的就是這些像素。

屬於:檔案

PPI

PIXELS PER INCH

每英吋放幾個像素。對影像來說,它決定這批像素印出來多大。

屬於:影像(列印時)

DPI

DOTS PER INCH

印表機每英吋能放幾個墨點,例如 4800 × 1200 dpi。

屬於:印表機

LPI

LINES PER INCH

印刷網點每英吋幾條網線,中文叫網線數。報紙約 60~85。

屬於:印刷網屏

這四個詞的共同點是「每英吋幾個」或「幾乘幾」,所以很容易被當成同一件事。分開來看,它們各自屬於不同的東西:像素尺寸屬於檔案,PPI 屬於影像要印多大,DPI 屬於印表機,LPI 屬於印刷廠的網屏。接下來一個一個拆。

CHAPTER 02 · PIXELS

像素尺寸才是檔案裡的資料

點陣圖是一格一格的像素排成的格子。寬有幾格、高有幾格,叫做像素尺寸,這就是檔案裡真正存的資料。示範圖的像素尺寸是寬 96、高 64;Adobe 說明裡的例子是 3000 × 2000 像素,也就是 600 萬個像素。

像素小屋圖旁標示寬 96 格、高 64 格,右側顯示檔案裡存的像素格子,並貼上 300 PPI 標籤,下方寫著 PPI:每英吋幾個像素

▲ 左邊是圖,右邊是檔案裡真正存的格子。那張 300 的標籤,是貼在檔案外面的另一筆資訊。

6,144

96 × 64 的示範圖,總共的像素數

6,000,000

Adobe 的例子:3000 × 2000 像素

約 870 萬

2480 × 3508,A4 以 300 PPI 印的像素數

像素本身沒有固定的實體大小。同一個像素,在手機螢幕上可能小到看不見,印在大海報上可能有好幾公釐寬,大小取決於它被輸出到哪裡、用多大的密度攤開。所以談「這張圖夠不夠大」時,第一個要問的永遠是像素尺寸。

CHAPTER 03 · TWO MEANINGS

「解析度」有兩種意思

「解析度」這個詞在日常裡有兩種用法,混用就會吵架。第一種指像素數量:「1920 × 1080 的螢幕」「1200 萬畫素的相機」。第二種指像素密度:每英吋放幾個像素。

解析度一詞分成兩個方框:左邊是像素數量 96 × 64,右邊是像素密度 PPI,下方註明 Photoshop 影像尺寸裡的解析度就是 PPI

▲ 同一個詞,兩種意思。Photoshop「影像尺寸」對話框裡的「解析度」欄位,指的是右邊那一種。

Photoshop 的「影像 > 影像尺寸」對話框裡,「解析度」欄位的單位是「像素/英吋」,也就是 PPI;Adobe 談到螢幕時,又說螢幕解析度是用像素數來計算。Apple 台灣的 iPhone 規格頁則把兩種意思寫在同一行:像素數 2622 x 1206,密度 460 ppi。

閱讀技巧

看到「解析度越高,畫質越好」這種句子時,先問它指的是哪一種。像素數量多,確實能保留更多細節;但同一批像素把密度從 72 改成 300,畫質一點都沒變,下一章會證明。

CHAPTER 04 · PPI IS A LABEL

改 PPI,像素一個都沒變

打開 Photoshop 的「影像 > 影像尺寸」,先取消勾選「重新取樣」。這時寬度、高度、解析度三個欄位會連動,像素尺寸被鎖住:把解析度往上調,印出來的寬高就跟著變小;往下調,就變大。整個過程沒有任何像素被增加或刪除。

像素風的影像尺寸面板:尺寸 96 × 64 像素維持不變,解析度改成 300 PPI 後寬度變成 0.32 英吋,重新取樣未勾選,旁邊寫著改 PPI 像素一個都沒變、只改了印出來的大小

▲ 解析度從 72 改成 300,尺寸那一欄的 96 × 64 像素一格都沒動,變的只有印出來的 0.32 × 0.21 英吋。

Adobe 說明裡的例子是:400 × 400 像素、解析度 100 PPI,印出來 4 × 4 英吋。不重新取樣、把尺寸改成 2 × 2 英吋,解析度就自動變成 200 PPI,像素還是那 400 × 400 個。

PPI 在檔案裡只是一筆標籤

在檔案格式裡,這個數字是可有可無的附加資訊。PNG 把它放在一個叫 pHYs 的選用區塊,單位是「每公尺幾個像素」,規格也允許讀圖的程式忽略它;JPEG 則寫在 JFIF 的密度欄位,或是 Exif 的 XResolution。我拿一張 300 × 200 的 PNG 實際驗證:

同一張 PNG:只改 PPI vs 重新取樣

# 原檔:300 × 200,標 72 PPI(pHYs = 2835 像素/公尺)

$ sips -s dpiWidth 300 -s dpiHeight 300 a.png --out b.png

像素內容雜湊:a.png 與 b.png 完全相同

pHYs:2835 → 11811 像素/公尺(約 300 PPI)

$ sips --resampleWidth 600 a.png --out c.png

c.png:600 × 400,像素內容雜湊不同

# 檔案大小也有差,那是 sips 重新壓縮的結果,跟 PPI 無關

只改 PPI 的兩個檔案,解碼出來的像素一個位元都沒差,變的只有那個標籤。勾起重新取樣把寬度改成 600,像素才真的換了一批。

“

改 PPI,像素一個都沒變,只改了印出來的大小。

CHAPTER 05 · THE FORMULA

英吋 = 像素 ÷ PPI

既然 PPI 管的是「印多大」,換算就只有一條公式:英吋 = 像素 ÷ PPI。反過來,需要的像素 = 英吋 × PPI。1 英吋等於 2.54 公分,這是 CSS 規格裡也寫明的精確值。

公式英吋等於像素除以 PPI,下方兩條長條:3000 像素除以 300 PPI 等於 10 英吋 25.4 公分的短藍條,同樣 3000 像素除以 72 PPI 等於 41.67 英吋約 105.8 公分的長橘條

▲ 同一批 3000 個像素,標 300 印成 25.4 公分,標 72 就攤成約 105.8 公分。像素數一樣,攤得比較開。

列印尺寸換算表

像素

PPI

印出來

3000 px

300

10 英吋(25.4 公分)

3000 px

72

41.67 英吋(約 105.8 公分)

1000 px

72

約 13.9 英吋(Adobe 的例子)

1000 px

300

約 3.3 英吋(Adobe 的例子)

2480 × 3508 px

300

A4(210 × 297 毫米)

2480 × 3508 px

150

A2(420 × 594 毫米)

從紙張尺寸反推像素

印刷品通常是先決定尺寸,再回推需要多少像素。以 A4 為例:寬 210 毫米 ÷ 25.4 × 300 = 2480.3,取 2480 像素;高 297 毫米 ÷ 25.4 × 300 = 3507.9,取 3508 像素。同樣的 A4,用 150 PPI 是 1240 × 1754,用 Epson 建議的 360 是 2976 × 4209。

如果印刷廠要求出血,畫布要先加上出血再換算。以每邊 3 毫米為例,A4 變成 216 × 303 毫米,300 PPI 就是 2551 × 3579 像素。出血要留多少各家不同,一律以印刷廠給的規格為準。

PHOTOSHOP 小技巧

「檢視 > 列印尺寸」可以在螢幕上預覽圖片印出來的大約尺寸。預覽的準確度會受螢幕尺寸與解析度影響,拿來抓個大概很好用。

CHAPTER 06 · THE 300 DPI REQUEST

客戶要的 300 DPI 怎麼算

回到開頭那句「請給我 300 DPI 的高解析圖」。印刷服務商 Vistaprint 的說明寫得很清楚:圖片要在「你打算印的尺寸」下達到至少每英吋 300 個像素。所以這個要求真正在問的是:印在成品尺寸時,每英吋有沒有 300 個像素?

客戶訊息請給我 300 PPI 的高解析圖,左邊小圖改標 300 PPI 後像素仍是 96 × 64,算出只能印 0.32 英吋約 0.8 公分;右邊 A4 紙標示 210 × 297 毫米、300 PPI,換算成 2480 × 3508 像素

▲ 小圖把 72 改成 300,像素沒變,能印的尺寸反而縮到 0.32 英吋。要印 A4,得準備 2480 × 3508 個像素。

把一張小圖的 72 改成 300 交出去,像素沒變,能印的尺寸反而縮小了。正確的檢查順序是這樣:

1

先問成品尺寸

要印 A4、名片還是海報?有沒有出血?

2

算需要的像素

成品英吋 × 300(或印刷廠指定的 PPI)。A4 是 2480 × 3508。

3

對照手上的像素尺寸

在「影像尺寸」看「尺寸」那一欄的像素數,跟需要的數字比。

4

不夠就換來源

向客戶要更大的原始檔、重新輸出向量或 PSD,或者把成品改小。放大的極限在第十章。

為什麼大家都說 DPI

既然要的是 PPI,為什麼大家都說 DPI?因為這個詞在螢幕與檔案的世界裡用得比 PPI 早,而且一直沒改掉。Microsoft 在說明 Windows 的「96 DPI」時直接承認:這個詞來自印刷,用在螢幕上其實該說每邏輯英吋 96 個像素,但 DPI 這個說法就這樣留下來了。

連檔案格式都這樣寫:1992 年的 JFIF 規格把密度欄位標成「dots per inch」;Exif 把 XResolution 定義成每單位幾個像素,解析度不明時預設寫 72。Vistaprint 寫「每英吋 300 像素(dpi)」,Epson 的常見問答建議影像解析度「300~360 dpi」。

相機檔的 72 dpi

很多相機拍出來的照片標著 72 dpi,原因就是 Exif 的預設值。這個數字只是提示列印尺寸的標籤,照片能印多大,看的是像素尺寸。一張 6000 像素寬的照片,以 300 PPI 印可以到 20 英吋寬。

所以聽到別人說 DPI 不必糾正,看上下文就好:講的是影像,指的就是 PPI;講的是印表機規格,才是真正的墨點。

CHAPTER 07 · HOW MUCH PPI

印刷一定要 300 PPI 嗎

300 PPI 是最常見的數字,Adobe 稱它是近距離觀看的高品質印刷品的業界標準。但它是經驗法則,各家的建議其實不太一樣:

各家的 PPI 建議

來源

建議

情境

Adobe

300 PPI

近距離觀看的高品質印刷品

Adobe

150–300 PPI

一般印刷;300 以上為高品質

Adobe

至少 220 PPI

噴墨印照片通常就夠

Epson

300–360 PPI

依觀看距離調整

Vistaprint

至少 300 PPI

在你要印的尺寸下

決定需要多少 PPI 的關鍵是觀看距離。看得越遠,眼睛分辨得越少,需要的像素密度就越低。HP 的大圖輸出建議把這件事列成一張表:

HP:依觀看距離建議的 PPI

觀看距離

建議 PPI

例子

0.6 公尺以內

200–300

近看的展示品、藝術複製品

1–1.5 公尺

150–200

展場圖像

1.5–3 公尺

100–150

海報、布條

6 公尺以上

50–100

戶外布條

同一份 2480 × 3508 像素的圖印成 A2 海報、標 150 PPI,旁邊的觀看距離軸:近看 300 PPI,1.5 到 3 公尺常見建議 100 到 150 PPI,寫著看得越遠需要越少

▲ 同一份 2480 × 3508 像素,A4 用 300 PPI,A2 用 150 PPI 剛好。A2 海報通常站在一兩公尺外看。

這也解釋了同一個檔案為什麼能有不同用途:2480 × 3508 像素,印 A4 是 300 PPI,印 A2 是 150 PPI,兩者都落在合理範圍。真正要交件時,數字以印刷廠的建議為準,他們最清楚自己的機器與紙張。

“

看得越遠,需要的像素越少。

CHAPTER 08 · PRINTER DPI

DPI 是印表機的規格

真正的 DPI 是印表機的規格:每英吋能放幾個墨點。Adobe 說大部分噴墨印表機的解析度落在 720 到 2880 dpi;Canon 一款噴墨印表機的規格寫著 4800(橫)× 1200(直)dpi,註明墨滴最小可以用 1/4800 英吋的間距放置,大約 5.3 微米。

從像素小屋圖放大其中一個橘色像素,右邊是由黃、紅、白小墨點拼成的方格並標示示意,旁邊是 CMYK 四色墨水,寫著墨水只有幾種、每個點噴或不噴,遠看拼成這個顏色,下方 4800 × 1200 DPI、墨點間距最小 1/4800 英吋、影像用不到 4800 PPI

▲ 印表機只有幾種墨水,每個點只有噴或不噴,所以要用一堆小墨點拼出一個像素的顏色。(墨點排列為示意)

印表機的數字為什麼比影像高這麼多?因為它的墨水只有幾種顏色,每個點只有「噴」或「不噴」兩種狀態,沒辦法像螢幕一樣調出任意的顏色。要印出一個橘色的像素,它得用很多小墨點排成圖樣,遠看才混成那個顏色。這種做法叫半色調,噴墨印表機多半用抖色或誤差擴散的圖樣。

720–2880

Adobe:一般噴墨印表機的 dpi 範圍

1/4800 英吋

Canon 規格:墨滴最小放置間距,約 5.3 微米

約 220 PPI

Adobe:噴墨印照片,影像通常這樣就夠

所以印表機寫 4800 dpi,影像完全用不到 4800 PPI。Adobe 的說法是,在 720 到 2880 dpi 的噴墨印表機上印照片,影像大約 220 PPI 通常就足夠了。這支影片從印表機的角度把兩者分得很清楚:

▲ Keith Cooper:Avoiding the confusion DPI and PPI(英文)

CHAPTER 09 · LPI

印刷廠說的 LPI 是什麼

送到印刷廠走平版印刷時,還會遇到第三種「每英吋」:LPI,中文叫網線數。印刷機同樣只有幾種油墨,濃淡是靠大小不同的網點排成一行一行來表現,每英吋有幾行網點就是 LPI。網點的做法如果想玩成風格,可以看Photoshop 復古印刷感海報這篇。

一張圖印出來,會經過三種「每英吋」

PPI

像素

檔案裡的像素,照 PPI 攤到紙上

設計師決定

→

LPI

網點

平版印刷把濃淡拆成一排排網點

印刷廠決定

→

DPI

墨點

輸出設備每英吋能放幾個點

機器決定

三個單位都叫「每英吋幾個」,數的東西各不相同,數字也不能互相換算成同一件事。例如 150 LPI 的網屏,Adobe 說需要 2400 dpi 以上的輸出設備。

Adobe InDesign 的說明給的參考值是:報紙大約 60 到 85 LPI,雜誌大約 150 LPI。網線數越高,需要的輸出設備解析度也越高:150 LPI 的網屏要 2400 dpi 以上的設備,85 LPI 大約 1270 dpi。這組數字也剛好說明 DPI 和 LPI 是兩種不同的刻度。

300 PPI 的另一個來源

影像的 PPI 跟網線數有一條經驗法則:Adobe 的 Photoshop 說明寫,影像解析度一般是網線數的 1.5 到 2 倍,低一點也可能可以接受,要看圖片與印刷設備。

網線數與影像 PPI

網線數

影像 PPI(× 1.5~2)

常見用途

85 LPI

約 128–170

報紙範圍

133 LPI

約 200–266

舊版 Adobe 手冊中的四色雜誌

150 LPI

225–300

雜誌

175 LPI

約 263–350

較細的網屏

150 LPI 的雜誌網屏乘以 2,剛好就是 300。這是「印刷要 300」的另一個由來。這條比例是給半色調印刷用的,有些設備用的是別種網屏方式,最穩的做法還是直接問印刷廠。

CHAPTER 10 · UPSCALING

圖太小,放大補得回來嗎

像素不夠時,最直覺的反應是勾起「重新取樣」把圖放大。勾起之後,改尺寸就會真的增減像素:向上取樣時 Photoshop 會根據現有的像素推測新像素長什麼樣子,向下取樣則是把像素合併、捨棄資訊。Adobe 建議盡量避免重新取樣,尤其是放大,而且只做一次。

重新取樣示範:96×64 的小圖長寬各放大 4 倍到 384×256,並排 Nearest Neighbor、Bilinear、Bicubic 三種結果與真正的大圖原圖,原圖招牌上的小字與磚縫在三種放大結果裡都糊成一片,下方寫著原圖沒有的細節補不回來、AI 放大是推算出來的細節

▲ 我先畫了一張 384 × 256 的大圖,縮成 96 × 64 當作「小圖」,再用三種方法放大回去。招牌上的小字在三個結果裡都不見了。

三種經典做法各有個性:最接近像素直接複製最近的像素,邊緣一格一格;縱橫增值法(Bilinear)把周圍平均,變得比較軟;Bicubic 參考更大範圍的像素,漸層更平滑。但不管哪一種,原圖沒有的細節都補不回來。Adobe 的說明也這樣寫:放大可以推測新像素,卻無法加入原圖裡沒有的細節。

影像 > 影像尺寸 > 重新取樣

Photoshop 的重新取樣選項

用途

自動

由 Photoshop 依情況選擇

保留細節 2.0

放大用,AI 輔助保留重要細節與紋理,含降低雜訊

保留細節(放大)

前一版的保留細節

環迴增值法(更平滑)

放大用

環迴增值法(更銳利)

縮小用

Bicubic(平滑漸層)

一般的平滑重新取樣

最接近像素(硬邊)

像素畫與硬邊圖形

縱橫增值法

把周圍像素平均

像素畫要用最接近像素

像素小屋屋頂放大的比較:左邊最接近像素 Nearest Neighbor 保留一格一格的硬邊,右邊 Bicubic 把邊緣糊成漸層,下方寫著像素畫選最接近像素、硬邊才會留著

▲ 像素畫要放大,選「最接近像素」,硬邊才會留著。Bicubic 會把每一格的邊緣糊掉。

有一種情況放大反而沒有損失:像素畫以整數倍放大時,用最接近像素,每一格原封不動變成 2 × 2、4 × 4 的方塊。Adobe 也把這個選項標明給像素畫與硬邊圖形用。

AI 放大畫出來的是推算的細節

近年的 AI 放大確實厲害。Photoshop 的「保留細節 2.0」是 AI 輔助的放大選項;神經濾鏡裡的 Super Zoom 放大時用 AI 補償解析度的損失;Camera Raw 的 Super Resolution 在 2021 年 3 月 10 日發表,把長寬各放大 2 倍、像素總數變 4 倍,Adobe 的例子是 1600 萬像素的照片變成 6400 萬像素;生成式放大則提供 2 倍或 4 倍,結果開在新文件裡。

這些工具是用大量低解析與高解析的影像配對訓練出來的,它們畫出的是看起來合理的細節。成品看起來更清楚,但那些細節是模型推算出來的,跟當初拍下或畫下的內容未必一樣。拿來應急可以,能拿到更大的原始檔,永遠是第一選擇。

CHAPTER 11 · 72 AND 96

72 和 96 是從哪來的

網頁圖「要存 72」這個說法流傳了幾十年,它的源頭是一台電腦。1984 年 1 月推出的麥金塔,內建 9 吋黑白螢幕,像素是 512 × 342,大約每英吋 72 個像素,算起來畫面約 7.1 × 4.75 英吋。

像素風的 1984 年米色電腦螢幕,旁邊寫著 512 × 342 像素、約 72 PPI,當年的說法:1 像素等於 1 點等於 1/72 英吋,下方寫著 72 是習慣寫法

▲ 當年的設計:螢幕上的一個像素剛好等於排版的一點,1/72 英吋。(電腦為原創像素示意圖)

為什麼是 72?排版用的單位「點」是 1/72 英吋,在桌面出版與 CSS 裡都這樣定義。根據 1998 年 Microsoft 工程師與 2002 年 Steven Pemberton 在 ACM《interactions》雜誌上的說法,72 是刻意選的,讓螢幕上的一個像素剛好對到一點,螢幕上看到的字就跟印出來一樣大,很適合一台主打桌面出版的電腦。

TIMELINE · 72 和 96 的身世

1984

麥金塔:72

內建 9 吋黑白螢幕 512 × 342 像素,大約每英吋 72 個像素,一個像素對到排版的一點

Windows

96 的邏輯英吋

把一個「邏輯英吋」對到 96 個像素,12 點的字是 16 像素高,比實際尺寸大三分之一

CSS

1 英吋 = 96 px

CSS 直接規定 1in = 96px、1pt = 1/72in,螢幕上的 px 再依觀看距離對到實體像素

2026

手機 400 多 PPI

iPhone 18 Pro 每英吋 460 個像素,Pixel 11 Pro 是 495,畫面改用 @2x、@3x 的像素倍數來畫

Windows 選了另一個數字:把一個「邏輯英吋」對到 96 個像素,所以 12 點的字是 16 像素高。Microsoft 的字體專家在 1998 年解釋過原因:人看螢幕的距離比看紙遠,所以刻意把螢幕上的字放大。96 剛好是 72 的 4/3 倍。Windows 的縮放比例 100%、125%、150%,對應的就是 96、120、144。

CSS 後來直接把這件事寫進規格:1in = 96px,1pt = 1/72in。CSS 的 1px 也不等於螢幕上的一顆實體像素,它被定義成一個視角:在 96 dpi 的裝置上、一臂距離看一個像素的大小,約 0.0213 度,在 71 公分外約 0.26 毫米,在 3.5 公尺外約 1.3 毫米。點和網格的排版傳統,可以延伸讀瑞士風格的設計史。

72 只是習慣寫法

Adobe 的說明至今仍寫「螢幕與網頁用 72 PPI、印刷用 300」,同一個說明網站也說明解析度設定不影響螢幕顯示。所以網頁圖標 72 留著沒關係,它對螢幕沒有作用,真正要看的是像素尺寸。

CHAPTER 12 · SCREENS

螢幕、網頁、手機只看像素

Adobe 說得很直接:影像的解析度設定不會影響它在螢幕上的顯示。一張 1000 × 1000 像素的圖,不論標 72 還是 300,在螢幕上都一樣大,因為它們的像素一樣。做螢幕用的圖,就專心看像素尺寸。

兩個像素風的瀏覽器視窗,各顯示同一張 96 × 64 px 的小屋圖,一張標 72 PPI、一張標 300 PPI,大小完全相同,下方寫著螢幕只看像素尺寸

▲ 瀏覽器依像素排版,預設一個影像像素對一個 CSS 像素。72 和 300 的檔案看起來一樣。

瀏覽器也一樣,預設是一個影像像素對到一個 CSS 像素。HTML 規格只留了一個特例:JPEG 的 Exif 資料刻意標成高密度(例如 2 倍的截圖)而且像素數對得上時,顯示大小才會跟著調整。在 Photoshop 把一般的圖改成 300,不會觸發這個特例。

社群平台寫的也是像素

Instagram 的說明(2026 年 11 月查閱)只談像素:相片最寬上傳 1080 像素;寬度在 320 到 1080 之間、長寬比介於 1.91:1 到 3:4 時保留原本的解析度,以 1080 寬來說高度是 566 到 1440 像素;更寬的會縮到 1080,太窄的會放大到 320。整頁沒有提到 PPI。

1080 px

Instagram 相片的最大寬度

3.6 英吋

1080 px 標 300 PPI 的「列印寬度」

15 英吋

1080 px 標 72 PPI 的「列印寬度」

同樣 1080 個像素,標 300 是 3.6 英吋,標 72 是 15 英吋,在手機上卻是同一張圖。這個對比最能說明 PPI 在螢幕上沒有意義。

手機用的是像素倍數

手機螢幕的密度很高:iPhone 18 Pro 是 6.3 吋、2622 × 1206 像素、460 ppi;Pixel 11 Pro 是 1280 × 2856、495 PPI(2026 年 11 月的規格)。螢幕的 PPI 是面板的物理特性,跟檔案裡的 PPI 是兩回事,手機不會因為你存 460 就畫得比較清楚。

像素風手機旁寫著現在的旗艦手機每英吋 400 多個像素,下方三顆愛心:@1x 是 8×8 像素每格 1×1、@2x 是 16×16 像素每格 2×2、@3x 是 24×24 像素每格 3×3,底下寫著 iOS 準備 @2x、@3x

▲ 畫面上的一格,可能用 2 × 2 或 3 × 3 個實體像素來畫,所以 iOS 素材要準備 @2x 和 @3x。

網頁的 devicePixelRatio 就是實體像素和 CSS 像素的比例:1 是傳統的 96 DPI 螢幕,2 是 Retina 這類高密度螢幕,現在的手機常常超過 2。Apple 的設計規範用「點」當單位:@1x 是一點一個像素,@2x 是 2 個,@3x 是 3 個,10 × 10 點的圖示要準備 10、20、30 像素三種。iOS 要 @2x 和 @3x,macOS 要 @1x 和 @2x;需要縮放的單色圖示,Apple 建議用 PDF 或 SVG。

Android 同一個 48 dp 圖示的密度階梯:mdpi 1× 48 像素、hdpi 1.5× 72 像素、xhdpi 2× 96 像素、xxhdpi 3× 144 像素、xxxhdpi 4× 192 像素,五顆愛心由小到大

▲ Android 同一個 48 dp 圖示,從 1 倍到 4 倍,分成 48 到 192 像素。

Android 的密度分級(px = dp × dpi ÷ 160)

密度

約略 dpi

倍數

48 dp 圖示

mdpi

160

1×

48 px

hdpi

240

1.5×

72 px

xhdpi

320

2×

96 px

xxhdpi

480

3×

144 px

xxxhdpi

640

4×

192 px

兩個實用細節

用 Photoshop「轉存為」輸出 @2x 素材時,Adobe 提醒奇數尺寸縮放會四捨五入,可能多出 1 像素,原始尺寸用偶數最保險。另外,同一張圖在 4K 螢幕上看起來比較小:960 × 540 的圖在 1920 × 1080 螢幕佔四分之一,在 3840 × 2160 只佔十六分之一。

CHAPTER 13 · CHECKLIST

交件前先問五件事

整理清單五行全部打勾:先問幾乘幾像素、要印時像素除以 PPI 等於英吋、網頁社群只看像素 IG 最寬 1080 px、放大補不回細節一開始就做夠大、DPI 留給印表機,右邊是像素風主持人

▲ 影片最後的整理清單。下次收到「300 DPI」的需求,照這五行走一遍就好。

1

先問:幾乘幾像素?

打開「影像尺寸」,看「尺寸」那一欄的像素數。這是判斷一張圖夠不夠大的唯一依據。

2

要印:像素 ÷ PPI = 英吋

先問成品尺寸與出血,用英吋 × PPI 回推需要的像素。近看的印刷品常用 300,大海報看距離調低。

3

網頁、社群:只看像素

PPI 標 72 或 300 都一樣。Instagram 最寬 1080 px,手機素材準備 @2x、@3x。

4

放大:補不回細節

一開始就用夠大的像素尺寸來做。真的得放大,像素畫用最接近像素,照片可以試保留細節 2.0,但要知道多出來的細節是推算的。

5

DPI 留給印表機

印表機的 dpi 和印刷廠的 LPI 由他們決定。你要給的是在成品尺寸下像素夠的檔案。

像素尺寸算對了,最後還有轉存這一關。照片、截圖、Logo 該存成哪種格式,可以接著看JPEG 怎麼存才不會糊。

CHAPTER 14 · TAKEAWAYS

重點整理

詞

意思

設計師要做的事

像素尺寸

寬 × 高幾個像素,檔案真正的資料

永遠先看它

PPI

每英吋幾個像素,決定印出來多大

印刷時用來換算:英吋 = 像素 ÷ PPI

DPI

印表機每英吋幾個墨點

留給印表機;別人說的 DPI 多半指 PPI

LPI

印刷網點每英吋幾行

問印刷廠;影像 PPI 約為 1.5~2 倍

這幾個詞會一直被混用,連檔案格式和印刷廠的說明都一樣,記住它們各自屬於誰就不會被帶著走:像素是檔案的,PPI 是印多大的,DPI 是機器的,LPI 是印刷廠的。真正需要動手確認的,只有像素夠不夠。

“

下次有人跟你要 300 DPI,先問一句:要印多大?

RELATED READS · 延伸閱讀

JPEG 怎麼存才不會糊?壓縮原理圖解

像素尺寸算對了,轉存這一步也別讓它變糊。同一系列的上一支影片。

閱讀文章 →

像素畫怎麼畫?Pixel Art 入門

從紅白機講到 HD-2D,像素畫放大為什麼只能用最接近像素。

閱讀文章 →

Photoshop 復古印刷感海報七步驟

把網點做成風格:網屏圖樣、雙色與紙紋各管哪一層。

閱讀文章 →

iOS 27 Liquid Glass 有了滑桿,設計師該怎麼設計?

手機介面的另一個變數:使用者能自己調透明度。

閱讀文章 →

瑞士風格為什麼七十年都不退流行?

排版的點、網格與字級,從 1928 年講到 Helvetica。

閱讀文章 →

純程式碼動畫怎麼做?拆解 12 種動態效果

這支影片的畫面也是程式逐格算出來的,原理在這篇。

閱讀文章 →

EXTRA · LINKS

Adobe Photoshop 說明:影像尺寸、解析度與重新取樣 像素尺寸、列印尺寸與解析度的關係

Adobe Photoshop 說明:印表機解析度 DPI、網線數與影像解析度的倍數關係

HP:大圖輸出的最佳做法(英文) 依觀看距離建議的 PPI 表

Instagram 使用說明:相片的圖像解析度 最寬 1080 像素與支援的長寬比

Apple Human Interface Guidelines:Images(英文) @1x、@2x、@3x 的規則

Android Developers:支援不同像素密度(英文) dp 與 mdpi 到 xxxhdpi

W3C CSS Values and Units Level 4(英文) 1in = 96px 與參考像素的定義

100 種 Photoshop 設計的風格

COURSE

100 種 Photoshop 設計的風格

每一張作品從開新文件做到轉存交件,像素尺寸、解析度和格式該怎麼設,跟著做一次就記住。

了解課程 →
AI 覺醒設計應用攻略

SUBSCRIPTION

AI 覺醒設計應用攻略

AI 工具每週都在更新,我幫你過濾雜訊,只留對設計師真正有用的應用。

了解訂閱 →

FAQ · 常見問題

常見問題

Q:300 DPI 和 300 PPI 一樣嗎?

A:在印表機的規格上兩者是兩件事:DPI 是印表機每英吋能放幾個墨點,PPI 是影像每英吋幾個像素。但客戶、印刷廠甚至 JPEG 檔案格式本身都習慣把影像的密度寫成 dpi,所以當有人跟你要「300 DPI 的圖」,意思通常是「印在成品尺寸時,每英吋 300 個像素」。

Q:把 72 改成 300,圖會變清楚嗎?

A:不會。取消勾選「重新取樣」時改解析度,像素一個都沒有增減,只是同一批像素印得比較小。在螢幕上兩張看起來完全一樣;印出來的成品尺寸則縮成原本的 72/300,大約四分之一寬。

Q:網頁和社群的圖一定要存 72 嗎?

A:不用。螢幕顯示只看像素尺寸,72 或 300 看起來一樣,Adobe 的說明也建議做螢幕用圖時專心看像素尺寸。72 是延續下來的習慣寫法,留著也沒有影響。Instagram 的說明只寫像素寬度:最寬 1080 像素。

Q:A4 要印刷,圖要多少像素?

A:A4 是 210 × 297 毫米。以常見的 300 PPI 計算,寬 210 ÷ 25.4 × 300 約 2480 像素,高約 3508 像素。如果印刷廠要求出血,畫布要先加上出血再換算,出血多少以印刷廠的規格為準。

Q:海報也要 300 PPI 嗎?

A:不一定。300 PPI 是近距離觀看的印刷品常用的標準,看得越遠需要越少。HP 的大圖輸出建議是:1.5 到 3 公尺外看的海報約 100 到 150 PPI,6 公尺以外的戶外布條 50 到 100 PPI。實際數字以印刷廠的建議為準。

Q:相機照片寫著 72 dpi,可以印嗎?

A:可以,能印多大看的是像素尺寸。Exif 規定解析度不明時填 72,所以很多相機檔都寫 72,它只是一個預設的標籤。例如 6000 像素寬的照片,以 300 PPI 印可以到 20 英吋,也就是約 50.8 公分寬。

Q:圖太小了,用放大或 AI 放大可以嗎?

A:傳統放大是用周圍的像素推測新像素,Adobe 明白寫著它補不回原圖沒有的細節,只會變軟或出現瑕疵。Super Resolution、生成式放大這類 AI 工具能畫出看起來合理的細節,但那些細節是模型推算出來的。能拿到更大的原始檔,永遠是第一選擇。