圖片尺寸與壓縮：上傳前該處理什麼？

圖片是網站變慢的頭號原因

網站在手機上載入緩慢，最大宗的原因就是圖片沒有處理。直接把手機拍的原圖上傳，一張可能好幾 MB，一頁放十張就是幾十 MB——在行動網路下，訪客等不到就走了。

而使用者對慢的容忍度很低，多數人在等待數秒後就會離開。

兩件不同的事：尺寸與壓縮

順序是先調尺寸、再壓縮。 一張 4000 像素寬的原圖，就算壓縮得再用力，也不如先縮到需要的尺寸來得有效。

各種用途的建議尺寸

以下為常見的參考值，實際依版型而定：

高解析度螢幕會需要較大的圖才不會模糊，這部分由網站端處理即可，不需要業主操心。

好的後台應該自動處理

這是最重要的一點：尺寸與壓縮不應該是業主的工作。

網站後台在上傳圖片時，應該自動：

• 依用途縮到適當尺寸
• 壓縮到合理的檔案大小
• 產生列表用的縮圖
• 視情況轉成較有效率的格式

如果沒有這些處理，遲早會有同事直接把手機原圖傳上去，網站就慢下來了——而且沒有人會發現是這個原因。

後台該具備的功能見哪些內容需要做成後台可自行管理。發包時可以直接問：「上傳一張手機拍的照片會怎麼處理？」

如果需要自己處理

幾個實用做法：

• 用線上壓縮工具——上傳、下載，不需安裝軟體。注意機密圖片不要用線上服務
• 用作業系統內建的預覽或小畫家——調整尺寸很夠用
• 批次處理——大量圖片時，用支援批次的工具一次處理

壓縮到什麼程度

沒有標準答案，方法是邊壓邊看：逐步提高壓縮率，直到開始看到畫質劣化，再退回一級。

照片通常可以壓得比想像中多而看不出差異；但有大片純色或漸層的圖（例如天空、白牆）容易出現色塊，要保守一點。

不要重複壓縮

JPG 每存一次就會損失一些細節，且無法還原。反覆開啟、編輯、儲存的圖片，畫質會逐次下降。

正確做法是保留一份原始檔，每次需要不同尺寸時都從原始檔產生，而不是從已壓縮的版本再加工。

其他影響載入速度的素材

• 影片——檔案通常比圖片大得多，需要壓縮與適當的載入策略
• 中文字型——整套中文字型可能達數 MB，是容易被忽略的負擔
• PDF——型錄動輒數十 MB，應提供壓縮版本，並註明檔案大小讓使用者決定要不要下載

怎麼檢查自己網站的圖片有沒有問題

1. 用手機的行動網路（不要用 Wi-Fi）開啟網站，感受載入速度
2. 如果明顯緩慢，先看首頁——多數問題出在首頁的主視覺與輪播圖
3. 用線上的網站速度測試工具，通常會直接指出哪幾張圖過大

手機端的其他速度問題見手機版破版與常見問題排查。