影像 DPI 講透：72 DPI 與 300 DPI 在網頁上到底有沒有用？

一句話結論：DPI 不是網頁畫質開關

對於一般網頁圖，72 DPI 和 300 DPI 並不能決定它在網頁上看起來是否清晰。瀏覽器真正在意的是：

• 影像的真實像素尺寸，例如 1200 × 800；
• 頁面上的 CSS 尺寸，例如寬 600 px；
• srcset、sizes 這類響應式影像規則；
• 螢幕的裝置像素比；
• 匯出檔案所用的壓縮與影像格式。

一張標為 72 DPI 的 1200 × 800 JPG 與同樣是 1200 × 800、只是標籤換成 300 DPI 的 JPG，在網頁上看基本相同，因為像素完全一樣。DPI 值本質上更像是一條列印指令。

DPI 真正開始有價值，是在影像要落到某個物理尺寸的時候。300 DPI 下的 2 × 2 英吋護照照片需要 600 × 600 像素；300 DPI 下的 4 × 6 英吋相片需要 1200 × 1800 像素。就在這時，DPI 這個數字才把像素與英吋、毫米連起來。

所以當有人說「幫我做 300 DPI」時，最好的反問是：

這是要拿去列印，還是你其實需要一張像素更多的網頁圖？

DPI、PPI、像素與 CSS 像素

DPI 在實務裡被塞進了好幾種意思，這也是網上建議常常打架的原因。

對數位影像檔案而言，PPI 是更精確的說法。檔案裡沒有墨點，只有像素。不過大家搜尋的是「DPI」、沖印店講的也是「DPI」、客戶口中的「DPI」很多時候其實是 PPI，因此本文兩個詞會並用，只是會分清楚場合。

實用公式很簡單：

像素 = 列印英吋 × PPI
列印英吋 = 像素 / PPI

一張寬 3000 像素的照片，可以在 300 PPI 下印到 10 英吋寬，也可以在 150 PPI 下印到 20 英吋寬，或在 72 PPI 下印到 41.7 英吋寬。檔案本身沒有變好或變差，只是同一組像素在紙上被擺得更密或更疏。

影像裡的 DPI 值到底在做什麼

許多影像格式可以存放一個解析度或密度值。在日常軟體裡，你會看到它以下面這些形式出現：

• 72 DPI
• 96 DPI
• 240 PPI
• 300 PPI
• Photoshop 的「解析度」欄位
• JPG 或 PNG 內嵌的橫向、縱向密度中繼資料

這個值屬於中繼資料，作用是給尊重該密度的版面或印表機一個建議尺寸，本身並不會為影像加上任何細節。

以一張 3000 × 2000 的照片為例：

像素完全一樣，只有建議列印尺寸在變。

很多人就是在這裡跌倒的。只改 DPI 欄位並不是「把圖為網頁調小了」，也不是壓縮過，更沒讓它變清晰，只是換了一張列印標籤。

瀏覽器實際上看的是什麼

在常見的網頁顯示裡，瀏覽器依靠的是檔案的像素資料以及頁面本身的版面指令。

如果 HTML 或 CSS 說這張圖要以 600 CSS 像素寬度顯示，瀏覽器就會把它排成 600 CSS 像素寬。這時如果你提供一張 1200 像素寬的原圖，就有足夠像素供 2 倍高解析螢幕使用；如果只給 400 像素寬，瀏覽器不得不把它放大，結果就是發糊。

於是網頁圖工作常常是這樣的節奏：

• 主視覺圖：按預期的最大顯示寬度匯出，必要時準備一組響應式版本。
• 部落格配圖：除非設計要求更大，通常做一份 1200-1600 px 寬的版本。
• 縮圖：貼近實際卡片尺寸匯出。
• Retina 圖示：按 CSS 尺寸的 2 倍或 3 倍準備原圖像素。
• 頁面偏慢：調像素、做壓縮，而不是去改 DPI 標籤。

MDN 關於 naturalWidth 的說明在這裡很有幫助——它用的是 CSS 像素來描述影像寬度，而不是「DPI 標籤寫多少」。MDN 關於響應式影像的指南也解釋 srcset 與 sizes 如何協助瀏覽器根據版面與裝置條件挑出合適的圖源。

技術上還有一個細節：CSS 有一個實驗性的 image-resolution 屬性，W3C CSS Images 裡也提到影像解析度中繼資料。MDN 目前把 image-resolution 標為實驗特性，指出瀏覽器支援還沒到能在正式環境使用的程度。所以在一般網頁發布時，別指望 JPG 或 PNG 的 DPI 中繼資料能左右它在頁面上的實際顯示大小。

