為什麼在圖片標籤中指定 width 與 height
在建立網頁時，最常使用的標籤之一就是 <img>。然而，仍有許多情況只指定 src，而忽略了尺寸資訊。
這樣做會導致頁面在載入時產生佈局抖動，影響使用者體驗與效能指標。本文將從技術角度說明為何在 <img> 標籤中指定 width 與 height 重要，以及實際帶來的好處。
1. 影響渲染效能與頁面載入速度
1-1. 確保佈局穩定性（Stable Layout）
瀏覽器在解析 HTML 時會盡快渲染畫面。若無法得知圖片尺寸，瀏覽器就無法預先計算該元素佔據的空間。
結果，圖片載入時會把原本的內容推開，產生使用者未預期的 佈局抖動（Layout Shift）。
<img src="photo.jpg">
在此情況下，圖片載入前被視為高度為 0 的元素，載入後才顯示實際高度，導致畫面重新排版。
1-2. 降低 Cumulative Layout Shift (CLS)
CLS 是 Google Core Web Vitals 的一項指標，用來量化頁面載入時的意外佈局移動。
若在圖片中指定 width 與 height，瀏覽器即使在圖片尚未載入前，也能計算出正確的長寬比，預留所需空間。
CLS 標準
- CLS ≤ 0.1 : 良好
- CLS ≥ 0.25 : 需要改善
明確指定圖片尺寸是降低 CLS 最簡單、最有效的方法之一。
1-3. 正確認識網路頻寬
有一個常見誤解：
指定
width與height並不會減少下載的圖片檔案大小。
- 瀏覽器仍會下載原始圖片。
width/height僅作為佈局計算資訊。
實際的頻寬節省可透過以下方式實現：
- 使用
srcset/sizes - 伺服器端圖片重新調整尺寸
- 使用
<picture>元素
但即使不節省頻寬，指定尺寸能使渲染過程更穩定，使用者感知的載入效能與視覺完整度大幅提升。
2. 可及性（Accessibility）方面的優勢
2-1. 可預測的閱讀流程
可及性的核心是 alt 屬性，但佈局穩定性亦扮演輔助角色。
若圖片尺寸明確，頁面結構更可預測，使用螢幕閱讀器時內容流也不會突變，提升使用者體驗。
width與height本身不是可及性的必備項，但佈局穩定性能間接提升可及性。
2-2. 行動裝置上的佈局可預測性
行動裝置畫面有限，任何微小的佈局變動都會被放大感知。
若未指定圖片尺寸，載入時可能造成內容被推開，或縮放時元素間距突變。
明確設定圖片比例可降低此類不穩定性。
3. SEO（搜尋引擎最佳化）觀點
搜尋引擎重視頁面的載入效能與使用者體驗。
- 低 CLS 的頁面
- 初始渲染穩定的頁面
這些特性會被搜尋引擎視為高品質頁面。
此外，清晰的圖片結構有助於搜尋引擎更有效理解頁面，甚至在圖片搜尋結果中獲得正面影響。
4. 實際程式碼範例
4-1. 未指定尺寸（問題案例）
<img src="https://example.com/photo.jpg" alt="Beautiful scenery">
4-2. 指定尺寸（建議案例）
<img
src="https://example.com/photo.jpg"
alt="Beautiful scenery"
width="800"
height="600">
注意事項
width與height以像素為單位。- 在響應式佈局中，通常會搭配下列 CSS。
img {
max-width: 100%;
height: auto;
}
5. 實戰小技巧總結
| 情境 | 推薦做法 |
|---|---|
| 靜態圖片 | 指定 width 與 height |
| 響應式圖片 | width/height + max-width: 100%; height: auto; |
| 動態圖片 | 伺服器端根據元資料插入尺寸 |
| SVG | 用 viewBox 定義比例，必要時加 width/height |
6. 結論
- 確保佈局穩定 → 降低 CLS → 改善使用者體驗
- 提升渲染可預測性 → 讓感知效能更佳
- 提供 SEO 正面訊號
在圖片標籤中指定 width 與 height 不僅是程式碼風格，更是提升網頁效能與 UX 的基本原則。只要養成在加入圖片時自動設定這兩個屬性的習慣，網頁品質就會顯著提升。
以下文章也值得前端工程師參考！
目前沒有評論。