圖片SEO最佳化：完整檢查清單

2026年3月20日 · 10 分鐘閱讀

在大多數網站上，圖片約佔頁面總體積的 50%。未最佳化的圖片是頁面 Core Web Vitals 不達標的頭號原因——而這會直接影響你的搜尋排名。本清單涵蓋 2026 年對 SEO 真正重要的每一項圖片最佳化技巧。

為什麼圖片最佳化對 SEO 很重要

Google 把頁面速度作為排名因素，而圖片通常是頁面上最重的資源。直接影響如下：

Core Web Vitals：LCP（最大內容繪製）往往是一張圖片。如果你的主視覺圖要 4 秒以上才載入，LCP 就不達標——Google 會懲罰你。
跳出率：53% 的移動訪客會在頁面載入超過 3 秒時離開（Google 資料）。
圖片搜尋流量：Google 圖片佔所有 Google 搜尋的 20-30%。正確最佳化的圖片能在圖片搜尋中排名並帶來自然流量。
抓取預算：沉重的頁面消耗更多抓取預算。更快的頁面意味著每次會話能抓取更多頁面。

速效之招：僅壓縮圖片就能讓 LCP 改善 1-3 秒。這往往就是 Core Web Vitals 達標與否的分水嶺。

完整的圖片 SEO 檢查清單

1. 壓縮每一張圖片

這是影響最大、成本最低的最佳化。上傳前壓縮所有圖片：

格式	目標質量	預期節省
JPG/JPEG	75-85%	60-75%
PNG	無損最佳化	20-40%
WebP	75-85%	相比原圖 70-85%

使用在客戶端處理圖片的工具（如 ImgMin——無需上傳），避免把敏感圖片上傳到第三方伺服器。按格式的指南：壓縮 JPG、壓縮 PNG、壓縮 WebP。

2. 使用正確的格式

WebP 用於現代網頁上的一切（97%+ 瀏覽器支援）
JPG 作為照片和複雜影像的回退
PNG 僅在你需要畫素級圖形、或在無 WebP 支援時需要透明的情況下使用
SVG 用於 Logo、圖示和簡單插畫（無限縮放、體積極小）

用 <picture> 元素提供多種格式：

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Product hero image" width="1200" height="630">
</picture>

3. 縮放到顯示尺寸

絕不要在 800×600 的位置放一張 4000×3000 的圖片。這浪費頻寬並拖累 LCP。

用 srcset 為不同視口提供不同尺寸
每張圖生成 2-3 個尺寸：移動端（640px）、平板（1024px）、桌面（1920px）
設定 sizes 屬性告訴瀏覽器該選哪個尺寸

<img
  srcset="photo-640.webp 640w, photo-1024.webp 1024w, photo-1920.webp 1920w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"
  src="photo-1024.webp"
  alt="Descriptive alt text"
  width="1200" height="800">

4. 始終設定寬度和高度

沒有明確的尺寸，瀏覽器在圖片載入前無法為其預留空間。這會造成佈局偏移——一個損害 Core Web Vitals 的 CLS（累積佈局偏移）問題。

<!-- Bad: causes layout shift -->
<img src="photo.jpg" alt="Photo">

<!-- Good: browser reserves space -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

配合 CSS 的 aspect-ratio 或 height: auto，在防止偏移的同時實現響應式表現。

5. 寫出描述性的 alt 文本

alt 文本是 Google 理解圖片內容的主要方式。好的 alt 文本能幫你在網頁搜尋和圖片搜尋中同時排名。

差的 alt 文本	好的 alt 文本
`alt=""` (empty)	`alt="Golden retriever playing fetch in a park"`
`alt="image1.jpg"`	`alt="Bar chart showing Q3 2026 revenue growth"`
`alt="photo photo photo SEO keywords"`	`alt="Red Nike running shoes on a trail"`

alt 文本指南：

描述圖片裡「有什麼」，而非它「是什麼」
保持在 125 個字元以內
自然地包含相關關鍵詞——不要堆砌
對裝飾性圖片，用 alt=""（空）以跳過螢幕閱讀器

