HTML img 語法完整教學：外連圖片的正確寫法

要在網頁中顯示圖片，使用 HTML 的 <img> 標籤。最基本的寫法只需要一個 src 屬性指向圖片網址：

<img src="https://r2.uploads.tw/2026/08/abcdefghij.webp">

但實務上只寫這樣會有幾個問題。以下逐一說明該補上哪些屬性、以及為什麼。

alt：圖片的替代文字

<img src="..." alt="陽明山夜景">

alt 在圖片載入失敗時會顯示文字，也是螢幕閱讀器唯一能理解圖片內容的依據。搜尋引擎同樣依賴它判斷圖片主題，因此對 SEO 也有幫助。純裝飾用的圖片可以寫 alt=""，表示可略過。

width / height：避免版面跳動

<img src="..." alt="..." width="1200" height="800">

如果不指定尺寸，瀏覽器在圖片下載完成前不知道它多大，只能先當成 0 高度，等載入後才撐開版面——這會造成內容突然位移（CLS），是很差的使用體驗，也會被 Google 列入頁面體驗評分。

填入圖片的原始像素尺寸即可，實際顯示大小仍可用 CSS 控制：

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

loading="lazy"：延後載入

<img src="..." alt="..." width="1200" height="800" loading="lazy">

加上這個屬性後，瀏覽器只會在圖片接近可視範圍時才下載，能大幅減少初次載入的流量。但首屏的主要圖片不要加，否則反而會延後它的顯示時間。

完整範例

<img
  src="https://r2.uploads.tw/2026/08/abcdefghij.webp"
  alt="陽明山夜景"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async">

常見的破圖原因

貼成分享頁網址而不是圖片檔網址

這是最常見的錯誤。src 必須指向圖片檔本身（結尾是 .jpg、.png、.webp），而不是展示圖片的網頁。上傳完成後請複製標示為「HTML 直接連結」的那一個。

圖床封鎖外連

部分免費空間會檢查 Referer，只允許自家網站顯示圖片。挑選圖床時要確認它支援直接外連。

HTTPS 網站引用 HTTP 圖片

若你的網站是 HTTPS，卻引用 http:// 開頭的圖片，瀏覽器會以「混合內容」為由封鎖。請確認圖片網址也是 HTTPS。

延伸：用 picture 提供多種格式

想同時相容舊瀏覽器又使用較新的 WebP 格式，可以用 <picture>：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="說明文字" width="1200" height="800">
</picture>

瀏覽器會挑選第一個支援的格式，都不支援時則回退到 <img>。若還沒有 WebP 版本，可以用線上 PNG 轉 WebP 工具快速轉換。

延伸閱讀