為什麼圖片影響網站速度？量化分析與優化解決方案

「我的網站很慢，但我不知道為什麼。」這是許多網站主的困擾。通常，罪魁禍首就是圖片。未優化的圖片可以讓一個原本快速的網站變得遲緩，而優化後的圖片往往能讓頁面速度提升 50% 甚至更多。本文帶你深入了解圖片對網站速度的影響機制，以及有效的優化策略。

圖片在網頁載入中佔多少比重

根據 HTTP Archive 對全球數百萬網站的持續監測數據（2024 年數據）：

• 圖片佔桌機版平均頁面總重量的 43–53%，是所有資源類型（HTML、CSS、JavaScript、字體等）中佔比最大的
• 行動版網頁的圖片佔比略低，約 40–48%
• 平均每個桌機版網頁載入 24 張圖片，總重量約 1.5–2 MB
• 優化良好的網站，圖片總重量可控制在 500 KB 以內；未優化的網站常見 5–20 MB

這意味著，光是優化圖片，就可能讓頁面總重量縮減 30–60%，對載入速度的改善相當顯著。

圖片與 Core Web Vitals：LCP 的關鍵角色

自 2021 年起，Google 將 Core Web Vitals 納入搜尋排名因素。三個核心指標中，圖片對其中兩個有直接影響：

LCP（Largest Contentful Paint）

LCP 測量頁面最大可見內容元素完成渲染的時間。Google 的評級標準：

• 良好：2.5 秒以內
• 需要改善：2.5–4 秒
• 差：超過 4 秒

研究顯示，在大多數頁面上，LCP 元素是圖片（英雄圖、產品主圖、部落格封面圖）的概率超過 70%。換句話說，你的頁面「最大圖片」的載入速度，直接決定了你的 LCP 分數。

改善 LCP 的圖片策略：

• 將英雄圖壓縮至 200 KB 以內（使用 WebP 或 AVIF 格式）
• 為英雄圖加上 <link rel="preload">，讓瀏覽器提前下載
• 避免使用 CSS background-image 作為英雄圖（瀏覽器的預載入掃描器無法偵測到 CSS 背景圖）
• 確保英雄圖的伺服器回應時間（TTFB）低，使用 CDN 有效縮短

CLS（Cumulative Layout Shift）

CLS 測量頁面載入過程中版面跳動的累積程度。常見現象：頁面剛載入時文字整齊，圖片突然出現後整個版面往下移。這不只影響用戶體驗，也影響 CLS 分數。

解決圖片導致的 CLS：

• 在 HTML 的 <img> 標籤上明確指定 width 和 height 屬性，讓瀏覽器預先計算空間
• 使用 CSS 的 aspect-ratio 屬性：img { aspect-ratio: 16/9; width: 100%; }
• 避免在頁面載入後動態插入圖片（尤其是廣告圖片）

Lazy Loading：延遲載入非首屏圖片

「Lazy Loading（懶加載）」是一種延遲載入技術：只有當用戶滾動到圖片附近時，才開始下載該圖片。這大幅減少了頁面初始載入時需要下載的資源。

實作 Lazy Loading 最簡單的方式（現代瀏覽器原生支援）：

<img src="product-photo.jpg" alt="產品照片" loading="lazy">

使用注意事項：

• 不要對首屏圖片使用 lazy loading：英雄圖、頁面頂部的重要圖片，應使用 loading="eager"（或不設定，預設即 eager），確保立即載入
• 對首屏以下的所有圖片使用 loading="lazy"
• Lazy loading 與 preload 不衝突，可同時使用
• 瀏覽器支援率：Chrome 77+、Firefox 75+、Safari 15.4+，覆蓋率超過 92%

量化效益：一個典型的電商產品列表頁，可能有 24 張產品縮圖。啟用 lazy loading 後，初始載入只需下載前 4–6 張（首屏可見），其餘在用戶滾動時才下載。若每張縮圖 80 KB，初始節省約 1.4 MB 的下載量。

CDN（內容傳遞網路）加速圖片

CDN 是一個分布在全球各地的伺服器網路，將你的圖片複製到離用戶最近的節點。當台灣用戶訪問一個主伺服器在美國的網站，沒有 CDN 的情況下圖片需要跨太平洋傳輸（延遲可能達 200–300 ms）；有了 CDN 的台灣節點，圖片從本地伺服器提供（延遲可降至 10–20 ms）。

