圖片缺少寬高屬性導致版面位移：排查與補齊流程

作者：平白設計編輯部｜發布與最後查證：2026-09-28｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

秋季活動頁上線後，若使用者滑動頁面時版面突然跳動，通常是圖片缺少 width 與 height 屬性所致。瀏覽器無法預留空間，載入完成瞬間就會推擠下方內容，產生累積版面位移（CLS）。這不僅影響閱讀節奏，也是 Core Web Vitals 的評估項目之一。本文整理排查與補齊流程，協助前端與內容團隊穩定視覺呈現。這是技術檢查步驟，不保證 PageSpeed 分數或搜尋排名提升。

文章重點

• 圖片缺寬高屬性會導致瀏覽器無法預留空間，引發版面位移。
• CLS 是 Core Web Vitals 指標，直接影響使用者閱讀體驗。
• 用 Chrome DevTools 的 Issues 面板快速定位缺失圖片。
• CMS 應強制輸出原始尺寸，並搭配 CSS 維持響應式彈性。

為什麼圖片缺尺寸會造成版面跳動

當 img 標籤沒有寫明 width 與 height，瀏覽器在圖片下載完成前，不知道該保留多少垂直空間。文字與區塊會先貼齊頂部，等圖片一載入，整個畫面就被往下推。這種現象在網路較慢或圖片較大時特別明顯。

秋季活動頁常放滿版主視覺或多欄商品圖，若其中幾張漏寫尺寸，捲動過程就會出現多次閃爍。使用者可能因此點錯按鈕或失去閱讀位置，對品牌形象造成負面感受。這類細節可透過 改版後 favicon 路徑怎麼抽樣 等檢查清單一起納入驗收流程。

要根治這個問題，必須讓每張圖片在上屏前就佔好位子。做法很直接：在 HTML 補上原始像素的寬高屬性，再靠 CSS 控制縮放。這樣瀏覽器就能提前計算比例，避免內容被推擠。

CLS 與 Core Web Vitals 的關係

累積版面位移（Cumulative Layout Shift, CLS）衡量的是頁面生命週期中所有意外位移的總和。數值愈高代表畫面愈不穩定。Google 將它列入 Core Web Vitals，因為它直接反映使用者的視覺干擾程度。

CLS 偏高常見於廣告動態插入、字體替換延遲，以及圖片未設尺寸。其中圖片問題最容易透過模板層級一次修正。就像檢查 改版後 og:locale 怎麼抽樣 那樣，建立固定流程能避免每次上線都遺漏。

需要留意的是，補齊圖片尺寸只是降低 CLS 的必要條件之一，並非全部。動態載入的內容、第三方腳本也可能造成位移。本文聚焦在圖片排查，屬於排版穩定性的基礎檢查，不保證整體分數表現。

img {
  max-width: 100%;
  height: auto;
}

<img
  src="/img/autumn-campaign.webp"
  width="1200"
  height="630"
  alt="秋季活動主視覺"
  loading="lazy"
>

瀏覽器如何用寬高計算預留空間

現代瀏覽器只要看到 img 同時帶有 width 與 height 屬性，就會自動推算 aspect-ratio。即使圖片尚未下載，也能根據這個比例在版面配置中保留對應高度，避免後續推擠。

舉例來說，width=”800″ height=”600″ 會讓瀏覽器知道比例為 4:3。當容器寬度被 CSS 限制為 400px 時，瀏覽器會自動預留 300px 高度。前提是 CSS 不能把其中一個維度寫死而忽略另一個。

這也是為什麼只寫 width 不寫 height 仍不夠。兩個屬性必須成對出現，且代表圖片原始像素尺寸，而非顯示尺寸。顯示大小交由 CSS 的 max-width 與 height: auto 負責即可。

用 DevTools 與 Lighthouse 排查缺失

打開 Chrome DevTools，切換到 Issues 面板，瀏覽器會主動列出「Images should have explicit width and height」的警告。點擊每一項就能跳到對應的 DOM 節點，快速定位哪張圖片漏寫屬性。

若想取得完整報告，可執行 Lighthouse 效能檢測。在「Avoid large layout shifts」或「Image elements do not have explicit width and height」段落，會條列所有問題圖片及其所在網址。建議在無痕模式下跑，避免擴充套件干擾結果。

排查時別忘了檢查不同斷點。有些圖片在桌面版有尺寸、手機版卻由另一組模板渲染而遺漏。可搭配 改版後 web manifest 怎麼抽樣 的流程，把圖片尺寸驗證加入多裝置驗收清單。

修正策略與 SVG 背景圖差異

最根本的做法是在 CMS 或佈景主題層級強制輸出原始寬高。以 WordPress 為例，確保 the_post_thumbnail() 會帶入 attachment 的 metadata 尺寸。自製系統則需在上傳時記錄像素值，並於渲染時寫入 img 標籤。

響應式圖片必須搭配 CSS 規則：img { max-width: 100%; height: auto; }。這樣即使原始尺寸大於容器，圖片仍會等比縮小，且瀏覽器已根據屬性算好 aspect-ratio，不會產生位移。

SVG 若作為內聯元素使用，同樣需要在標籤上設定 width 與 height 或 viewBox。至於 CSS background-image 不參與文件流，不會造成 CLS，但要注意容器本身需有明確高度，否則區塊會塌陷。兩者處理邏輯不同，不可混為一談。

常見問題

只寫 width 不寫 height 可以嗎？

不行。瀏覽器需要兩個屬性才能正確計算 aspect-ratio 並預留空間，缺一不可。

CSS 背景圖也會造成 CLS 嗎？

背景圖不在文件流中，本身不會推擠內容。但若容器沒設高度，區塊會塌陷，仍可能影響版面。

Lighthouse 沒報錯就代表沒問題嗎？

不一定。Lighthouse 取樣有限，建議搭配 DevTools Issues 面板與實際裝置手動捲動檢查。

補齊尺寸後 PageSpeed 分數一定會上升嗎？

這是排版穩定性檢查，可降低 CLS 風險，但不保證分數或搜尋排名提升，還需綜合其他因素。

重點摘要

1. 圖片缺寬高屬性是 CLS 常見原因，需在模板層補齊。
2. 瀏覽器靠 width 與 height 自動推算比例預留空間。
3. DevTools Issues 面板與 Lighthouse 可快速定位問題。
4. 此為排版穩定性檢查流程，不保證分數或排名提升。

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