如何最佳化網站圖片：2026 完整指南
圖片佔平均網頁總重量的約 40%。正確最佳化可以將頁面大小減半，讓 LCP 低於 2.5 秒，並提升搜尋排名。
第 1 步：選擇正確的格式
WebP 是最安全的預設選擇，比 JPEG 小 25-35%。AVIF 可以再減少約 50%，但編碼速度較慢。你可以用 Vizua 將 JPG 轉換為 WebP 或 轉換為 AVIF。
格式選擇的基本原則：照片用 WebP/AVIF（或 JPEG），圖示和 Logo 用 SVG，需要透明度的截圖用 PNG。
第 2 步：調整至實際顯示尺寸
切勿提供比顯示容器更寬的圖片。一張 4000px 寬的照片顯示在 800px 的容器中，瀏覽器仍需下載完整的大檔案。使用 Vizua 的圖片調整工具裁切至需要的尺寸。搭配 srcset 和 sizes 屬性，為不同螢幕提供適合的版本。
第 3 步：以正確的品質壓縮
JPEG/WebP 建議品質 75-85，AVIF 建議 60-75。這個範圍內檔案大小大幅縮小，但視覺品質幾乎不受影響。Vizua 的 JPEG 壓縮器會自動處理。
第 4 步：高效傳輸
主視覺圖片使用 fetchpriority="high"，確保最快速度載入。其他圖片使用 loading="lazy"，等使用者捲動到附近時才載入。使用 <picture> 元素提供多種格式回退：先 AVIF，再 WebP，最後 JPEG。
常見問題
網站最佳的圖片格式是什麼？
WebP 是 2026 年最安全的預設選擇。它產生比 JPEG 小 25-35% 的檔案、支援透明度，且在超過 97% 的瀏覽器中運作。如果追求最大壓縮率，AVIF 比 JPEG 小約 50%，但瀏覽器支援略低（約 95%）。
未最佳化的圖片會讓網站慢多少？
圖片佔網頁總重量的約 40%（根據 HTTP Archive 資料，中位數 2.5 MB 中約 1 MB 是圖片）。單一未最佳化的主視覺圖片就可能讓 LCP 超過 4 秒，直接影響搜尋排名。
應該對所有圖片使用延遲載入嗎？
不是。只對首屏以下的圖片使用 lazy-load。主視覺圖片（hero image）應使用 fetchpriority="high" 並避免延遲載入，確保最快速度顯示。