「網頁 72 DPI」是怎麼變成傳說的

「網頁要 72 DPI」這條規則，主要是老習慣的延續。

早期桌上排版的工作流程裡，螢幕像素、點、英吋之間的關係比現在緊密得多。老式 Macintosh 螢幕的慣例常和「每英吋 72 像素」連在一起，Windows 與 CSS 一路發展下來又把 96 DPI 帶進了這個話題。W3C CSS Values 定義了 1in = 96px 的固定關係，MDN 關於解析度的文件也提到在 CSS 裡 1dppx 對應 96dpi。

但這並不代表網頁圖就要按 96 DPI 匯出。

它只是說 CSS 為自己的版面單位準備了一個參照系。實際的網頁圖仍然需要與呈現尺寸相稱的像素。寬 5000 px 的照片，不管標籤是 72 DPI 還是 300 DPI，在 300 px 的縮圖槽裡都太重；寬 400 px 的 logo，不管 DPI 欄位寫什麼，在 600 px 的槽裡都可能糊。

對於網頁圖，更值得問的是：

這張圖在版面裡會佔多少像素？為了我在意的那些螢幕，我應該提供多少原圖像素？

Photoshop 的重新取樣陷阱

Photoshop 及類似工具會把寬度、高度與解析度放進同一個對話框。對列印很方便，對網頁工作卻是陷阱。

Adobe 的影像大小文件把以下概念做了區分：

• 尺寸（Dimensions）：像素的總數。
• 寬度與高度：依單位不同而表示物理尺寸或版面尺寸。
• 解析度：為列印品質服務的每英吋像素數。
• 重新取樣：加或減像素的動作。

關鍵開關就是 重新取樣。

關掉重新取樣時，把 72 PPI 改成 300 PPI 只會改變與列印尺寸的對應關係，像素保持不變。3000 × 2000 的檔案仍是 3000 × 2000，屬於純粹的中繼資料操作。

打開重新取樣時，改解析度會依據寬度、高度欄位增加或刪減像素，影像資料會真實變動：檔案可能變大或變小，畫面可能變銳或變軟，若放大過猛還會出現插值偽影。

在網頁用途下，別再說「幫我改成 72 DPI」這種模糊指令，直接說出真正的目標：

• 「把它調到寬 1600 px。」
• 「匯出一張 320 px 的縮圖。」
• 「把這張 JPG 壓到 200 KB 以內。」
• 「為寬 600 CSS px 的槽做一張 2 倍圖，也就是匯出寬 1200 px。」

改 DPI 會讓檔案變小嗎？

大多時候不會。

只編輯 DPI/PPI 中繼資料的話，檔案大小要嘛不變，要嘛因為中繼資料本身變化了幾個位元組。影像資料依然是同一張像素格。

真正會讓檔案變小的，是下面這些動作：

• 調整像素尺寸。
• 裁掉部分內容。
• 降低 JPG/WebP/AVIF 的品質。
• 轉換到其他格式。
• 移除 EXIF 等中繼資料。
• 合併透明度。
• 減少動圖的張數或長度。

如果網站要求上傳不超過 500 KB，把 300 DPI 改成 72 DPI 是錯的解法。請改像素尺寸、做壓縮，或兩者一起做。

300 DPI 真正有意義的場景

300 DPI 是「近距離觀看的列印」常用的省略說法，意思是列印檔案裡每一英吋最終輸出對應 300 個像素。

典型的 300 DPI 場景：

• 護照與簽證照片。
• 4 × 6、5 × 7 英吋的相片沖印。
• 小型宣傳單與摺頁。
• 書籍與雜誌裡的圖片。
• 會被近距離審視的產品標籤。
• 小字與細線很關鍵的掃描檔。

對應算數：

列印場景裡物理尺寸不可省略。單說「300 DPI」資訊是不完整的：2 × 2 英吋護照照片的 300 DPI 圖是 600 × 600 像素，A4 頁面的 300 DPI 圖約 2480 × 3508 像素，是規模完全不同的兩種檔案。

300 DPI 意義不大的場景

在下列用途中死盯著 300 DPI，幾乎都是抓錯重點：

• 網站圖；
• 社群貼文；
• 電子郵件附件；
• 商品縮圖；
• 部落格截圖；
• 應用程式圖示與介面圖形；
• 會檢查像素尺寸與檔案大小的線上表單。

