商品圖片需要讓顧客辨識外觀、材質、比例、細節和使用情境，也常是頁面最大的下載資源。只追求最高解析度會讓手機多下載用不到的資料；過度壓縮又會讓顧客無法判斷商品。圖片策略應從版位和任務建立多尺寸輸出。
先定義每種素材角色，而非所有圖片上傳同一個大檔。
建立拍攝與比例規格
主商品圖使用一致背景、距離和比例，方便集合頁比較；細節圖呈現材質、接縫或介面；比例圖提供尺寸參考；情境圖說明使用方式。每種品類可有自己的標準，但同一列表中保持穩定。
預留安全裁切區，讓直式手機、方形卡片和寬版 hero 都不切掉關鍵物件。若一張圖無法適應多個比例，使用不同 art direction 素材，不要靠任意 center crop。
由 Shopify 產生 responsive images
Theme 使用 image_url 和 image_tag 等能力請求需要的寬度、srcset 與 sizes。瀏覽器依 viewport 和 device pixel ratio 選擇候選。web.dev 指出，手機下載桌面尺寸圖片可能使用多出數倍資料；responsive image 能縮短 LCP resource load。
sizes 必須符合圖片實際顯示寬度。只產生很多 srcset candidates，卻宣告圖片永遠是 100vw，瀏覽器仍可能選過大檔案。
LCP 圖片優先發現
首屏主圖若是 LCP，不要使用 lazy loading；確保 HTML 早期就能發現，必要時依證據使用 preload 或 fetch priority。避免先顯示桌面隱藏圖，再由 JavaScript 換成手機圖，會造成重複下載與延遲。
頁面下方、carousel 尚未顯示與推薦商品圖片使用 lazy loading。Placeholder 保留寬高或 aspect-ratio，降低 CLS。
格式與品質用視覺驗收
讓 Shopify/CDN 提供合適現代格式與壓縮，原始素材仍保留足夠品質。透明商品、細線珠寶、文字截圖和攝影需要不同品質；不能用單一壓縮率。用常見手機與高密度螢幕比較檔案大小和細節，再設定規格。
影片和 360 影像另設預算，提供 poster、點擊載入和可用替代。不要在每張商品頁自動播放多支影片。
Alt 依圖片用途撰寫
主商品圖 alt 包含商品和對選購重要的 variant 或角度；不同細節圖描述可見差異。純裝飾背景使用空 alt，不把 SEO 關鍵字重複塞入每張圖。圖片含尺寸或文字資訊時，在頁面提供等價文字，不能只靠 alt 承載整張表。
Variant 切換後，圖片與 alt 一起更新並通知狀態。顏色不能只從圖片判斷，仍需文字 option label。
建立素材上稿治理
規格包含檔案類型、最小尺寸、最大容量、比例、命名、alt owner、權利與到期日。CMS 或 Shopify 後台提供清楚欄位與驗證；大量匯入前先抽樣。每季找出未使用、重複和異常大檔案。
Zoom 與 gallery 也要受控
放大功能只在原圖有足夠細節時啟用，並提供鍵盤、觸控和清楚關閉。Gallery 保留目前索引、縮圖與左右操作，讀屏能知道「第幾張、共幾張」。切換 variant 時不要把顧客突然送回第一張無關圖片。
Carousel 不應為了展示更多素材而自動快速播放。若自動播放，提供暫停並遵守 reduced motion。行動版 swipe 不能阻礙頁面垂直捲動。
市場與 variant 資產要對應
包裝文字、法規標示和情境圖可能依市場不同。建立 market override 與 fallback 規則，並在發布前檢查 locale。Variant 圖片使用穩定關聯，不只靠檔名或上傳順序；ERP 或 PIM 同步後也不能把手工排序洗掉。
用資源預算管理活動
為集合卡、商品首屏、完整 gallery 和內容 section 設定單張與總下載預算。大促加入新 banner、影片與 App 時，在相同網路條件比較。若 LCP 或總傳輸超過護欄，先調整素材與載入順序，而非等上線後再壓縮。
驗收首頁、集合、商品、zoom、variant、手機和慢網路，記錄 LCP 元素、下載尺寸與 CLS。圖片改善仍要回到 商品頁資訊層級，確保速度沒有犧牲顧客需要的商品證據。