01

先分清顯示尺寸與來源尺寸

CSS 決定圖片在版面中佔多少空間，srcset 則提供不同寬度的候選檔案。瀏覽器會根據 viewport、sizes 和裝置像素比例選擇來源；只看 img 標籤的 width 並不能判斷實際下載量。

先在 360、393、768、1440 和 1920px 等代表尺寸記錄圖片的 CSS 寬度，再查看實際請求的檔案寬度。來源可以略大以照顧 DPR，但不應在 390px 手機上無原因下載 2400px 圖片。

02

讓 sizes 描述真實版面

sizes 應描述圖片在不同條件下的實際顯示寬度，而不是照抄設計稿斷點。如果文章主圖在桌面只佔內容欄 720px，寫成 100vw 會令瀏覽器經常選擇過大的檔案。

<img
  src="/hero-960.webp"
  srcset="/hero-640.webp 640w, /hero-960.webp 960w, /hero-1440.webp 1440w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="響應式版面測試畫面"
>
03

優先處理 LCP 圖片

首屏主圖若是 LCP 元素，不應被懶載入。確認它能在 HTML 早期被發現、具有正確尺寸，並按需要提高載入優先級。頁面下方的圖片則可延遲載入，減少初始競爭。

測試時重載多次並使用較慢網絡條件，確認 LCP 元素沒有在不同 viewport 意外轉成另一張背景圖或被 Cookie 橫幅、輪播首張圖取代。

04

檢查裁切、比例及版面位移

object-fit: cover 適合固定比例卡片，但重要人物、產品或文字可能被裁走。逐一檢查手機直向、手機橫向、平板和大屏，而不是只確認圖片容器沒有溢出。

  • 為圖片提供 width、height 或 aspect-ratio，預留載入空間
  • 檢查藝術指導版本是否在正確斷點切換
  • 確保替代文字描述內容，而不是重複檔名
  • 在 2× 或 3× DPR 畫面確認圖示和細線仍清晰
05

建立可重複的圖片驗收表

每個代表 viewport 記錄顯示尺寸、實際來源、檔案大小、格式、LCP 和裁切結果。修正後用相同網絡和快取條件重測，才可判斷改善來自程式變更，而不是快取或連線差異。