WooCommerce 商品圖片教學：主圖、圖庫、尺寸與清晰度排查

商品圖片是 WooCommerce 商品頁最重要的信任元素之一。主圖要讓顧客迅速辨識商品，圖庫則補充角度、尺寸、材質、包裝和使用細節。建立一致的圖片流程，能減少模糊、裁切不一、重複圖片和上架後才重做的成本。

分清主圖、目錄圖與縮圖

WooCommerce 會在不同位置使用同一張原始商品圖片的不同尺寸：商品詳情頁會顯示較大的主圖，商店和分類列表使用目錄圖，購物車與圖庫導覽則使用較小縮圖。主圖不是只供商品頁使用，因此圖片構圖要在正方形或主題預設比例的裁切下仍可辨認。

每款商品建立獨立資料夾，保留未壓縮原檔、已裁切版本和發佈版本。命名可用商品 slug 加序號，例如 product-name-01、product-name-detail-02，避免「IMG_0001」這類日後無法辨識的檔名。離線原檔是重新裁切、換主題或修正誤刪圖片時的可靠備份。

WooCommerce 官方建議商品圖片至少 800 × 800 像素；有細節的商品應使用更大的高品質原檔。全店盡量採用一致比例，例如正方形或直式比例，讓分類頁卡片整齊。不要把低解析圖強行放大，也不要只為減少檔案而過度壓縮，否則縮放或放大檢視時容易失焦。

到「商品 > 所有商品」開啟商品，在 Product image 區域選擇媒體庫圖片或上傳新檔。主圖應只保留一個，優先選擇最能交代商品本體的角度；避免把促銷文字、角標或多種商品塞進主圖，因為小尺寸目錄圖會難以閱讀。

在 Product gallery 加入其餘圖片。建議順序是：正面或整體、另一角度、細節、比例或尺寸參考、使用情境、包裝。圖庫可拖曳排序，應按顧客最常問的問題排列，而非按拍攝日期。上傳後在前台確認第一張主圖沒有重複出現在圖庫造成視覺混亂。

替代文字應描述圖片內容和商品差異，例如「深藍色防水背包正面有拉鍊口袋」，不要只重複商品名稱或堆砌關鍵字。它能協助使用輔助科技的讀者理解圖片，也令媒體庫日後更容易搜尋。純裝飾性圖片可保留空白替代文字，重點是不要虛構不存在的特點。

更換主題、調整 WooCommerce 圖片設定或修改縮圖比例後，舊圖片尺寸未必會自動符合新版面。先以三至五件代表商品測試：橫向、直向、淺色、深色及細節商品。檢查分類頁、相關商品、手機版和購物車的裁切；若顯示舊縮圖，按網站的工具或主題指引重新產生縮圖。

模糊通常源於原圖尺寸不足、主題裁切放大或舊縮圖未更新；載入太慢則常與原檔過大、格式不當或未啟用圖片最佳化有關。先保留高品質原檔，再輸出適合網頁的版本。不要直接覆蓋唯一原檔；先在測試商品驗證畫質、色彩和檔案大小。

不同顏色、尺寸或款式若外觀明顯不同，應為各變體提供相應圖片，避免顧客選擇藍色後仍看到紅色主圖。核心設定能處理每個 variation 的圖片；若需要每個變體各自有完整圖庫，先確認主題和擴充功能是否支援，並在手機與桌面都測試切換行為。

確認每件商品有主圖、圖庫順序正確、裁切一致、替代文字可理解、放大檢視正常，並以未登入狀態打開商品頁。最後查看商店頁、分類頁、搜尋結果和分享預覽；圖片在單一商品頁好看，不代表在所有版面都合格。