效能圖片Web 開發

圖片最佳化與 Core Web Vitals：實戰指南

圖片是網頁效能的最大影響因素。教你如何正確最佳化圖片並提升 Core Web Vitals 分數。

RunToolz Team2026年2月4日7 min read

幾年前 Google 開始用 Core Web Vitals 作為排名因素，突然之間每個人都開始關心頁面速度。但當你深挖到底是什麼讓頁面變慢時，幾乎總是同一個罪魁禍首：圖片。

在平均網頁上，圖片約佔頁面總重量的 50%。解決好圖片問題，你就解決了效能難題的一半。

三個關鍵指標

LCP（Largest Contentful Paint） ——最大可見元素載入多快。通常就是圖片。Google 要求在 2.5 秒以內。

CLS（Cumulative Layout Shift） ——頁面載入時元素跳動多少。沒有定義尺寸的圖片是主要原因。目標：低於 0.1。

INP（Interaction to Next Paint） ——頁面對使用者操作的回應多快。沉重的圖片會阻塞主執行緒並延遲互動。目標：低於 200ms。

效果是真實的

最佳化典型內容網站圖片後的變化：

| 指標 | 最佳化前 | 最佳化後 | |------|---------|---------| | 頁面重量 | 4.2 MB | 890 KB | | LCP | 4.8 秒 | 1.6 秒 | | CLS | 0.25 | 0.02 | | 載入時間（3G） | 18 秒 | 4 秒 |

這不是挑選的數據。這些數字來自我實際工作過的網站。修復並不複雜——只需要一點用心。

第 1 步：正確的尺寸，正確的格式

最大的收益是以正確的尺寸提供圖片。一張 3000px 寬的 hero 圖顯示在 1200px 上，傳送了 6 倍於所需的像素。

把圖片調整到它們的顯示尺寸。Retina 螢幕做 2 倍——如果圖片顯示在 600px，就做成 1200px。

想親自試試嗎？調整圖片大小

然後選擇正確的格式：

WebP ——同等品質下比 JPEG 小 25-35%。作為預設選擇。
AVIF ——比 WebP 還小，但編碼更慢，瀏覽器支援在跟進中。
JPEG ——通用備選。在 WebP 不可用時，照片依然好用。
PNG ——僅用於需要透明度且無法使用 WebP 的圖片。
SVG ——用於圖示、Logo 和簡單插圖。檔案極小，無限縮放。

第 2 步：大膽壓縮

大多數圖片的品質超過了螢幕能顯示的。你可以把 JPEG 壓到品質 80，沒人能看出區別——但檔案會小 40-60%。

粗略參考：

| 品質等級 | 用途 | 典型節省 | |----------|------|---------| | 90-100 | 攝影作品集 | 10-20% | | 75-85 | 一般網頁圖片 | 40-60% | | 60-75 | 縮圖、背景 | 60-80% |

不要猜測品質等級。壓縮後看結果。如果看不出區別，壓縮就是合適的。

想親自試試嗎？立即壓縮圖片

第 3 步：修復佈局位移

頁面上每張圖片都應該有明確的 width 和 height 屬性，或使用 CSS aspect-ratio。沒有這些，瀏覽器不知道要預留多少空間，圖片載入時內容就會跳動。

<!-- 好：瀏覽器知道需要的空間 -->
<img src="photo.webp" width="800" height="600" alt="描述" />

<!-- 也好：CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="描述" />

僅這一項就能讓你的 CLS 從不達標變成達標。

第 4 步：延遲載入首屏以下的圖片

如果一張圖片在頁面首次載入時不可見，就不要載入它直到使用者捲動到那裡。

<img src="photo.webp" loading="lazy" alt="描述" />

一個屬性。就這樣。但不要延遲載入你的 hero 圖或 LCP 元素——那需要立即載入。

第 5 步：使用響應式圖片

為不同的螢幕寬度提供不同的尺寸。手機不需要 1400px 的圖片。

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="描述"
/>

是的，需要產生多個尺寸。但行動裝置的頻寬節省是顯著的。