先做這件事
WordPress 圖片最佳化：不要在沒有備份時連續試錯
圖片最佳化不是把所有圖片壓到最小。先用實際顯示尺寸輸出，再選格式與品質；首屏主圖不應盲目 lazy-load，非首屏才延遲載入。
本文聚焦「從用途尺寸、格式、響應式與載入優先級逐層優化。」。對應的使用情境是：圖片讓網站變慢，想在不模糊的情況下降低重量。。排查時請保存每一步的時間、畫面與日誌差異，才能把同時發生但無關的變更排除。
排查原則：先保存錯誤與現況，再從低風險、可回復的檢查開始；一次只改一個變因。
問題症狀
- 手機下載桌面超大圖
- 首屏空白很久才出現主圖
- 圖片載入後版面大幅跳動
把「整站、單頁、單一帳號、特定裝置」分開測試。受影響範圍越清楚，越能避免不必要地停用正常元件。
可能原因
- 01原圖尺寸遠大於顯示區。需要用錯誤日誌、Network 或隔離測試確認，不應只因時間接近就下結論。
- 02缺少 srcset／sizes 或 width／height。需要用錯誤日誌、Network 或隔離測試確認，不應只因時間接近就下結論。
- 03所有圖片都用同一載入策略。需要用錯誤日誌、Network 或隔離測試確認，不應只因時間接近就下結論。
修改前備份
先建立檔案與資料庫完整備份，下載到站外位置並確認可以讀取；另保存外掛、主題、PHP 版本與目前錯誤畫面。
若網站仍持續接收表單或訂單，先記錄備份時間與之後的新資料；整庫還原可能覆蓋這段期間的內容。
由低風險到高風險的排查順序
-
1. 盤點最大圖片與實際顯示尺寸
這一步保持唯讀或可快速回復，先蒐集證據再改設定。 -
2. 保留原始檔並產生 WebP／AVIF 版本
這一步保持唯讀或可快速回復，先蒐集證據再改設定。 -
3. 確認 WordPress 產生響應式尺寸
每完成一步就重測同一個最小重現，確認問題是否改變。 -
4. 設定首屏優先與非首屏 lazy loading
每完成一步就重測同一個最小重現，確認問題是否改變。 -
5. 在 390px 與桌面檢查清晰度、CLS 與流量
只把已在測試環境通過的最小變更套用到正式站，並立刻跑回歸測試。
每個變更都記錄檔案、設定、時間、執行者與預期結果；實際結果不同時立即回退，不把未知狀態留到下一步。
如何確認修復成功
圖片 URL 200、無明顯失真、手機取得合理尺寸、CLS 未增加且首屏 LCP 不因延遲載入惡化。
- 以原本的最小重現步驟再次測試。
- 檢查首頁、登入、REST API、表單與網站最重要的交易流程。
- 查看 PHP error log、瀏覽器 Console 與 Network 是否新增錯誤。
- 以 390px 手機寬度確認沒有版面級橫向溢位。
把症狀與證據對成一條排查路徑
| 目前看到的症狀 | 先驗證的原因 | 最小安全動作 |
|---|---|---|
| 手機下載桌面超大圖 | 原圖尺寸遠大於顯示區 | 盤點最大圖片與實際顯示尺寸 |
| 首屏空白很久才出現主圖 | 缺少 srcset／sizes 或 width／height | 保留原始檔並產生 WebP／AVIF 版本 |
| 圖片載入後版面大幅跳動 | 所有圖片都用同一載入策略 | 確認 WordPress 產生響應式尺寸 |
這張表不是用來直接判定根因，而是把「看到什麼、要查什麼、哪個動作可回復」放在同一列。若第一列的證據不成立，就不要跳到高風險修改。
如何還原
保留原媒體與附件 ID；若新版變形或 404，恢復原圖引用並重新產生縮圖。
保留失敗版本與日誌供比較，不要在回退時刪除所有證據；但任何憑證與個資必須安全遮蔽。
何時應停止自行操作
若沒有可還原備份、錯誤影響付款或個資、發現惡意程式，或需要直接修改資料庫但不理解關聯，應停止自行操作並尋求專業協助。
停止不是放棄，而是避免把可復原的錯誤變成停機、資料損失或資安事件。準備好時間線、備份、錯誤日誌與已嘗試步驟，能顯著縮短專業人員的診斷時間。
常見問題
可以直接在正式站測試嗎？
不建議。先備份並在測試環境重現，正式站只套用已驗證的最小變更。
需要關閉所有外掛嗎？
不應在沒有計畫時一次關閉。先保存清單，再用隔離或健康檢查方式逐步排除。
修好後要做什麼？
清除必要快取、重測主要流程、保存變更紀錄並確認監控沒有新錯誤。
官方文件與查核來源
以下文件用於核對 WordPress、WooCommerce、PHP 或資料庫行為。第三方外掛與主機設定仍需查閱該產品當前版本的正式文件。