商品圖上傳後變模糊：像素究竟掉在哪一關

商品圖上傳後變模糊，幾乎從來不是相機的問題。離開你電腦的那個檔案是清楚的，買家手機真正下載到的那個檔案已經不是它了——中間被重新取樣、重新編碼、依上限裁掉、再重新遞送，通常來回四、五次，而這些系統調校的目標是頁面速度，不是你的尺寸標註。

沒有人會刻意上傳一張模糊的圖。銳利度不是在上傳那一刻掉的，而是一關一關被花掉的，其中大多數關卡在賣家後台裡根本看不到。下面先用一張表把整條流程攤開，再談代價最高的三個環節該怎麼處理。

商品圖上傳後變模糊：八個環節，照順序拆

環節 1 和 2 是你的。環節 4 和 5 屬於平台，沒得談。實務上，絕大多數關於商品圖上傳後變模糊的抱怨，都追得到 3、4、7 這三關——編碼、二次編碼、螢幕——這也正是為什麼重拍一次通常什麼都沒改善。

環節 3：色度次取樣，是你那根紅色尺寸箭頭最先陣亡的原因

色度次取樣是 JPEG 編碼的一種取巧做法：亮度用完整解析度存，色彩只存其中一小部分——常見的 4:2:0 模式下，每 2×2 個像素區塊只取一個色彩樣本。亮度細節留住了，色彩細節在檔案還沒離開你電腦之前就已經被砍到四分之一。

對一張沙發照片來說，這筆交易划算。對一根畫在灰色板材上的一像素紅色箭頭來說，這筆交易糟透了：中紅壓中灰，兩者的亮度幾乎沒有差別，這根線的可見度幾乎全靠色相撐著——而色相正好是編碼器第一個丟掉的通道。線不會消失，它會暈成一道兩像素寬的粉紅色瘀痕，箭頭的尖端也不再是尖的。

解法不是把品質滑桿往上拉。解法是讓標註贏在亮度，而不是贏在色彩：

• 淺底用深色線，深底用淺色線。對比要落在亮度上，不是色相上。
• 幫線條加一圈細的對比描邊或光暈，讓邊緣撐得過 2×2 的色彩平均。
• 尺寸文字在交付尺寸下至少要有 2 px 粗，而不是在母檔尺寸下。
• 別把高飽和的紅字藍字直接壓在中間調的產品上。這兩個色相最先垮。

環節 4：沒人看得到的那次二次編碼

每個平台都會把你上傳的圖解碼，再寫一份自己的副本。JPEG 是失真格式，所以第二次編碼不只是把第一次的誤差再犯一遍——它量化的是一張本來就帶著壓縮雜訊的圖，而那些雜訊會被當成「值得保留的細節」看待。看得見的結果就是振鈴：每條硬邊緣兩側貼著一層淡淡的光暈，在白底黑字和規格圖的直線上最明顯。

這個你關不掉。你能做的是別再餵它已經受損的輸入：

• 留一份無失真母檔（PNG、TIFF 或帶圖層的原始檔）。永遠不要打開匯出好的 JPEG 再存一次。
• 一次匯出，從母檔出發，直接匯到最終像素尺寸。中間每存一次 JPEG，都是一代要你付帳的損失。
• 不要為了湊某個檔案大小目標而先壓一輪——平台自己的上限早就在管這件事了。

從環節 3 和 4 推得出一條規則：一張商品圖被 JPEG 編過幾次，比任何單次編碼時品質滑桿拉到多少更要緊。

環節 5：讓縮放功能還活著的那條像素下限

縮放是買家用來確認規格看不看得清的功能，而每個平台都替它設了像素門檻。搆不到門檻，圖不是「模糊」，而是根本沒有一份高解析度版本可以拿出來給它。

由此有兩件事。第一，上傳一個容量更大的檔案，並不會憑空補出你從來沒拍到的解析度——這跟 300 DPI 與 72 DPI 之爭 背後是同一個誤會：把檔案標頭裡存的一個數字當成了影像細節。第二，照平台上限匯出通常不用多花成本，而且永遠比照你佈景主題目前剛好顯示的尺寸匯出來得安全。

環節 7：高密度螢幕上那筆 2 倍的稅

裝置像素比，指的是瀏覽器拿多少個實體螢幕像素去畫一個 CSS 像素。現在的手機普遍回報 2 或 3。一張 1,000 像素的圖丟進 500 CSS 像素寬的版位，在舊筆電上看很銳利，在手機上就明顯發糊——因為手機要的是 1,500 個像素，拿到的只有 1,000 個。

這是賣家講「我自己螢幕上看起來很好啊」最常見的原因。你螢幕上確實很好。你的螢幕要的像素，比買家手機要的少。在你判定這個檔案沒問題之前，每一張商品圖都要拿手機以 100% 檢視一遍。

裁切會讓情況更糟。如果平台版位的形狀跟你匯出的比例不一樣，圖裡最銳利的那一塊，可能在被縮放之前就已經被切掉了——這是另一種失效，但看在眼裡跟發糊一模一樣。那是另一個要單獨處理的決定，寫在 商品圖長寬比 這篇裡。

照回報高低排序，該改哪些