有些上傳窗口在說明裡提到 DPI，是因為最終結果會被列印。即便如此，窗口真正在意的常常是像素尺寸、長寬比、檔案大小、色彩模式、臉部位置等，而不是那個中繼資料標籤。當要求寫著「2 × 2 英吋，300 DPI」時，請把它換算成像素：600 × 600。

螢幕用途看像素要求；列印用途看像素要求加上物理尺寸。

Retina 與高解析螢幕並不是「300 DPI」

高解析螢幕需要比老螢幕更多的原始像素，但這跟把檔案中繼資料改成 300 DPI 是兩回事。

舉例：

• 設計中，一張商品圖以 600 CSS 像素寬顯示。
• 1 倍螢幕用一張寬 600 px 的原圖就夠。
• 2 倍螢幕可以從寬 1200 px 的原圖獲益。
• 3 倍螢幕在細節重要時可以從寬 1800 px 的原圖獲益。

影像仍可標 72、96 或 300 DPI，版面邏輯不受影響。真正決定效果的是原圖像素與顯示 CSS 像素之間的比例。

這就是為什麼響應式影像使用 1200w 或 2x 這類描述符，而不是「300dpi」。瀏覽器要依據實際渲染尺寸、螢幕密度與網路狀況，選一張像素夠用的圖。

把常見需求翻譯一下

不少 DPI 變更請求，其實想說的是別的事。動手改檔案之前，先把請求翻譯一下。

多問的這一句，通常就能擋掉大多數 DPI 相關的錯誤。

PhotoTools 是怎麼處理 DPI 相關工作的

PhotoTools 的設計思路一直圍繞真正影響輸出的東西：像素。

網頁工作：

1. 用調整尺寸確定真實的像素尺寸；
2. 有檔案大小目標就搭配壓縮；
3. 原檔案保持不動；
4. 以能看出用途的檔名匯出網頁版本，例如 hero-1600.jpg 或 card-600.webp。

護照/證件照列印：

1. 打開護照照片製作工具；
2. 選 2 × 2 英吋、35 × 45 mm 之類的預設，或自訂尺寸；
3. 工具會依所選 DPI 把物理照片尺寸換算為像素；
4. 在瀏覽器裡排出 4 × 6 或 6 × 4 英吋的列印版面；
5. 以 100 % 實際大小列印，記得關閉「符合頁面」；
6. 交件前用尺量一下印出來的照片。

本地實作會用所選照片尺寸、版面尺寸與 DPI 算出像素尺寸。例如 300 DPI 下 4 × 6 英吋的版面會變成 1200 × 1800 像素的畫布，300 DPI 下 2 × 2 英吋的照片框會變成 600 × 600 像素。

這才是真正的列印版面，而不是打開一張小小的網頁圖、把中繼資料欄位改成 300、然後祈禱列印會變清晰。

實用檢查清單

有人一提到 DPI 就動手改檔案之前，請對照這份清單：

• 目的地是網頁？先問像素尺寸與檔案大小上限。
• 目的地是列印？先問物理尺寸與目標 DPI/PPI。
• 檔案太大？改像素或壓縮，別改中繼資料。
• 影像看起來糊？檢查原圖像素、壓縮、顯示尺寸。
• 列印偏軟？算算原圖像素是否足夠。
• 列印物理尺寸不對？檢查印表機縮放與紙張尺寸。
• 是護照或簽證照片？量一下印出來的成品，並比對官方要求。

一句話總結：DPI 把像素與紙張連起來；決定網頁的是像素和 CSS。

查核過的技術資料

本文對照以下資料進行審校：

• W3C CSS Values and Units Module Level 4：CSS 絕對單位、解析度單位以及 1dppx = 96dpi 的關係。
• W3C CSS Images Module Level 4：CSS 如何定義影像解析度與 image-resolution 屬性。
• MDN: image-resolution：目前的實作說明，以及 CSS image-resolution 的實驗狀態。
• MDN: HTMLImageElement naturalWidth：瀏覽器如何以 CSS 像素處理影像尺寸。
• MDN: img 元素參考：srcset、sizes、寬度描述符以及瀏覽器選源的方式。
• Adobe Photoshop — 影像大小與解析度：Photoshop 中尺寸、解析度與重新取樣的區分。
• Adobe Photoshop — 調整大小與重新取樣：重新取樣如何改動像素資料，以及解析度、物理尺寸為何屬於列印端的概念。

結論一句：真的需要靠改 DPI 標籤解決問題的情況很少。先確定目的地，再去調整那個目的地真正需要的像素、壓縮或列印版面。