網頁圖片優化完全指南

為什麼圖片優化如此重要？

根據 HTTP Archive 的統計，圖片平均佔網頁總體積的 50% 以上。一個未經優化的網站，圖片載入時間可能佔頁面總載入時間的 60-80%。這不僅影響使用者體驗，更直接衝擊 SEO 排名。

Google 的 Core Web Vitals 指標中，LCP（Largest Contentful Paint） 與圖片密切相關。如果你的首屏大圖載入過慢，LCP 分數將大幅下降，直接影響搜尋排名。

圖片優化的三大效益

提升網頁載入速度：壓縮後的圖片可減少 50-90% 的檔案大小
改善 SEO 排名：Core Web Vitals 是 Google 排名因素之一
降低頻寬成本：對於高流量網站，圖片優化可大幅降低 CDN 費用

圖片格式比較與選擇

JPEG — 照片的首選

JPEG 使用有損壓縮，最適合色彩豐富的照片。品質設定 80-85 通常是最佳平衡點。

優點：壓縮率高、瀏覽器支持完美、色彩表現佳缺點：不支持透明度、有損壓縮會降低品質、不支持動畫

適用場景：產品照片、風景圖、人像照

PNG — 需要透明度時使用

PNG 使用無損壓縮，支持完整的 Alpha 透明通道。適合圖標、Logo、截圖等需要銳利邊緣的圖形。

優點：無損壓縮、支持透明度、色彩精確缺點：檔案較大、不適合照片

適用場景：Logo、圖標、文字截圖、需要透明背景的圖形

WebP — 現代網站的最佳選擇

Google 開發的 WebP 格式同時支持有損和無損壓縮，壓縮率比 JPEG 高 25-35%，比 PNG 高 26%。

優點：壓縮率極高、支持透明度和動畫、瀏覽器支持率超過 97% 缺點：部分舊版瀏覽器不支持（IE11）

適用場景：幾乎所有網頁圖片用途

AVIF — 下一代壓縮王者

AVIF 基於 AV1 視頻編碼，壓縮率比 WebP 再高 20-50%。是目前壓縮效率最高的圖片格式。

優點：極高壓縮率、支持 HDR、支持透明度缺點：編碼速度較慢、瀏覽器支持率約 92%

適用場景：追求極致壓縮的高流量網站

格式選擇決策樹

需要透明度？
├── 是 → 需要動畫？
│   ├── 是 → WebP / AVIF
│   └── 否 → WebP (PNG 備用)
└── 否 → 是照片嗎？
    ├── 是 → WebP (JPEG 備用)
    └── 否 → SVG（向量圖）或 WebP

圖片壓縮策略

有損壓縮最佳實踐

品質設定的最佳平衡點：

格式	推薦品質	檔案大小減少	視覺差異
JPEG	80-85%	60-70%	幾乎看不出
WebP	75-80%	70-80%	幾乎看不出
AVIF	60-70%	80-90%	幾乎看不出

無損壓縮技巧

即使使用無損壓縮，仍有許多優化空間：

移除 EXIF 資料：照片中的 EXIF 資料（相機資訊、GPS 等）通常佔 10-50KB
優化調色板：PNG 減少不必要的色彩數可大幅縮小檔案
去除 ICC 色彩描述檔：網頁顯示不需要列印級色彩精確度

自動化壓縮工具

命令列工具推薦：

# JPEG 優化
jpegoptim --max=85 --strip-all image.jpg

# PNG 優化
pngquant --quality=65-80 image.png
optipng -o5 image.png

# WebP 轉換
cwebp -q 80 image.jpg -o image.webp

# AVIF 轉換
avifenc --min 20 --max 30 image.png image.avif

響應式圖片實作

srcset 與 sizes 屬性

現代瀏覽器支持根據螢幕大小和解析度自動選擇最適合的圖片：

<img
  srcset="image-400w.webp 400w,
          image-800w.webp 800w,
          image-1200w.webp 1200w,
          image-1600w.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="image-800w.webp"
  alt="產品展示圖"
  width="800"
  height="600"
  loading="lazy"
>

picture 元素與格式降級

