HTML 影像 img：src、alt 與載入效能屬性
<img> 可在 HTML 中，引入所需之影像。從技術上來說，圖像並未插入網頁中，而是建立一個影像的區域。藉由 src 的屬性指定影像的來源位置，才能將影像渲染在網頁上，並記得標上 width 與 height，避免載入時造成版面位移。
<img src="./images/logo.png" width="300" height="50" alt="Logo" title="商標" loading="lazy">它是沒有結束標籤的 空元素。
src
影像來源位置。
<img src="./images/logo.png">width
定義影像渲染在網頁所需的寬度。
<img width="300">height
定義影像渲染在網頁所需的高度。
<img height="50">小提醒
即使實際尺寸由 CSS 控制，也請把原始的 width 與 height 寫上。瀏覽器會先依這兩個值算出寬高比預留空間，圖片載入時版面才不會突然被推開。
alt
定義影像遺失時，所顯示的替代文字。
<img alt="Logo">它同時是螢幕閱讀器唯一能理解這張圖的依據，也是搜尋引擎判斷圖片內容的線索：
<!-- ❌ 沒有資訊量 -->
<img src="./chart.png" alt="圖片">
<!-- ✅ 描述這張圖傳達的資訊 -->
<img src="./chart.png" alt="2026 年前端框架使用率長條圖">
<!-- ✅ 純裝飾的圖片，留空讓閱讀器略過 -->
<img src="./divider.svg" alt="">留空字串與完全不寫是兩件事，後者會讓部分輔助技術改念檔名。連結圖片與圖表的特殊寫法見 圖片 alt 怎麼寫。
title
定義游標懸浮在影像上所出現的提示文字。
<img title="商標">小提醒
title 在行動裝置上看不到，也不會被多數輔助工具讀出，不能拿來取代 alt。
loading
當影像需要顯示在使用者視線之前，才去動態載入影像。
<img loading="lazy">| 值 | 說明 |
|---|---|
eager | 立即載入（預設） |
lazy | 接近視窗時才載入 |
第一屏就看得到的圖片請不要加 lazy，那會延後它的顯示；捲動後才出現的圖片才適合。首屏的圖片反而該用 fetchpriority="high" 提高優先權，這三個屬性的正確組合見 圖片延遲載入 loading=lazy。
圖片格式怎麼選
| 格式 | 適合的情境 |
|---|---|
SVG | 標誌、圖示等向量圖形，放大不失真 |
WebP | 照片與一般圖片，同畫質下檔案比 JPG 小 |
PNG | 需要透明背景的圖 |
JPG | 相容性優先的照片 |
需要依裝置切換不同尺寸或格式時，請改用 響應式影像 <picture>；圖片需要搭配說明文字時，可以用 <figure> 包起來。
常見問題
alt 該寫什麼？可以留空嗎？
寫下這張圖傳達的資訊，而不是檔名或 圖片 兩個字。若這張圖純粹是裝飾、沒有任何資訊，就把 alt 留成空字串，讓螢幕閱讀器直接略過它。
已經用 CSS 控制大小了，還要寫 width 與 height 嗎？
要。瀏覽器靠這兩個值先算出圖片的寬高比並預留空間，圖片載入後版面才不會突然被推開。這正是網頁效能指標中版面位移的主要來源之一。
loading 的 lazy 要不要每張圖都加？
不要。第一屏看得到的圖片加了反而會延後顯示，那些應該保持預設或加上高優先權；捲動之後才會出現的圖片才適合 lazy。
title 和 alt 有什麼不同？
alt 是圖片的替代文字，圖片載入失敗或使用螢幕閱讀器時會用到，屬於必要資訊；title 只是滑鼠停留時的提示，行動裝置上根本看不到，不能拿來取代 alt。
