圖片優化檢查器使用教學

1) 為什麼圖片優化對 SEO 很重要？

圖片是網站效能的主要瓶頸，也是 SEO 的關鍵因素。優化圖片可以同時提升載入速度、Core Web Vitals 與圖片搜尋排名。

• 載入速度：圖片通常佔網頁總大小的 50-70%，優化圖片能顯著提升頁面速度。
• Core Web Vitals：圖片影響 LCP（Largest Contentful Paint）與 CLS（Cumulative Layout Shift）。
• 圖片 SEO：Alt 文字讓搜尋引擎理解圖片內容，提升圖片搜尋排名。
• 無障礙：Alt 文字讓視障使用者能透過螢幕閱讀器理解圖片。

2) Alt 文字（Alt Text）：圖片 SEO 的核心

Alt 文字是圖片的替代文字描述，當圖片無法顯示時會顯示這段文字。

• SEO 價值：搜尋引擎無法「看」圖片，只能透過 alt 文字理解內容。
• 無障礙：螢幕閱讀器會朗讀 alt 文字給視障使用者。
• 描述性：用簡短、具體的語言描述圖片內容與脈絡。
• 自然使用關鍵字：如果相關，可以自然加入目標關鍵字，但不要堆砌。

<!-- ❌ 不好的範例 -->
<img src="image1.jpg" alt="圖片">
<img src="product.jpg" alt="SEO SEO SEO 工具 SEO">

<!-- ✅ 好的範例 -->
<img src="keyword-density-tool.jpg" alt="關鍵字密度分析器介面截圖">
<img src="team-meeting.jpg" alt="行銷團隊討論 SEO 策略的會議照片">

<!-- 裝飾性圖片可以使用空 alt -->
<img src="decorative-border.png" alt="" role="presentation">

3) 現代圖片格式：WebP 與 AVIF

使用現代圖片格式可以大幅減少檔案大小，同時保持畫質。

• WebP：Google 開發的格式，比 JPG/PNG 小 25-35%，現代瀏覽器支援度 >95%。
• AVIF：最新格式，比 WebP 再小 20-30%，但支援度較低（~85%）。
• 後備方案：使用 <picture> 元素提供多種格式，瀏覽器會自動選擇支援的格式。

<!-- 使用 picture 提供多種格式 -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="SEO 工具平台首頁" width="1200" height="630">
</picture>

<!-- 瀏覽器會優先載入 AVIF，不支援則用 WebP，最後才用 JPG -->

4) Lazy Loading 與響應式圖片

延遲載入（Lazy Loading）與響應式圖片可以大幅減少初始載入時間。

• Lazy Loading：只有當圖片即將進入可視範圍時才載入，減少初始頁面大小。
• 原生支援：使用 loading="lazy" 屬性即可啟用，無需 JavaScript。
• 首屏圖片除外：Above the fold 的重要圖片應使用 loading="eager" 或不設定。
• 響應式圖片：使用 srcset 與 sizes 讓瀏覽器選擇最適合的尺寸。

<!-- Lazy loading（畫面外的圖片） -->
<img src="feature.jpg" alt="產品功能介紹" loading="lazy" width="800" height="600">

<!-- 響應式圖片（依裝置尺寸載入不同大小） -->
<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="SEO 工具平台首頁"
  width="1200"
  height="630"
>

<!-- 結合 picture + lazy loading -->
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="首頁橫幅" loading="lazy" width="1200" height="630">
</picture>

重要：務必設定 width 與 height 屬性，避免 CLS（Cumulative Layout Shift）問題。

5) 使用圖片優化檢查器

本站的 圖片優化檢查器 讓你快速檢查網站圖片的優化問題。

1. 輸入網址：貼上你要檢查的網頁 URL。
2. 查看報告：工具會掃描頁面上的所有圖片，並列出以下問題：
   • 缺少 alt 文字
   • 未使用現代格式（WebP/AVIF）
   • 圖片尺寸過大（超過建議大小）
   • 未設定 width/height（可能造成 CLS）
   • 未使用 lazy loading（畫面外的圖片）
3. 優先修復：依影響程度優先處理（alt 文字 > 格式 > lazy loading）。
4. 重新檢查：修復後再次檢查，確保所有問題已解決。

延伸閱讀