為Core Web Vitals最佳化圖片

# 圖片最佳化如何影響 Core Web Vitals Google 的 Core Web Vitals 是三個直接影響搜尋排名的指標。而圖片？它們影響全部三個。 ## LCP（Largest Contentful Paint） **目標：< 2.5秒** 您的首屏圖片通常是 LCP 元素。要最佳化： 1. **預先載入** LCP 圖片：`` 2. **使用 WebP** — 小 30% = 載入快 30% 3. **響應式圖片** — 不要向行動裝置提供 2000px 的圖片 4. **優先順序提示** — 首屏圖片使用 `fetchpriority="high"` ## INP（Interaction to Next Paint） **目標：< 200毫秒** 主執行緒上的繁重圖片處理會阻塞互動： 1. **延遲載入** 首屏以下的圖片 2. **非同步解碼** — `decoding="async"` 3. **使用我們的瀏覽器工具** — 處理透過 Web Workers 在主執行緒外進行 ## CLS（Cumulative Layout Shift） **目標：< 0.1** 沒有尺寸的圖片會導致版面偏移： 1. **始終指定寬度/高度** — 在 HTML 或 CSS 中 2. **使用長寬比容器** — 在圖片載入前預留空間 3. **避免內容注入** — 不要在現有內容上方載入圖片 ## 實際影響 最佳化前： - LCP: 4.2秒 ❌ - CLS: 0.25 ❌ - INP: 380毫秒 ❌ 圖片最佳化後： - LCP: 1.8秒 ✅ - CLS: 0.02 ✅ - INP: 120毫秒 ✅ ## AmberPic 的優勢 我們的工具幫助您： - 上傳前壓縮圖片（更小的 LCP） - 轉換為現代格式（更快的解碼） - 批次調整響應式斷點尺寸（合適的尺寸） --- *在圖片到達 CDN 之前進行最佳化 — [試用 AmberPic](/zh-tw/compress/)。*