網頁圖片檔案大小與格式實用指南
每張圖片都會使用網路、解碼、記憶體與算繪資源。有用的預算應針對頁面，考慮圖片角色、受眾、快取、視窗與品質需求。以下範圍是測試起點，不是通用的通過或失敗界線。
各用途的起始預算
這些範圍示範克制的網頁傳送預算。JPEG、WebP或AVIF結果可能高於或低於它們；請依來源、編碼器、顯示尺寸、實際效能與目視檢查調整。
| 用途 | 像素寬度 | 目標檔案大小 | 建議格式 |
|---|---|---|---|
| 全寬主視覺橫幅 | 1600–1920px | 100–200 KB | WebP 或 AVIF |
| 部落格內文圖片 | 800–1200px | 60–150 KB | WebP |
| 商品主圖 | 800–1000px | 80–150 KB | WebP |
| 商品縮圖 | 300–400px | 20–50 KB | WebP |
| 卡片／預覽圖 | 400–600px | 30–80 KB | WebP |
| 頭像／個人照 | 64–128px | 5–15 KB | WebP 或 JPEG |
| Logo | 依需求而定 | 5–30 KB | SVG（優先）或 PNG |
| 圖示 | 24–48px | 1–5 KB | SVG |
| 背景圖案 | 200–400px（拼貼） | 10–30 KB | WebP 或 PNG |
| 社群分享圖（OG 圖片） | 1200 x 630px | 80–150 KB | JPEG 或 WebP |
把起始範圍轉為你的預算
HTTP Archive頁面重量報告提供目前的分布資料，但全球中位數並不代表你的受眾。Google公布的「良好」LCP門檻是造訪第75百分位的2.5秒。請用實際資料與瀑布圖，把時間分配給伺服器回應、資源發現、傳輸、解碼與算繪延遲。
先從整頁傳輸預算開始，把更多額度分給對使用者價值最高的圖片。版面、圖片數、受眾或品質需求改變時，重新檢視表格範圍。
格式是主要變數之一
同一來源會因編碼器與品質目標而產生很不同的大小。此表顯示應比較的行為，不是1200像素照片的通用基準結果。
| 格式 | 範例：1200px 照片 | 相對大小 |
|---|---|---|
| 無損PNG照片 | 照片內容通常很大 | 基準值 |
| JPEG（品質 80） | 使用合適品質設定時很有效率 | 作為相容性基準 |
| WebP（品質 80） | 可能勝過JPEG；比較可見品質 | 取決於來源與編碼器 |
| AVIF（品質 65） | 可能很有效率；編碼與支援也很重要 | 取決於來源與編碼器 |
部分比較中WebP或AVIF可能勝過JPEG輸出，但沒有固定百分比適用所有來源與編碼器。兩種現代格式都支援透明。請參閱WebP與AVIF指南。
你可以使用JPG轉WebP、針對所列輸入格式的轉換為AVIF，或針對工具所示格式的批次轉換建立候選檔。
像素尺寸：隱藏的乘數效應
像素數、圖片內容、位元深度、中繼資料、格式、編碼器與設定都會影響大小。移除不需要的尺寸，通常會大幅減少編碼器需要表示的資料。
4000 × 3000圖片有12 MP；1200 × 900有1.08 MP，像素少91%。通道數與精度相同時，提供給編碼器的未壓縮點陣資料會大幅減少，但最終位元組節省仍取決於內容與設定。
響應式經驗法則：提供接近可能顯示寬度與密度的候選檔。內容位置寬720個CSS像素時，1440px候選檔可能適合2×螢幕，但縮放、裁切、版面改變與更高密度會改變選擇。用srcset與sizes描述選項。
使用Vizua的調整圖片大小建立版面需要的候選檔，再依情況測試JPEG或PNG壓縮；已最佳化的來源不一定會變小。
壓縮品質：找到最佳平衡點
當圖片尺寸和格式都確定後，壓縮品質是最後一個調整項目。以下是三個步驟如何共同發揮作用的實際範例：
示意流程：從4000 × 3000母檔開始，並把它留在傳送集合之外。
- 若符合位置與目標密度，調整為1200 × 900等候選尺寸
- 以選定的起始品質匯出WebP候選檔並檢查真實檔案
- 若技術堆疊支援，匯出AVIF候選檔，再比較大小、外觀與編碼成本
選擇能滿足用途的最小候選檔。最終節省與可見差異來自真實來源與輸出，不只由範例尺寸決定。
各格式的詳細品質建議，請參閱我們的指南：如何在不損失畫質的情況下壓縮圖片。
特殊情境
電商商品頁面
商品照片在商店支援的縮放下仍須有用。從受保護母檔產生響應式候選檔，檢查細節，並為列表、主視圖和縮放分別設定預算。市集上傳要求可能與商店傳送內容不同。
攝影作品集
作品集可傳送響應式預覽，並在適合時有意提供高解析檢視。依版面與預期螢幕設定尺寸和位元組預算，再檢查紋理、漸層與色彩描述檔。
社群分享圖（Open Graph）
Open Graph圖片建議與接受格式因平台而異，也可能改變。1200 × 630的JPEG或PNG是常見跨平台起點，但請確認目的地目前指引與預覽。爬蟲會獨立於頁面延遲載入抓取檔案。
每頁圖片總預算
依效能目標建立頁面預算。可以測試的初始分配範例如下：
- 主視覺圖片 1 張：約 150 KB
- 內文圖片 3–4 張：每張約 100 KB，合計約 300–400 KB
- 縮圖、頭像、圖示：合計約 50 KB
此範例不保證速度。圖片庫與商品列表可延後適合的畫面外圖片，但延遲資源在請求時仍消耗資料，也可能影響捲動。請在代表性裝置與網路測量初始和互動效能。
常見問題
網站圖片適合多大的檔案？
沒有通用的KB目標。應依頁面效能目標、圖片數量、視窗、受眾網路、快取行為與所需品質設定預算。主視覺可能值得比縮圖使用更多位元組，但資源發現與優先順序也可能和大小同樣重要。請測量實際使用者的LCP並檢查代表性檔案，不要到處套用同一上限。
如何在不損失品質下縮小圖片？
保留母檔，依實際顯示位置與裝置密度產生合適尺寸，比較適合的格式，並在檢查真實輸出時調整編碼器。品質刻度因編碼器而異，沒有設定能保證結果無法分辨。避免反覆有損重壓。
Google是否建議圖片檔案上限？
Google沒有公布通用的圖片KB上限。PageSpeed Insights可指出受測頁面的潛在傳輸節省與LCP問題，但正確預算取決於完整載入流程。請把實驗室診斷與自己使用者的實際資料一起使用。
圖片檔案大小會影響SEO嗎？
圖片過大、太晚被發現、解碼緩慢或沒有穩定尺寸時，可能影響使用體驗與Core Web Vitals。Google會在更廣泛的排名系統中使用頁面體驗訊號，但縮小一個檔案不保證排名改變。請測量圖片是否真的是瓶頸。
商品圖片應使用哪些像素尺寸？
請讓候選圖片符合最大顯示位置、縮放行為與商店支援的裝置密度。使用響應式來源而非固定寬度，在預定縮放下檢查商品細節，並依頁面與受眾設定位元組預算。市集匯入要求可能與商店實際傳送尺寸不同。