設計稿清晰、手機上變糊：一份前端選圖長文拆解DPR、壓縮與格式選擇的技術脈絡

一篇發布於2026年9月7日掘金平臺的技術長文，以「設計稿裡的圖片明明很清晰，為什麼到了手機上卻糊了」為題，系統性整理了前端圖片處理的完整脈絡。文章作者署名「不一樣的少年_」，閱讀時長標示為40分鐘，屬於技術社羣常見的深度整理型內容。本臺以回顧角度，綜合該文內容與公開技術資料，梳理其中可核實的技術要點與論證結構。

問題起點：四個看似不相關的疑問

該文並非從格式比較表切入，而是先列出前端工程師實際會遇到的一連串問題：為什麼360 CSS px寬的頁面要準備720 px的圖片；為什麼四倍圖放在二倍屏上通常不會更清楚；PNG使用無損編碼，壓縮後為什麼還會出現色帶與顆粒；同一個Logo為什麼用SVG放大不糊，用低解析度PNG卻可能發虛。

作者主張，這些問題表面各異，實際上都圍繞同一條主線：圖片檔案本身帶有多少資訊，編碼與壓縮保留了多少資訊，瀏覽器又如何把這些資訊顯示到螢幕上。

核心概念：DPR與三種像素的換算關係

文章的第一個技術重點是像素概念的拆分。作者將其分為三類：圖片像素是圖片檔案自身的最小單位；CSS像素是前端用於規定頁面尺寸的邏輯單位；物理像素則是螢幕上真正獨立顯示顏色的發光單位。三者之間的換算比例即DPR（Device Pixel Ratio，設備像素比）。

以文中反覆使用的主軸案例說明：假設一臺手機的頁面可視寬度為360 CSS px，其DPR為2。這表示1個CSS像素在橫向與縱向各由2個物理像素顯示，佔用2×2共4個物理像素。因此寬360 CSS px的頁面，在這塊二倍屏上實際使用360×2等於720個橫向物理像素。

若頁面中有一張鋪滿寬度的Banner，螢幕橫向有720個位置需要顏色資訊，圖片最好也能提供至少720個橫向圖片像素。這就是「360的頁面要用720的圖片」的由來。作者特別澄清一個常見誤解：以360 CSS px寬度顯示，並不代表瀏覽器先把圖片丟掉一半像素，最終繪製仍發生在720個橫向物理像素上。圖片與螢幕在像素數量上剛好對應時，瀏覽器不需要憑空補細節。

文中也補充了更細一層的結構：一個物理像素內部通常還由紅、綠、藍等子像素組成，但這個層級不影響對DPR的理解。以360 CSS px為設計基準時，寬360 px的圖片慣稱1倍圖，寬720 px的稱2倍圖。

為什麼四倍圖放在二倍屏不會更清楚

沿著同一條換算邏輯，文章處理了另一個常見疑問。當圖片提供的像素數量已經足以填滿目標螢幕的物理像素，繼續提高圖片解析度並不會增加螢幕能顯示的資訊量。四倍圖在二倍屏上，多出的像素無處對應，額外資訊不會轉化為更清晰的畫面，反而增加檔案體積與下載時間。

這一點在實務上的推論是：選圖的第一步不是挑格式，而是確認頁面實際顯示尺寸與目標裝置的DPR，再據此決定圖片應準備多少像素。

無損編碼為何仍出現色帶與顆粒

文章第二個技術板塊處理壓縮與色彩資訊的關係。PNG雖屬無損編碼，但「無損」指的是編碼過程不損失已存在的資訊，而非保證圖片包含完整的色彩深度。當圖片的色深或顏色量化過程先減少了可用顏色數量，漸層區域便可能出現一條條明顯的色帶；某些工具會以抖動演算法在色帶之間加入顆粒狀雜訊，試圖讓過渡看起來更平滑，這就是抖動顆粒的來源。

換言之，色帶與顆粒的根源在壓縮前後的色彩資訊處理環節，與檔案格式是否無損是兩個層面的問題。

矢量與位圖的分界

針對Logo放大的問題，文章給出的解釋是位圖與矢量圖的本質差異。SVG以幾何描述記錄圖形，放大時由顯示端重新計算繪製，理論上不隨尺寸失真；低解析度PNG的像素數量固定，放大後每個像素被拉伸到覆蓋多個物理像素，邊緣便出現模糊或鋸齒。

格式選擇的預設方向

在理論鋪陳之後，文章回到JPG、PNG、WebP、AVIF、SVG與PDF的實際選擇，並給出一組預設結論：照片與Banner優先評估WebP或AVIF，並準備JPG作為回退；透明截圖與UI素材優先PNG，也可評估WebP或AVIF；圖示與Logo優先SVG；需要保留整頁排版、交付或列印時使用PDF。

作者同時強調這只是預設方向，實際落地前須確認三件事：內容類型屬於照片、透明UI、圖示還是整頁文件；頁面實際顯示多大、目標螢幕DPR是多少；目標瀏覽器、App或交付方能否正確開啟該格式。

訊源脈絡與可核實邊界

需要說明的是，這篇掘金文章屬於個人作者的技術整理，其中的DPR換算、色帶成因與格式特性等內容，與MDN Web Docs等公開技術文件對CSS像素、設備像素比及圖片格式的描述方向一致，可交叉核實。不過文中案例數值，例如360 CSS px頁面與DPR為2的假設，是為了說明而設定的簡化情境，實際裝置的DPR分布更廣，常見手機涵蓋2至3.5以上，具體數值因機型而異。

WebP與AVIF的瀏覽器支援度也隨時間變動，文章發布當下兩者已在主流瀏覽器廣泛可用，但特定舊版環境或App內建瀏覽器仍可能不支援，這也是文中保留JPG回退建議的原因。

從技術社羣的內容樣態看，這類以單一具體情境為主軸、層層拆解概念的長文，是掘金平臺前端主題的典型深度的整理形式。該文的價值在於把散落在各處的像素、色深、編碼與格式知識，收攏到「資訊量與顯示端如何對接」這一條主線上，對照組明確，結論也有清楚的適用條件。至於個別專案的實際選型，仍需依目標裝置分布與格式支援狀況另行驗證。