圖片 SEO 總覽：格式、尺寸、載入與圖片搜尋曝光
圖片在 SEO 裡有雙重身分。一方面它通常是網頁 最重的資源，LCP 與 CLS 出問題有很高比例是圖片造成的；另一方面它是 獨立的流量來源，圖片搜尋會把使用者帶進頁面。
所以圖片最佳化同時在做兩件事：讓頁面變快，以及讓圖片被找到。
五個施力點
| 施力點 | 影響什麼 | 沒做的後果 |
|---|---|---|
| 格式選擇 | 檔案大小 | 同一張圖多下載好幾倍的位元 |
| 響應式尺寸 | 實際下載量 | 手機下載了桌機用的大圖 |
| 延遲載入 | 初次載入的資源量 | 一次載入整頁幾十張圖 |
| 替代文字 | 可存取性與圖片搜尋 | 螢幕閱讀器讀不出來，圖片搜尋找不到 |
| 預留尺寸 | 版面穩定度 | 圖片載入時整頁往下跳 |
先做這一件：標上寬高
成本最低、效果最直接
如果只做一件事，就做這件。在 <img> 上標明 width 與 height，瀏覽器在圖片還沒下載完時就知道要預留多大空間，圖片載入後不會把下方內容往下推。
<!-- 圖片載完才知道多高，整頁會往下跳 -->
<img src="/photo.webp" alt="說明文字">
<!-- 事先預留空間，版面不動 -->
<img src="/photo.webp" alt="說明文字" width="1200" height="800">要注意的是，標上寬高 不代表圖片就是那個尺寸。實際顯示大小仍由樣式決定，這兩個屬性提供的是 寬高比，讓瀏覽器算得出該留多高。詳細機制見 累積版位偏移 CLS 。
首屏圖片與其他圖片要分開處理
這是最常見的錯誤來源：把整站圖片一律加上延遲載入。
| 首屏圖片（主視覺、橫幅） | 其他圖片 | |
|---|---|---|
| 延遲載入 | 絕對不要 | 加上 loading="lazy" |
| 優先權 | fetchpriority="high" | 不必設定 |
| 解碼 | 不必設定 | 可加 decoding="async" |
<!-- 首屏主視覺：提高優先權，不延遲 -->
<img
src="/hero.webp"
alt="主視覺說明"
width="1200"
height="400"
fetchpriority="high"
>
<!-- 內文中段的圖：延遲載入 -->
<img
src="/detail.webp"
alt="細節說明"
width="800"
height="600"
loading="lazy"
decoding="async"
>首屏圖片不必碰 decoding
decoding="async" 的意思是「其他內容先呈現，這張圖晚一步解碼」，方向和首屏想盡快出現正好相反。
何況直接寫在 HTML 裡的 <img> 幾乎看不出差別，留預設的 auto 就好。真正該調的是優先權與延遲載入這兩項。
理由與更多組合見 圖片延遲載入 。
格式的取捨
| 格式 | 壓縮效率 | 相容性 | 適合 |
|---|---|---|---|
| AVIF | 最好 | 較新 | 照片，願意做降級的話 |
| WebP | 好 | 廣泛 | 大多數情境的預設選擇 |
| JPEG | 一般 | 全面 | 降級備援 |
| PNG | 差（照片） | 全面 | 需要透明的點陣圖 |
| SVG | 不適用 | 全面 | 圖示、插圖、線條圖形 |
實務上的判斷很簡單：圖示與插圖用 SVG，照片用 WebP，需要極致壓縮再考慮 AVIF 加降級。降級寫法用 <picture> ，細節見 圖片格式 。
響應式尺寸
手機不需要桌機那張 2000 像素寬的圖。用 srcset 提供多種尺寸，讓瀏覽器自己挑：
<img
src="/photo-800.webp"
srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="說明文字"
width="800"
height="600"
>sizes 常被寫錯，導致瀏覽器仍然挑了最大那張。搭配 RWD 的媒體查詢 一起看會比較清楚，寫法見 響應式圖片 。
替代文字
alt 有兩個作用：圖片載入失敗時的替代顯示，以及螢幕閱讀器與搜尋引擎理解圖片內容的依據。
| 情境 | 怎麼寫 |
|---|---|
| 有資訊的圖片 | 描述圖片傳達的內容，不必寫「圖片」 |
| 純裝飾的圖片 | alt="" 留空字串，讓輔助技術跳過 |
| 圖片就是連結 | 描述 點下去會到哪，而不是圖片長什麼樣 |
| 圖表 | 描述結論，細節放在圖表旁的文字裡 |
不要完全省略 alt
alt="" 與沒有 alt 是兩件事。前者明確表示「這張圖沒有資訊」，後者會讓部分輔助技術改念檔名。撰寫原則見 替代文字 alt 。
圖片搜尋的曝光
要讓圖片本身被找到，搜尋引擎需要三種線索：
- 替代文字：最主要的依據。
- 周圍的文字：圖說、前後段落與標題都算，用
<figure>搭配<figcaption>效果最好。 - 檔名與網址：影響很小，但用有意義的英文單字加連字號比一串亂碼好。
大多數網站不需要額外的圖片 sitemap；只有當圖片來自其他網域、由程式碼動態插入，或圖片本身就是主要內容（作品集、商品目錄）時才需要，做法見 網站地圖 sitemap.xml 。
這一組還有這些主題
| 主題 | 說明 |
|---|---|
| 圖片格式 WebP 與 AVIF | 格式比較與 <picture> 降級策略 |
| 響應式圖片 srcset 與 sizes | 描述元、媒體條件與常見寫錯的情況 |
| 圖片延遲載入 | 什麼時候用、什麼時候絕對不能用 |
| 替代文字 alt 撰寫原則 | 長度、裝飾性圖片與圖表的處理 |
常見問題
圖片最佳化該從哪一項開始？
先替所有圖片標上寬高，這一步成本最低而且直接改善版面穩定度。接著處理首屏圖片：確認它沒有被延遲載入，並轉成現代格式。響應式尺寸與圖片 sitemap 可以留到後面。
為什麼首屏圖片不能用延遲載入？
延遲載入的圖片要等瀏覽器判斷它接近可視範圍才開始下載，這道判斷本身就是延遲。如果那張圖正好是 最大內容元素 ，載入速度指標會因此明顯變差。首屏圖片應該反過來用 fetchpriority="high" 提高優先權。
圖片檔名對 SEO 有影響嗎？
有，但影響很小。檔名是搜尋引擎理解圖片內容的線索之一，用有意義的英文單字並以連字號分隔會比一串亂碼好。真正重要的是 替代文字 與圖片周圍的文字內容。
裝飾性圖片的替代文字要寫什麼？
留空字串。這會告訴螢幕閱讀器直接跳過這張圖，避免念出無意義的內容。完全不寫替代文字屬於錯誤做法，因為輔助技術可能改念檔名。純裝飾的背景圖更適合用樣式處理，不要放進標記。
需要準備圖片 sitemap 嗎？
一般網站不需要，圖片跟著頁面一起被發現就夠了。真正需要的是圖片來自其他網域、由程式碼動態插入，或圖片本身就是主要內容的網站，例如：攝影作品集與商品目錄。