使用 <picture> 元素可以實現格式自動降級：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="產品圖" width="800" height="600" loading="lazy">
</picture>

瀏覽器會依序嘗試：AVIF → WebP → JPEG，自動選擇支持的最佳格式。

Lazy Loading 最佳實踐

原生 Lazy Loading

現代瀏覽器原生支持 Lazy Loading，只需加上 loading="lazy" 屬性：

<img src="image.webp" alt="..." loading="lazy" width="800" height="600">

重要：首屏的圖片（Above the fold）不要加 lazy loading，否則會延遲 LCP。只對捲動後才看到的圖片使用。

Lazy Loading 策略

首屏圖片 → loading="eager"（或不加）+ fetchpriority="high"
第二屏圖片 → loading="lazy"
第三屏以後 → loading="lazy" + decoding="async"

佔位技巧

避免圖片載入時的版面跳動（CLS）：

明確指定寬高：永遠加上 width 和 height 屬性
使用 aspect-ratio：aspect-ratio: 16/9 可以預留空間
模糊佔位：使用極小的模糊圖片（BlurHash）作為佔位

Core Web Vitals 優化

LCP（Largest Contentful Paint）

LCP 通常是首屏的最大圖片。優化策略：

預載入 LCP 圖片：<link rel="preload" as="image" href="hero.webp">
使用 fetchpriority="high"：告訴瀏覽器優先載入
避免 CSS 背景圖片：使用 <img> 標籤讓瀏覽器預掃描器更早發現
使用 CDN：減少 TTFB（Time to First Byte）

CLS（Cumulative Layout Shift）

圖片相關的 CLS 問題：

永遠設定 width/height：讓瀏覽器預留空間
使用 aspect-ratio CSS：更靈活的響應式佈局
避免用 JS 動態插入圖片

INP（Interaction to Next Paint）

圖片處理不會直接影響 INP，但解碼大圖可能阻塞主線程：

<img src="large-image.webp" decoding="async" alt="...">

SEO 圖片優化

Alt 文字最佳實踐

<!-- 不好：空白或無意義 -->
<img src="photo.jpg" alt="">
<img src="photo.jpg" alt="圖片">

<!-- 好：描述性的 alt 文字 -->
<img src="photo.jpg" alt="2026年春季新款紅色洋裝，模特兒在花園中展示">

圖片 SEO 清單

使用描述性檔名（red-dress-spring-2026.webp 而非 IMG_0001.webp）
每張圖片都要有 alt 屬性
使用 <figure> 和 <figcaption> 提供額外語境
在 sitemap 中包含圖片資訊
使用 Schema.org ImageObject 結構化資料

常見問題 FAQ

Q：圖片應該壓縮到多大？

A：一般建議單張圖片不超過 200KB。Hero 圖片可以放寬到 300-500KB。縮圖和圖標控制在 50KB 以內。

Q：WebP 和 AVIF 哪個更好？

A：AVIF 壓縮率更高，但編碼慢且瀏覽器支持率稍低。建議用 <picture> 同時提供兩種格式，讓瀏覽器自動選擇。

Q：SVG 適合什麼場景？

A：SVG 適合圖標、Logo、插圖等向量圖形。優點是無限縮放不失真，檔案通常很小。但不適合照片。

Q：如何測試圖片優化效果？

A：使用 Google PageSpeed Insights、Lighthouse、或 WebPageTest。Super Tools 的網站掃描工具也會檢查圖片優化狀況。

Q：CDN 對圖片載入有多大幫助？

A：CDN 可以減少 50-80% 的圖片載入時間，特別是對國際用戶。主流 CDN（Cloudflare、AWS CloudFront）還支持自動格式轉換和壓縮。

結語

圖片優化是網頁效能最重要的優化項目之一。通過選擇正確的格式、合理的壓縮品質、響應式圖片、Lazy Loading、以及 CDN 加速，你可以讓網頁載入速度提升 2-5 倍，同時改善 Core Web Vitals 分數和 SEO 排名。使用 Super Tools 的圖片壓縮工具和網站掃描功能，持續監控和優化你的網站圖片。