網店應先載入哪些商品圖片？

按顧客當前任務安排圖片

網店頁面可能同時有標誌、宣傳橫幅、商品主圖、其他角度照片、推薦卡和長長的目錄縮圖。它們對顧客第一個決定的幫助並不相同。商品詳情頁的主圖常用來確認是否找到目標貨品；在目錄頁，首屏可見的第一排商品可能比裝飾橫幅更重要。先分別畫出一般手機和電腦的初始畫面，再找出當中最大、最有用的圖片。這項判斷要按實際頁面而定，不能一概認定所有主圖都要提速，或所有縮圖都要延遲。

Google 的 web.dev 指引提醒，初始畫面內或附近、尤其可能成為最大內容繪製元素的圖片，不宜設為延遲載入。瀏覽器可能要先知道延遲圖片的位置才開始請求，令顧客眼前需要的圖片遲到。把每張圖一律設成 lazy，看似整齊，卻可能拖慢第一眼體驗。反過來說，立即載入頁面深處數百張縮圖，也會在顧客尚未捲到那裏之前佔用網絡資源。應按每個頁面範本中圖片的實際位置和作用分類，再訂出該範本的初步規則，而非機械式加上同一屬性。

眼前最有用的圖片也要讓瀏覽器及早發現。若圖片網址直接放在頁面標記中，瀏覽器解析時便可找到；若要等程式取得商品資料、建立輪播後才插入，請求便可能晚很多才開始。使用 srcset 和 sizes 的響應式標記仍可及早暴露圖片網址，毋須每部裝置都下載最大檔案。對真正重要的圖片，web.dev 提到可考慮以 fetchpriority high 提示優先處理，但這是有限度使用的提示，不應套在所有圖片。先檢查圖片是否及早出現、尺寸是否合適；優先提示不能補救缺失或不合適的素材。

按顯示需要提供合適檔案

響應式頁面會改變圖片在畫面上的顯示闊度。若手機上用 CSS 縮小圖片，卻仍下載同一大檔，傳輸量仍然浪費。HTML 的響應式圖片機制容許作者以 srcset 提供不同闊度的檔案，再以 sizes 描述預期顯示闊度，由瀏覽器選擇合適來源。先量度目錄卡片與詳情頁在代表性版面上的實際尺寸，再從原始照片匯出足夠清晰的版本，並檢查瀏覽器實際選了哪個檔案。不要直接照搬別間商店的像素斷點；版面與商品照片可能完全不同。

較新的圖片格式或可減少傳輸，但視覺品質仍是商品要求。布料紋理、細小印字標籤或金屬表面，可能比平面圖更早顯出壓縮瑕疵。應以顧客實際觀看的尺寸比較代表性照片，商店若提供放大功能，也要一併檢查。高細節放大圖可待顧客主動操作才載入，毋須放進初始請求。若圖片用來顯示顏色或附送配件，替代文字及附近商品描述也要傳達相關意思；傳得快不代表資訊清晰。

圖片位元資料抵達前，就應預留其佔用空間。HTML 標準鼓勵為延遲載入圖片設定 width 和 height，讓瀏覽器先得知長寬比例，避免圖片出現後把周圍內容推走。每種素材都應用正確比例，版面亦須適應小畫面。正方形商品卡和橫幅不應強迫使用同一裁切比例，除非裁剪是經過檢查的設計決定。圖片抵達時，價格與加入購物車等重要控制元件也應保持位置穩定。佔位框只有在反映最終幾何尺寸時才有用，否則只是把跳動延後。

商品目錄常混用裁切和解像度各異的原始照片。製作響應式版本之前，應先找出本來就太小、不能用於指定位置的檔案，並記錄哪些照片需要攝影或商品負責人認可的裁切。把低質素原圖放大，不能補回商品細節。不同闊度的候選圖應維持相同主體範圍，避免瀏覽器換來源時突然裁走手柄、衣袖或隨附配件。若窄闊版面確實需要不同構圖，就把兩款裁切當作兩件編輯素材逐一檢查。這樣載入決定處理的才是真實一致的商品圖片，而不只是較少位元組。

以一頁商品目錄實際推演

假設某商品目錄在電腦初始畫面可見十二件貨，在手機只見四件。卡片上方有全闊宣傳圖，但觀察顧客任務後發現，他們主要來比較商品。團隊應檢查橫幅是否佔去最大的繪製區域，以及它是否幫助比較；若橫幅擠走了商品，調整版面可能比微調請求更有用。確定頁面結構後，讓即時需要的圖片或首排卡片先載入，真正遙遠的卡片才延後，並確保顧客快速捲動時不會只看到空框。這是假設性的規劃情境，不是任何真實商店的實測成效。

再測試詳情頁：顧客從搜尋結果進入，先看主圖，再改顏色、檢查另一角度，最後返回第一張。若主圖一開始就在眼前，就不應延遲載入。改色後的圖片應在合理時間出現，但大型目錄預先載入所有顏色和角度，可能過度消耗資源。應決定哪些圖片在改選時才取回，哪些待顧客打開相簿時才取回。快速連按時，也要驗證舊請求不會覆蓋目前顏色，替代文字亦要跟着現有圖片更新。載入策略須服從顧客當前選擇，而非只計算傳輸量。

比較應可重複，不可只依賴開發者辦公室的高速網絡。在修改前後使用同一測試頁、裝置類別、視窗尺寸和網絡條件。檢查請求時間線：重要圖片何時被發現、選了哪個候選檔案、傳輸量是多少，以及頁面深處圖片有否過早開始。之後再用真實裝置按顧客方式捲動及轉款式。若有現場數據，可再補充證據；分析服務失效也不妨礙基本正確性測試。不能憑一張截圖或一次本地測試便宣稱速度提升，應把測試條件和結果與修改一同記錄。

效能實驗不能掩蓋商品資訊錯誤。若宣傳圖說明優惠，重要條款仍應以頁面文字清楚列出，並獨立核實，不能只藏在圖片內；圖片未載入時的空框，也不能令首屏失去重要條件。同樣地，相簿縮圖應說明會打開哪個角度或款式。延後下載大圖可以合理，但不能要求顧客按下後才知道選項代表甚麼。測試時可加入一種圖片無法載入的情況，確認顧客仍能辨認商品、選擇款式及理解購買條件。

先作可驗證的小改動

首輪可先選一個具代表性的頁面範本及一個圖片問題。若商品主圖出現太遲，就讓初始標記直接包含它、移除該圖的延遲載入，並檢查選中的來源尺寸是否合適。若問題是目錄很長，就讓首屏圖片先載入，明確位於下方的圖片才延後。若檔案過大，應先提供響應式候選圖，再考慮優先提示。這些方法處理不同原因；一次全改，反而難以知道甚麼起作用。若某些裝置出現壞圖或模糊商品照，亦須有回退方法。

驗收問題應貼近實際：顧客能否及時看到與現有商品和選項相符的圖片，作出決定，而畫面沒有跳動或大片空白佔位？應在快慢網絡、窄闊畫面，以及不同形狀的圖片下檢查。需要完整圖片或文字描述的人，也應能取得相應內容。記錄哪些圖片即時載入、哪些延後，以及原因；將來宣傳活動把橫幅移至首屏時，舊決定可能要改。按頁面範本維護的簡短規則，比藏在元件庫的一刀切設定更容易持續使用。