網路圖片檔案大小終極指南：格式與最佳化完整說明
你網站上的每張圖片都有一個隱性的檔案大小預算。超出預算，頁面載入就會變慢；控制在預算內，一切感覺瞬間完成。本指南為每種常見用途提供具體的 KB 目標值、搭配的像素尺寸，以及最適合的格式——幫你每次都做出正確的決策。
各用途參考表：理想檔案大小
下表假設你使用 WebP 或 AVIF。若必須使用 JPEG，每個數字大約需要增加 25–30%。
| 用途 | 像素寬度 | 目標檔案大小 | 建議格式 |
|---|---|---|---|
| 全版主視覺橫幅 | 1600–1920 px | 100–200 KB | WebP 或 AVIF |
| 部落格內文圖片 | 800–1200 px | 60–150 KB | WebP |
| 商品主圖 | 800–1000 px | 80–150 KB | WebP |
| 商品縮圖 | 300–400 px | 20–50 KB | WebP |
| 卡片預覽圖 | 400–600 px | 30–80 KB | WebP |
| 頭像／個人照 | 64–128 px | 5–15 KB | WebP 或 JPEG |
| Logo | 視設計而定 | 5–30 KB | SVG（優先）或 PNG |
| 圖示 | 24–48 px | 1–5 KB | SVG |
| 背景圖案（平鋪） | 200–400 px | 10–30 KB | WebP 或 PNG |
| 社群分享圖（OG 圖片） | 1200 × 630 px | 80–150 KB | JPEG 或 WebP |
這些數字從何而來
根據 HTTP Archive 2025 年資料，行動裝置網頁的中位數重量約 2.5 MB，其中圖片約佔 1 MB——大約是頁面總重量的 40%。Google 的最大內容繪製（LCP）「良好」門檻為 2.5 秒。要在 4G 連線（有效吞吐量約 1.5 MB/s）上達到這個目標，你的主視覺圖需要在一秒內載入完畢——這意味著必須控制在 200 KB 以下。
上表的目標值並非隨意訂定，而是從真實的效能預算反推而來：一個典型頁面的圖片總預算為 400–600 KB，分配至主視覺、內文和縮圖等位置。
格式選擇影響最為關鍵
同一張照片在相同視覺品質下，不同格式的檔案大小可能相差懸殊：
| 格式 | 範例：1200 px 照片 | 相對大小 |
|---|---|---|
| 未壓縮 PNG | 約 3.5 MB | 基準 |
| JPEG（品質 80） | 約 180 KB | 約 5% |
| WebP（品質 80） | 約 130 KB | 約 3.7% |
| AVIF（品質 65） | 約 90 KB | 約 2.5% |
從 JPEG 切換到 WebP 約節省 25–35%；切換到 AVIF 則比 JPEG 約省 50%。兩者都支援透明度。詳細比較請參考我們的WebP vs AVIF 指南。
現在就可以轉換你的圖片：JPG 轉 WebP、任何格式轉 AVIF，或用批次轉換一次處理多個檔案。
像素尺寸：隱藏的乘數效應
檔案大小取決於兩件事：像素數量和壓縮率。大多數人只關注壓縮，卻忽略了像素數量——但縮減尺寸的效果往往更加顯著。
一個快速計算：一張 4000 × 3000 的照片有 1200 萬個像素。縮放到 1200 × 900，只剩 108 萬個像素——原始資料量減少了 91%。在壓縮之前，你就已經消除了大部分的重量。從 4000 px 縮到 1200 px，等於 90% 的資料量縮減。
經驗法則：永遠不要提供比其顯示容器更寬的圖片。若你的部落格內文區域寬度為 720 px，服務一張 1440 px 的圖片（為 2x Retina 準備）就是上限。超過這個尺寸都是在浪費頻寬。
使用 Vizua 的調整大小工具精確縮放圖片至所需尺寸，再搭配JPEG 壓縮器或PNG 壓縮器進行最終壓縮。
第 5 步：稽核你的圖片
優化工作不應是一次性的。定期稽核你的圖片使用狀況，能確保新內容不會讓效能悄悄退步：
- Google PageSpeed Insights 會標記可以顯著縮小的圖片，並直接告訴你省下了多少 KB。
- Chrome DevTools → Network → Img 可以列出頁面上所有圖片的檔案大小，方便逐一檢查。
- LCP 元素識別：在 PageSpeed Insights 中確認你的 LCP 元素是否已正確最佳化。LCP 目標值為 2.5 秒以下。
實際範例：壓縮後的效果
起點：一張相機拍攝的照片，4000 × 3000，存為 PNG——約 14 MB。
- 調整尺寸至 1200 × 900（部落格內文寬度，2x Retina）：PNG 約 3.5 MB
- 轉換為 WebP，品質 80：約 130 KB
- 轉換為 AVIF，品質 65（若你的環境支援）：約 90 KB
從原始 PNG 到最終結果，體積縮減了 99.3%。在正常觀看尺寸下，壓縮後的影像與原始來源在視覺上完全無從區分。
各格式的詳細品質建議，請參考我們的指南：如何壓縮圖片而不損失畫質。
特殊場景
電子商務商品頁面
商品照片需要在放大時保持清晰。主圖以 800–1000 px（Retina 則 1600–2000 px）的 WebP 提供，大多數商品照片壓縮後約 80–150 KB。網格列表中的縮圖應為 300–400 px，約 20–50 KB 每張。
攝影作品集
品質至關重要，但載入速度亦然。預覽圖以 1200–1600 px 的 WebP（品質 85）提供，目標 150–250 KB。另外提供「檢視原尺寸」連結給有需要的訪客。
社群分享圖（Open Graph）
OG 圖片應為 1200 × 630 px。Facebook 和 Twitter 接受 JPEG 和 PNG；部分平台現已支援 WebP。控制在 150 KB 以下。這些圖片由爬蟲載入，不會被瀏覽器懶加載，每個位元組都有代價。
每頁圖片總預算
一個實用的框架：目標每頁圖片總重量低於 500 KB。這通常意味著：
- 1 張主視覺圖：約 150 KB
- 3–4 張內文圖片：各約 100 KB，合計約 300–400 KB
- 縮圖、頭像、圖示：合計約 50 KB
在此預算下，你的頁面在 4G 網路上能快速載入，也不會消耗過多行動資料。若需要更多圖片（相簿、電商網格），懶加載能讓初始載入控制在預算內——只有首屏以上的圖片才計入首次載入效能。
常見問題
網站圖片的理想檔案大小是多少？
取決於圖片的用途。主視覺圖應控制在 200 KB 以下，內文圖片 150 KB 以下，縮圖 80 KB 以下。這些目標假設你使用 WebP 或 AVIF 格式。若使用 JPEG，每個數字大約需要多加 25–30%。
如何在不損失畫質的情況下縮小圖片？
三個步驟：調整至實際顯示尺寸（不要在 800px 的版位提供 4000px 的圖片）、轉換為 WebP 或 AVIF 以獲得更佳壓縮率、以品質 75–85 壓縮。在這些設定下，視覺差異對人眼來說幾乎無從察覺。
Google 推薦的最大圖片大小是多少？
Google 沒有公布明確的 KB 上限，但 PageSpeed Insights 會標記任何可以顯著縮小的圖片。實際上，將單張圖片控制在 200 KB 以下、每頁圖片總重量在 500 KB 以下，能穩定獲得良好的 LCP 分數。
圖片檔案大小會影響 SEO 嗎？
是的。圖片直接影響最大內容繪製（LCP），這是 Google 三大 Core Web Vitals 指標之一。LCP 超過 2.5 秒會損害排名。由於圖片在大多數頁面上就是 LCP 元素，其檔案大小是影響 SEO 效能最大的可調因素之一。
Retina 螢幕的圖片需要是 2 倍尺寸嗎？
對於主視覺圖和重要的照片元素，是的，提供 2 倍解析度（@2x）能讓 Retina 螢幕呈現銳利效果。但搭配 `srcset` 屬性只針對高 DPI 裝置提供 2x 版本，避免所有訪客都下載大圖。縮圖和次要圖片通常可以省略 2x 版本。