圖片大小如何影響網頁效能？
根據 HTTP Archive 的統計，圖片平均佔據網頁總傳輸量的約 42%。這意味著圖片是影響網頁載入速度的最大單一因素。如果你想提升網站效能，圖片最佳化絕對是投資報酬率最高的策略。
圖片對 Core Web Vitals 的影響
Google 在 2021 年將 Core Web Vitals 列為搜尋排名因素，其中與圖片最直接相關的指標包括：
LCP（Largest Contentful Paint）
LCP 測量的是頁面上最大可見元素的載入時間。在大多數網頁中，最大元素就是一張主要圖片（Hero Image）。如果這張圖片太大，LCP 分數就會很差。
| LCP 分數 | 評級 | 對應圖片載入時間 |
|---|---|---|
| ≤ 2.5 秒 | 良好（Good） | 圖片需在 2.5 秒內完成載入 |
| 2.5 - 4.0 秒 | 需改善（Needs Improvement） | 圖片載入有延遲 |
| > 4.0 秒 | 差（Poor） | 圖片嚴重拖慢頁面 |
CLS（Cumulative Layout Shift）
如果圖片沒有設定明確的寬高屬性，當圖片載入時頁面會產生「跳動」，這會導致 CLS 分數升高。雖然這不直接與檔案大小相關，但也是圖片最佳化的一環。
FID / INP（交互性指標）
過大的圖片會佔用頻寬和主執行緒資源，進而影響頁面的互動回應速度。
實際數據：圖片大小的影響
以下是不同圖片大小對載入時間的實測影響（假設 4G 行動網路，約 10 Mbps 下載速度）：
| 單張圖片大小 | 下載時間 | 10 張圖的頁面 |
|---|---|---|
| 3 MB（未壓縮） | ~2.4 秒 | ~24 秒 |
| 500 KB（輕度壓縮） | ~0.4 秒 | ~4 秒 |
| 150 KB（良好壓縮） | ~0.12 秒 | ~1.2 秒 |
| 50 KB（高度壓縮） | ~0.04 秒 | ~0.4 秒 |
重點摘要：將圖片從 3 MB 壓縮到 150 KB（壓縮 95%），一個有 10 張圖的頁面載入時間可以從 24 秒降到 1.2 秒。在行動裝置上，這個差距更為明顯。
頻寬成本的影響
對於高流量網站，圖片頻寬的成本不容忽視：
- 假設月訪客 100 萬人次，每頁載入 2 MB 圖片
- 月頻寬消耗 = 100 萬 x 2 MB = 2 TB
- 壓縮後每頁 500 KB，月頻寬 = 500 GB，節省 75%
- 以 CDN 收費每 GB 約 $0.08 計算，每月可節省約 $120 美元
Google PageSpeed Insights 的建議
Google 的 PageSpeed Insights 工具會自動檢測圖片問題，常見的建議包括：
- Properly size images — 確保圖片實際尺寸與顯示尺寸匹配
- Serve images in next-gen formats — 使用 WebP 或 AVIF 格式
- Efficiently encode images — 使用適當的壓縮等級
- Defer offscreen images — 對非首屏圖片使用延遲載入
圖片最佳化的實用策略
1. 選擇正確的格式
不同類型的圖片適合不同格式。照片適合 JPEG 或 WebP，簡單圖形適合 PNG 或 SVG，動畫適合 WebP 或 AVIF。
2. 壓縮圖片
大多數圖片都可以在不明顯影響視覺品質的情況下壓縮 60-80%。使用我們的線上工具，你可以快速壓縮圖片並即時比較效果。
3. 使用響應式圖片
透過 HTML 的 srcset 和 sizes 屬性，為不同螢幕尺寸提供不同大小的圖片，避免在手機上載入桌面版大圖。
4. 實施延遲載入
使用 loading="lazy" 屬性，讓非首屏的圖片在使用者滾動到它們時才載入，可以大幅減少初始載入時間。
結語
圖片最佳化不是一個選項，而是現代網頁開發的必要步驟。從 SEO 排名到使用者體驗，從頻寬成本到轉換率，每一個面向都指向同一個結論：壓縮你的圖片，你的網站會因此受益。
參考文獻
- Google. "Web Vitals." web.dev, 2023. https://web.dev/vitals/
- HTTP Archive. "State of Images." HTTP Archive, 2024. https://httparchive.org/reports/state-of-images
- Akamai. "The State of Online Retail Performance." Akamai Research, 2017. https://www.akamai.com/newsroom/press-release/akamai-releases-spring-2017-state-of-online-retail-performance-report
- Google. "PageSpeed Insights." Google Developers, 2024. https://pagespeed.web.dev/