6. 使用描述性檔名

Google 會把檔名當作圖片內容的訊號來讀取。

差：IMG_20260315_001.jpg、screenshot.png
好：golden-retriever-park.jpg、quarterly-revenue-chart.png

用連字元分隔單詞。檔名保持小寫、簡潔、有描述性。

7. 實現懶載入

懶載入會把螢幕外的圖片推遲到使用者滾動到附近時再載入。這能顯著改善首屏載入時間。

<!-- Native lazy loading (all modern browsers) -->
<img src="photo.jpg" alt="Description" loading="lazy" width="800" height="600">

<!-- Don't lazy-load above-the-fold images -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high">

重要：絕不要懶載入你的 LCP 圖片（通常是主視覺/橫幅）。對首屏圖片用 loading="eager" 和 fetchpriority="high"。其餘的都懶載入。

8. 預載入關鍵圖片

對你的 LCP 圖片，告訴瀏覽器儘早獲取它：

<link rel="preload" as="image" href="hero.webp" type="image/webp">

這能為 LCP 省下 200-500 毫秒，因為瀏覽器會在解析引用該圖片的 HTML 之前就開始下載。

9. 用 CDN 分發圖片

內容分發網路從離使用者最近的伺服器提供圖片。好處：

為全球使用者降低 50-80% 的延遲
自動格式轉換（部分 CDN 會自動提供 WebP/AVIF）
通過 URL 引數即時縮放
內建快取並帶有合適的快取頭

10. 為圖片新增結構化資料

用結構化資料幫助 Google 在上下文中理解你的圖片：

產品圖：使用 Product 架構的 image 屬性
文章圖：使用 Article 架構的 image 屬性
食譜圖：使用 Recipe 架構（富結果要求帶圖）

結構化資料中引用的圖片更有可能出現在 Google 的富結果和圖片輪播中。

11. 建立圖片站點地圖

如果你的圖片對 SEO 很重要（產品照片、資訊圖），把它們加進你的站點地圖：

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/photo.jpg</image:loc>
    <image:title>Product photo</image:title>
  </image:image>
</url>

12. 剝離不必要的後設資料

EXIF 資料（相機型號、GPS 座標、時間戳）每張圖片增加 20-100 KB。上傳前剝離它可以：

減小檔案體積
保護隱私（移除 GPS 定位資料）
對視覺質量或 SEO 無影響

Core Web Vitals 影響彙總

最佳化項	CWV 指標	典型影響
壓縮圖片	LCP	-1 到 -3 秒
縮放到顯示尺寸	LCP	-0.5 到 -2 秒
設定寬/高	CLS	消除圖片佈局偏移
懶載入	LCP, FID	更快的首屏載入
預載入 LCP 圖片	LCP	-200 到 -500 毫秒
使用 WebP	LCP	傳輸體積 -25 到 -35%
CDN 分發	LCP	延遲 -50 到 -80%

從第 1 步開始：壓縮你的圖片

ImgMin 直接在你的瀏覽器中壓縮 JPG、PNG 和 WebP。不上傳、無伺服器、無隱私風險。

免費壓縮圖片

快速參考清單

壓縮所有圖片（有損格式目標 75-85% 質量）
通過 <picture> 使用 WebP 並配 JPG/PNG 回退
把圖片縮放到實際顯示尺寸
在每個 <img> 上顯式設定 width 和 height
寫出描述性、含關鍵詞的 alt 文本
使用描述性、帶連字元的檔名
懶載入首屏以下的圖片
用 fetchpriority="high" 預載入 LCP 圖片
通過 CDN 分發圖片以獲得全球效能
為產品/文章圖片新增結構化資料
把重要圖片納入你的站點地圖
上傳前剝離 EXIF 後設資料

小結

圖片最佳化是你能做的投資回報最高的 SEO 工作。僅壓縮往往就能修復 Core Web Vitals 不達標。再配合恰當的尺寸、alt 文本、懶載入和現代格式——你會在頁面速度和搜尋排名上看到可衡量的提升。