網頁圖片最佳化完整攻略：提升載入速度的 7 個技巧

2026 年 3 月 · 閱讀時間約 6 分鐘

根據 HTTP Archive 的統計，圖片平均佔網頁總大小的 50% 以上。如果你的網站載入速度慢，圖片最佳化通常是最有效的改善方式。本文將介紹 7 個實用技巧，幫助你大幅提升網站速度。

1使用 WebP 格式取代 JPG/PNG

這是最直接且效果最好的方法。WebP 格式在相同畫質下比 JPG 小 25-35%，比 PNG 小 26%。2026 年，全球 97% 以上的瀏覽器已經支援 WebP。

你可以使用 HTML 的 <picture> 標籤來提供 WebP 作為首選格式，同時保留 JPG 作為備用：

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="描述文字">
</picture>

2選擇正確的壓縮品質

很多人會使用 100% 品質來「確保畫質」，但這通常是不必要的。人眼很難分辨 80% 和 100% 品質之間的差異，但檔案大小可能差了 2-3 倍。

建議的品質設定：

英雄橫幅/大圖 — 85-90%（需要較高畫質）
一般內容圖片 — 75-85%（最佳平衡點）
縮圖/預覽圖 — 60-75%（檔案小優先）
背景裝飾圖 — 50-70%（使用者不會仔細看）

3調整圖片尺寸，不要只靠 CSS 縮放

一個常見的錯誤是上傳 4000x3000 像素的相機原圖，然後用 CSS 縮小到 800x600 顯示。使用者的瀏覽器還是要下載完整的大圖。

正確做法：根據實際顯示尺寸，預先調整圖片大小。如果圖片最大顯示寬度是 800px，就把圖片縮到 800px 寬（Retina 螢幕可用 1600px）。

計算公式：圖片寬度 = 顯示寬度 × DPR。一般螢幕 DPR 為 1，Retina 螢幕 DPR 為 2。所以 400px 寬的顯示區域，圖片寬度用 800px 即可。

4使用延遲載入（Lazy Loading）

延遲載入讓瀏覽器只載入使用者目前看到的圖片，滾動到下方時才載入後續圖片。這可以大幅減少初始載入時間。

最簡單的方式是使用原生的 loading="lazy" 屬性：

<img src="photo.webp" alt="描述" loading="lazy" width="800" height="600">

注意：首屏可見的圖片（如 logo、英雄圖）不要加 lazy loading，以免影響 LCP（Largest Contentful Paint）分數。

5提供響應式圖片

不同裝置需要不同大小的圖片。手機不需要下載桌機尺寸的大圖。使用 srcset 讓瀏覽器自動選擇最合適的圖片：

<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="描述文字">

6設定適當的快取策略

圖片通常不會頻繁更改，可以設定較長的快取時間。這讓回訪使用者不需要重新下載相同的圖片。

在你的伺服器設定中加入：

# Nginx 設定範例
location ~* \.(webp|jpg|png|gif|ico)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

7使用 CDN 分發圖片

CDN（Content Delivery Network）會將你的圖片複製到全球各地的節點。使用者會從最近的節點下載圖片，大幅減少延遲。

常見的 CDN 服務：

Cloudflare — 免費方案就很好用，支援自動 WebP 轉換
Google Cloud CDN — 與 GCS 整合方便
AWS CloudFront — Amazon 的 CDN 服務
imgix / Cloudinary — 專門的圖片 CDN，支援即時轉換和裁切

總結

圖片最佳化不需要一次做到完美。建議按照以下優先順序開始：

轉換為 WebP — 效果最大，最容易執行
調整壓縮品質 — 立竿見影
調整圖片尺寸 — 避免浪費頻寬
加入延遲載入 — 改善初始載入速度
其他進階優化

第一步，就從把你的圖片轉換為 WebP 開始吧：

立即使用圖片轉 WebP 工具 →