電商知識庫
商品圖片放大檢視完整指南
讓顧客「在螢幕上摸到」商品的視覺替代方案
電商最大的劣勢是「看不到實體」，圖片放大功能是模擬實體店仔細看商品的替代方案。研究顯示提供圖片放大的商品頁，轉換率提升 18-25%、退貨率降低 10-15%。本文涵蓋桌機懸停放大、行動版捏合縮放、360 度旋轉、解析度規格、效能優化等完整實作。
建議桌機用「懸停放大 + 燈箱」雙重支援；行動版用「捏合縮放 + 燈箱」。高客單品再加上 360 度旋轉。
經典「懸停放大」UI：商品主圖在頁面左側；滑鼠移到主圖時，主圖上出現一個半透明放大鏡方框（標示目前放大區域）；右側浮現放大視窗顯示該區域的高解析度細節；滑鼠移動時，放大區域跟著移動，能瀏覽整張圖的所有細節；滑鼠離開時，放大視窗消失。實作建議：放大倍率 3-5 倍、放大鏡視窗約 400x400px、有平滑過渡動畫。
行動版實作：點擊商品圖開啟燈箱全螢幕；雙指張開放大、合攏縮小（pinch to zoom 是 iOS/Android 原生支援）；放大後可單指拖曳瀏覽圖片不同區域；雙擊圖片快速放大到 2x、再雙擊恢復原狀；底部顯示縮圖列可切換不同角度；右上角 X 按鈕關閉燈箱。注意：燈箱開啟時要鎖定頁面捲動，避免縮放手勢誤觸發頁面捲動。
圖片規格建議：
高 DPI 螢幕（Retina）建議準備 @2x 版本。格式優先級：WebP（最小檔案、現代瀏覽器支援）> JPEG（萬用相容）> PNG（透明背景才用）。
放大功能不能拖慢網站速度：採用 Lazy Loading 策略（顧客觸發放大才載入大圖）；大圖檔案壓縮（WebP 比 JPEG 小 30%，視覺幾乎無差）；使用 CDN 加速圖片傳輸（特別是跨境顧客）；圖片快取設定 30 天以上；響應式圖片（srcset 屬性）讓不同裝置自動載入合適尺寸；首屏主圖預載（preload），其餘圖片延遲載入。
適合 360 度旋轉的商品：鞋款、包包、3C 產品、汽車用品、家具、家飾。製作流程：商品放在旋轉拍攝台上，每旋轉 10 度拍一張，共 36 張；後製去背統一背景；前端用 JavaScript 套件（如 Magic360、Cloudimage 360）串接 36 張圖；使用者拖曳滑鼠或滑手指控制旋轉。製作成本約 NT$5,000-15,000/件商品，但對高客單商品 ROI 很高。
圖片放大功能不能犧牲 SEO 與無障礙：每張圖都要有 ALT 文字（即使是放大版圖片）；JavaScript 動態載入的大圖也要被 Google 爬蟲讀取（避免完全依賴 JS）；提供鍵盤可操作的方式（如方向鍵切換圖片、ESC 關閉燈箱）；螢幕閱讀器要能朗讀圖片描述；對比度足夠（特別是燈箱介面的關閉按鈕、切換按鈕）。
NT$24,800/年起，享受完整電商解決方案：
電商最大的劣勢是「看不到實體」。研究顯示提供圖片放大的商品頁，轉換率提升 18-25%、退貨率降低 10-15%。對服飾、珠寶、手作、3C 等需要細節判斷的品類尤其重要。
桌機常用懸停放大或點擊全螢幕；行動版用捏合縮放或點擊全螢幕後滑動瀏覽。兩種版本要分別設計，不能強行套用同一機制。
建議放大圖至少 1500-2400px 寬度（縮圖約 500px）。放大比例 3-5 倍是經典標準。Retina 螢幕建議準備 2x 與 3x 兩種版本。
對高客單價、外觀重要的商品（鞋款、包包、3C、汽車用品、家具）非常值得。360 度旋轉能讓商品頁停留時間延長 1.5-2 倍。
設計得好不會。關鍵：縮圖與大圖分開儲存、觸發放大時才載入大圖、使用 WebP 格式比 JPEG 小 30%、CDN 加速圖片傳輸。