對圖片速度的影響：

• 顯著降低 TTFB（首位元組時間），直接改善 LCP
• 提高圖片的快取命中率，重複訪問時近乎即時
• 主流圖片 CDN（Cloudinary、imgix、Fastly Image Optimizer）還提供動態格式轉換，根據瀏覽器自動回傳 WebP 或 AVIF

對中小型網站，Cloudflare 的免費 CDN 方案已足夠應付大多數需求，設置簡單，可顯著改善全球用戶的載入速度。

壓縮的量化效益

以一個實際案例說明壓縮對速度的量化影響：

優化前：一個電商網站的商品頁面

• 5 張產品圖，每張 3 MB（原始 JPEG，未壓縮）
• 頁面圖片總大小：15 MB
• 在 100 Mbps 寬頻下的下載時間：約 1.2 秒（僅圖片部分）
• 在行動 4G（20 Mbps）下：約 6 秒（僅圖片部分）

優化後：轉換為 WebP 並壓縮

• 同樣 5 張圖，每張縮小至 150 KB（WebP，視覺品質幾乎無損）
• 頁面圖片總大小：750 KB（縮減 95%）
• 在 100 Mbps 寬頻下：約 0.06 秒
• 在行動 4G（20 Mbps）：約 0.3 秒

這個案例中，圖片優化讓行動版載入時間縮短了 5.7 秒，對用戶體驗和轉換率的影響是巨大的。

Responsive Images（響應式圖片）

現代網頁需要在各種螢幕尺寸下正確顯示。如果你在桌機和手機上都提供同樣的 1920×1080 px 圖片，手機用戶在下載一張比實際顯示尺寸大得多的圖片——純粹的浪費。

解決方案：使用 srcset 和 sizes 屬性提供多個尺寸版本：

<img
  src="product-800.jpg"
  srcset="product-400.jpg 400w,
          product-800.jpg 800w,
          product-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="產品名稱"
>

瀏覽器會根據螢幕尺寸和解析度自動選擇最適合的版本，手機用戶下載 400px 版本，桌機用戶下載 1200px 版本，各取所需，不浪費頻寬。

實際測量與工具

如何知道你的圖片優化效果如何？以下工具可幫助你量化改善幅度：

• Google PageSpeed Insights（免費）：分析頁面後，在「機會」部分列出具體的圖片優化建議，包含「轉換為新一代格式」（預估節省 KB）、「延遲載入離屏圖片」等
• WebPageTest（免費）：詳細的瀑布圖顯示每個資源的載入時間，清楚看到哪張圖片拖慢了整體速度
• Lighthouse（Chrome DevTools 內建）：按 F12 → Lighthouse 標籤 → 生成報告，會列出圖片相關優化機會
• Google Search Console：「Core Web Vitals」報告可顯示實際用戶的 LCP、CLS 體驗數據，反映圖片優化的實際效果
• GTmetrix：整合 Lighthouse 和 WebPageTest，提供更直觀的圖像化報告

完整的圖片速度優化檢查清單

1. 將所有圖片轉換為 WebP（照片）或 AVIF（最新格式），使用 <picture> 提供降級方案
2. 根據實際顯示尺寸調整圖片解析度，不讓瀏覽器做縮放工作
3. 壓縮每張圖片：照片類 JPEG 品質 65–80%，WebP 品質 75–85%
4. 使用 srcset 提供響應式圖片的多個尺寸版本
5. 為所有首屏以下的圖片加上 loading="lazy"
6. 為英雄圖和 LCP 圖片加上 <link rel="preload">
7. 在所有 <img> 標籤加上 width 和 height，防止 CLS
8. 啟用 CDN 加速圖片的全球傳遞
9. 設定適當的快取標頭（Cache-Control），讓瀏覽器快取圖片
10. 使用 PageSpeed Insights 定期監測，維持持續優化

結語

圖片是網站速度最大的變數之一。好消息是，圖片優化是所有速度優化手段中，投入產出比最高的一類：花費相對少的工作量（壓縮、格式轉換、lazy loading），就能帶來顯著的速度提升。而速度提升直接連結到更好的用戶體驗、更高的轉換率，以及更好的 Google 搜尋排名。這是一個值得優先投入的工作。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片工具