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 和裁切結果。修正后用相同网络和快取条件重測，才可判断改善來自程式变更，而不是快取或连接差異。