網站圖片怎麼壓縮：五步讓網頁更快

根據 HTTP Archive 的《2025 Web Almanac》，手機版首頁大小的中位數是 2.56 MB，其中圖片占 911 KB；桌機版頁面裡圖片的中位數是 1,058 KB。圖片也是訪客最先等待的內容：頁面載入時畫面上最大的元素，也就是「最大內容繪製」（LCP），在 76% 的手機頁面上是一張圖片。

圖片越輕，在慢速網路下開得越快，訪客用掉的行動數據越少，你的頻寬費用也越低。LCP 是 Google 網站使用體驗核心指標（Core Web Vitals）之一，Google 用這些指標評估頁面體驗，所以圖片過重的代價不只是讓人多等幾秒。

壓縮救不了一張遠大於顯示位置的圖片。一張 4000 像素寬的相機照片，放進 800 像素寬的欄位，像素數是頁面實際用得到的 25 倍。web.dev 指出，把桌機尺寸的圖片傳給手機，可能多消耗 2–4 倍的數據量。

• 滿版橫幅：大多數版面約 1600–2000 像素寬就夠了。
• 文章欄位裡的圖片：約為欄寬的兩倍，在高解析度螢幕上也能保持清晰（例如 700 像素寬的欄位用 1400 像素）。
• 縮圖和大頭貼：顯示尺寸的兩倍，通常是 200–400 像素。

格式決定了一張圖片能存得多有效率。簡單來說：照片適合 JPG 或 WebP；標誌、螢幕截圖和有透明背景的圖片適合 PNG 或 WebP。我們的JPG、PNG、WebP 比較詳細說明了每種格式在什麼情況下比較好。

目前約 97% 使用中的瀏覽器都能顯示 WebP，而且它往往明顯更小。想試試的話，用JPG 轉 WebP或PNG 轉 WebP轉換，再和原圖比較：轉換後的檔案不一定更小，簡單的圖形尤其如此。

壓縮會去掉肉眼不太會察覺的資料。在 Bitinz 圖片壓縮頁面，你可以一次拖進一批 JPG、PNG 或 WebP 檔案，並選擇三種模式之一：

• 快速：速度優先，適合大量圖片。
• 均衡：預設模式，適合大多數網站圖片。
• 極致：多花一點時間，換來更小的檔案；值得用在每個頁面都會出現的圖片上，例如橫幅和背景。

保持原格式時，Bitinz 回傳的檔案絕不會比你上傳的更大。請以原始尺寸比對壓縮結果和原圖，尤其是有細小文字或平滑漸層的圖片，滿意後再下載。

即使圖片壓縮得很好，如果載入的時機或尺寸不對，頁面一樣會變慢。幾個 HTML 屬性就能解決大部分問題：

• 為每張圖片設定 width 和 height，讓瀏覽器預留空間，載入時版面不會跳動。
• 為頁面下方的圖片加上 loading="lazy"，訪客捲動到附近時才載入。
• 頁面頂端的主圖千萬不要延遲載入。web.dev 建議為這張圖加上 fetchpriority="high"，而且最多只用在一兩張圖片上。
• 用 srcset 和 sizes 為同一張圖提供幾種寬度，讓手機下載比大螢幕更小的檔案。
• 為圖片設定較長的快取時間，有 CDN 就透過 CDN 傳送，讓回訪的訪客不必重新下載。

用 PageSpeed Insights 或 Chrome 裡的 Lighthouse 面板測一下頁面。從 Lighthouse 13 開始，和圖片有關的檢查合併成一項名為「Improve image delivery」的深入分析，會列出還能進一步壓縮、改用新格式或縮小尺寸的圖片。預估節省不到 4 KiB 的圖片不會列出，所以清單越短越好。

接著自己用手機看一遍頁面。銳利的邊緣、圖片裡的文字和膚色，最先暴露壓縮的問題。

如果你的網站每天都在新增圖片，例如透過內容管理系統或網路商店上傳，就應該在上傳或發布時自動壓縮，而不是手動處理。Bitinz 開發者 API 透過 HTTP 接收圖片，並回傳壓縮後檔案的連結，可以在指令碼或建置流程中執行。每個帳號每月都有免費額度。

1. 01把每張圖片縮放到顯示尺寸的兩倍左右。
2. 02照片用 JPG 或 WebP，圖形和透明背景用 PNG 或 WebP。
3. 03用均衡模式壓縮，最大的幾張圖試試極致模式。
4. 04替換之前，先把壓縮結果和原圖比對一遍。
5. 05設定 width 和 height，第一屏以下的圖片延遲載入，主圖絕不延遲載入。
6. 06再用 PageSpeed Insights 檢查一次頁面。

圖片要上傳到自己網站以外的地方？每個平台都有自己的規則，請看電子郵件與電商平台的圖片尺寸要求。