1. 照平台上限、從無失真母檔、一次匯出。 單項效益最大，而且不用花錢。
2. 動品質滑桿之前，先修標註的對比。 亮度對比撐得過每一次編碼，色相撐不過。
3. 縮放之後再銳利化，絕對不要反過來。 先銳利化 6,000 px 母檔再縮小，等於把銳利化丟了，還額外附贈一圈光暈。
4. 別再讓 JPEG 來回進出。 每一個交付尺寸，都只從母檔匯出一次。
5. 在手機上驗收。 不是在桌面預覽裡，也不是在上傳視窗裡。

還有一個槓桿，位置比上面這些都更上游：標註一開始是怎麼做出來的。尺寸線和規格文字如果是以幾何圖形繪製、並且直接照交付像素尺寸匯出一次，它們撐得過平台的二次編碼，因為它們是硬邊緣、高亮度對比、以原生解析度算出來的形狀。同樣這些數字，如果是在影像編輯器裡放大檢視打上去、再整張縮小，那麼壓縮都還沒開始，它到手時就已經是糊的。有些工具能把量測吸附到產品的真實邊緣上，並依各平台規格圖的尺寸把標註好的圖匯出來，等於直接跳過環節 2 和 3——而且因為幾何是量出來的、不是生成出來的，箭頭上的數字就是捲尺上的數字，而不是某個影像模型掰出來、看起來煞有其事的一個值。如果你正在比較不同做法，替產品照加尺寸標註的工具清單 是個合理的起點。

60 秒判斷法

重拍之前先跑這一輪。它能在一分鐘左右，把商品圖上傳後變模糊的三種成因分開——像素不夠、編碼次數太多、螢幕太密：

• 用手機打開線上商品頁，兩指放大。縮放到底有沒有啟動？如果根本沒反應，代表你在平台的縮放門檻之下——這是像素數量問題，不是銳利度問題。
• 對線上那張圖按右鍵，在新分頁開啟。把它的像素尺寸和你上傳的那份比對。數字變小，代表平台裁掉了上限，或重新生了一份衍生檔。
• 把白底黑字的硬邊緣放到 200% 看。兩側有淡淡的亮色光暈，代表是二次編碼，不是沒對到焦。
• 把彩色標註線放到 200% 看。如果線往兩側暈開，而旁邊的黑字很乾淨，那就是色度次取樣。
• 檢查你上傳的那個檔案。只要它曾經被打開、又以 JPEG 存過一次，就回母檔重新匯出。
• 把母檔的最長邊和平台上限比一比。明顯偏小就重新匯大一點。

如果這六條都過了，圖還是糊，那才輪到拍攝的問題——到那一步該修的是拍攝，不是匯出。怎麼把一張圖拍得「可量測」本身就是一門功課，寫在 如何為量測而拍攝產品 這篇裡。

常見問題

為什麼我的商品圖上傳到 Shopify 後變模糊，在自己電腦上卻很清楚？

因為你電腦上看的是母檔，前台給買家的是衍生檔。Shopify 會自動把圖縮小以配合較小的螢幕，所以買家拿到的通常是一份縮過的副本，而不是你那個檔案。Shopify 接受最大 5,000 × 5,000 px、20 MB 的圖，正方形商品圖建議 2,048 × 2,048 px，而且圖必須大於 800 × 800 px 縮放才會生效；如果你上傳的遠低於這個數，那每一份衍生檔都是從「細節本來就不夠」開始的。

上傳更大的檔案會讓圖更銳利嗎？

只在你實際拍到的解析度範圍內有效。當平台的縮放門檻或衍生尺寸把顯示餓著了，加像素才有用——例如在 Amazon 或 eBay 上從 800 px 拉到 1,600 px，縮放就開了。把一張 900 px 的照片放大到 3,000 px，只會增加容量、補不出細節，而且往往還在上頭多疊一層看得見的內插糊感。

為什麼尺寸文字在主圖上看起來還行，到相簿縮圖裡就糊成一團？

縮圖是另一份衍生檔，由縮小產生。在 1,600 px 母檔裡 14 px 高的字，到 450 px 縮圖裡只剩大約 4 px 高，已經低於字形撐得過任何重新取樣的尺寸。標註文字的字級，要照它將會出現的最小那個版位來訂，不是照母檔來訂。

規格圖應該上傳 PNG 而不是 JPEG 嗎？

在平台允許的地方，對於以大面積純色、硬線條和文字為主的圖，應該——PNG 是無失真的，也不受色度次取樣影響。麻煩在於大多數平台寫入時反正都會轉成 JPEG，所以 PNG 保得住環節 2 和 3，保不住環節 4。但還是值得做：一份乾淨的輸入撐過一次二次編碼的表現，遠好過一份本來就已經受損的。

為什麼用行動網路看比連 Wi-Fi 看更差？

有些瀏覽器和網路會在連線受限時換成低品質版本，很多前台還會在真正的檔案載入完之前先顯示一張很小的模糊佔位圖。如果圖過一秒就變清楚了，那是佔位圖，沒什麼要修的。如果它一直是糊的，那就回到環節 5 到 7 一關一關往回查。

資料來源

• Shopify —— 網站圖片尺寸指南（最大尺寸、檔案大小與縮放門檻）
• Amazon Seller Central —— 商品圖片規範
• eBay 說明中心 —— 為你的刊登加入圖片
• MDN Web Docs —— Window.devicePixelRatio
• MDN Web Docs —— 響應式圖片（srcset 與 sizes）
• MDN Web Docs —— 圖片檔案類型與格式指南
• web.dev —— 選擇正確的圖片格式