WordPress 圖片壓縮完整教學：如何讓 LCP 載入快 3 倍？(2026)

先說結論

未經處理的圖片，是網站效能的癌症。

我們診斷過上百個「很慢」的 WordPress 網站，其中 80% 的 LCP (Largest Contentful Paint) 問題，都來自於一張 5MB 的首頁大圖。

優化圖片是 CP 值最高的提速手段。你不必懂程式碼，只要做對這三件事：

格式對：拋棄 JPG/PNG，全面擁抱 WebP 或 AVIF。
尺寸對：不要在手機版載入 4K 圖片。
自動化：用工具 (外掛) 取代人工，讓伺服器自動處理壓縮。

這篇文章將教你建立一套「上傳即優化」的自動化工作流，徹底解決圖片拖慢網站的問題。

想把 LCP 問題一次定位清楚（不只是壓圖）：你可以先看 Core Web Vitals 滿分檢查清單（WordPress 版），或直接看 WordPress 速度健檢與加速服務。

為什麼你的圖片會拖慢網站？

很多人以為「圖片看起來清楚就好」，卻忽略了瀏覽器的負擔。

1. 檔案太肥 (Payload Size)

一張 iPhone 拍的照片通常在 3-5MB。如果你的首頁有 10 張這樣的圖，使用者就要下載 30MB 的資料。在 4G 網路上，這意味著 10 秒以上的白屏。

2. 格式過時 (Legacy Formats)

JPG 和 PNG 是上個世紀的產物。

WebP：Google 開發，比 JPG 小 30-50%，畫質幾乎不變。
AVIF：更先進的格式，比 WebP 再小 20%，但舊瀏覽器支援度稍差 (需 fallback)。

3. 尺寸不合 (Wrong Dimensions)

在一個寬度只有 300px 的「產品卡片」中，載入一張 4000px 寬的原圖，是效能的極大浪費。瀏覽器不只要下載，還要花 CPU 運算能力去「縮放」它。

解決方案 A：手動優化 (適合預算 0 / 更新頻率低)

如果你的網站是靜態形象站，久久才發一篇文章，那手動處理就夠了。

工具推薦：TinyPNG / Squoosh app

Squoosh.app (Google 出品)：
- 直接把圖丟進去。
- 右下角選擇 WebP。
- 調整 Quality (通常 75-80% 肉眼分不出差別)。
- 下載，再上傳到 WordPress。
優點：完全免費，畫質控制最精準。
缺點：非常花時間，無法處理已經上傳的舊圖。

解決方案 B：自動化外掛 (推薦標準做法)

對於有持續更新內容的部落格或電商，你需要的是「Set and Forget (設定後不理)」的自動化流程。

推薦外掛：ShortPixel Image Optimizer

這是我們目前協助客戶升級時的首選工具。

自動壓縮：你上傳 JPG，它自動在背景幫你壓小。
格式轉換：自動產生 WebP/AVIF 版本，並透過 <picture> 標籤提供給支援的瀏覽器。
Retina 支援：自動處理視網膜螢幕的高解析度需求。
Smart Cropping：智慧裁切縮圖。

設定建議：

Compression Type: Lossy (失真) - 對網頁來說最適合，肉眼幾乎看不出，體積最小。

Create WebP: 勾選。

Deliver the WebP versions: 勾選 (Using <picture> tag)。

其他替代方案

Imagify：WP Rocket 同家出品，介面漂亮，效果也不錯。
EWWW Image Optimizer：如果不喜歡雲端壓縮，想用自己主機 CPU 壓圖 (不推薦，會吃主機資源)，可以用這款。

⚠️ 真相：外掛不是免費午餐 (成本與限制)

雖然自動化聽起來很美好，但有兩件事你需要知道：

隱形成本 (Cost)： ShortPixel 和 Imagify 都是「按處理張數」計費。請注意，WordPress 每上傳一張圖，會自動生成 5-10 張不同尺寸的縮圖（Thumbnails）。
- 計算公式：如果你上傳 100 張原圖，實際上會消耗 500-1000 點額度。
- 預算提醒：對於圖多的部落格，每個月可能需要 $10-20 美金的支出。
物理限制 (Limitations)：
- 救不回爛圖：如果你的原圖解析度本來就只有 600px，外掛不能幫你把它變清晰。
- 背景圖限制：透過 CSS background-image 設定的圖片，通常無法被外掛自動轉換成 WebP 或延遲載入 (Lazy Load)。
- 脫離代價：如果你停止付費並移除外掛（特別是使用 CDN 類），圖片連結可能會失效，或者退回未優化的狀態。

解決方案 C：CDN 與現代化架構 (效能極致)

如果你的流量很大，或者是全圖型網站 (攝影、設計作品)，把圖片放在 WordPress 主機上可能不是好主意。

使用 Image CDN

Cloudflare Polish：直接在 CDN 邊緣節點進行壓縮與格式轉換。
BunnyCDN：便宜且強大的 CDN，內建圖片優化功能。

這樣做的好處是，原本的 WordPress 主機負載會大幅降低，圖片載入速度則是飛快 (因為 CDN 節點離使用者更近)。

檢查清單：你做對了嗎？

優化完後，請檢查以下項目：

Lighthouse 檢查：執行 PageSpeed Insights，確保 "Properly size images" 和 "Serve images in next-gen formats" 這兩項警示消失。
WebP 確認：在網頁圖片上按右鍵 -> 另存圖片，確認副檔名是否為 .webp。
Lazy Load：確認捲動到下方時，圖片才開始載入。

常見問題 FAQ

Q: 已經上傳的一千張舊圖片怎麼辦？

不用重傳。安裝 ShortPixel 或 Imagify 後，它們都有 "Bulk Optimize" (批次優化) 功能，按下去讓它跑一個晚上，全站圖片就會自動瘦身完成。

Q: 用了 WebP，舊版 Safari 看不到怎麼辦？

好的外掛會使用 <picture> 標籤做 "Fallback" (退路)。如果瀏覽器不支援 WebP，它會自動載入原本的 JPG。所以不用擔心相容性。

Q: 為什麼我的 LCP 還是很慢？

如果圖片已經優化了，LCP 還是紅字，那可能是 Server 回應太慢 (TTFB) 或是 Render-Blocking CSS 的問題。這時候你需要的是主機升級或快取設定。

👉 延伸閱讀：[WordPress 網站很慢怎麼辦？完整診斷與解決指南](./2026-01-04 WordPress 網站很慢怎麼辦？完整診斷與解決指南 (2026).md)

👉 如果你想先把整個網站地基建好，再做速度優化，先看這篇完整指南：WordPress 網站建置教學（2026）。

總結

圖片優化是網站加速最「有感」的投資。

只要把 JPG 換成 WebP，加上自動化壓縮，通常能直接減少 50% - 70% 的傳輸量。這不僅讓使用者開心，Google 的 SEO 排名也會給你獎勵。

不想自己處理幾千張舊圖？ 不想自己一張一張處理，我們的速度優化方案含圖片批次處理、WebP 轉換與 CDN 設定 —— 健檢 NT$ 3,000-8,000，實際要動手修多半落在 NT$ 15,000-40,000。

想知道自己網站現在的數字

速度這件事最怕的是照著壓力測試的分數下藥——測速工具的手機分數是慢速 4G 加上處理器降速的結果，跟客人的實際體感可以差很多。

免費網站健檢貼上網址就會排進檢查，速度之外連同 SEO、資安、憑證、收信一起看。