WordPress 圖片怎麼壓縮成 WebP：外貿站“提速不糊圖”的實操流程（含驗收）

外貿站提速，最常見的第一刀就是圖片。很多站點看起來“就幾張圖”，但實際下載幾十 MB：客戶在海外打開會很慢，Google 抓取也會更喫力。

圖片優化不要一上來裝三個插件亂試。你按下面的順序做：尺寸 → 格式（WebP）→ 加載策略，效果更穩，也更容易驗收。

圖：ShortPixel（圖片壓縮與 WebP/AVIF 轉換的常用插件之一）。

先明確你的目標（否則你不知道做到沒）

• 首屏（Banner/產品主圖）明顯更快出現
• 畫質不糊（客戶能看清細節）
• Network 裏不會出現同一張圖同時加載 jpg 和 webp
• 滾動時不出現大片空白/亂跳（CLS 不要變差）

第一步：尺寸永遠比壓縮更重要

最常見的浪費：你上傳 4000px 的圖，但頁面顯示 800px，等於白白下載 5 倍體積。

外貿站常見建議（按你主題佈局微調）：

• 首屏主圖：1200–2000px 寬（看容器最大寬度）
• 列表縮略圖：600–900px 寬
• 圖標/小裝飾：優先 SVG 或小 PNG

第二步：把 WebP 做“真的生效”（不是生成了就算）

無論你用插件還是 CDN，關鍵是：瀏覽器請求的到底是不是 webp。

1. 打開頁面 → F12 → Network（網絡）
2. 篩選 Img
3. 點開一張圖 → 看類型是否 image/webp（或文件名 .webp）

如果你仍然看到 jpg/png，常見原因：

• 緩存沒清（緩存插件/服務器/Cloudflare）
• 主題/插件沒有輸出 picture/srcset（導致無法按瀏覽器能力切換格式）
• CDN 沒配置正確，或被規則繞過

第三步：懶加載（Lazy Load）別亂用

懶加載適合“非首屏的圖”。如果你把首屏最大圖也懶加載，反而會讓 LCP 更差。

• 首屏最大圖：儘量不要懶加載
• 正文長圖、列表頁大量縮略圖：適合懶加載

第四步：避免 3 個常見坑（新手最容易踩）

1. 多插件重複壓縮：畫質直接崩，且很難回滾。
2. WebP + 原圖同時加載：你以爲變快了，其實下載更多。
3. 只優化小圖：真正拖慢首屏的是 Banner/主圖（LCP 元素）。

一套可持續的“上圖工作流”（建議你固定下來）

1. 上傳前：裁剪到合適尺寸、用英文文件名（別 IMG_1234）。
2. 上傳後：只用一個鏈路生成 WebP（插件或 CDN 二選一）。
3. 發佈前：手機 4G 打開一次首屏，感受是否明顯更快。
4. 發佈後：Network 抽查 1–2 張圖是否爲 webp。

圖片做完後，下一步通常是緩存與 JS/CSS 的低風險優化：WordPress 加速插件最小配置。