WordPress 圖片太大拖慢網站？用 ShortPixel Image Optimizer 檢查壓縮結果

WordPress

網站首頁或文章在手機上載入很慢，常見原因之一是圖片檔案過大。你可能會在 WordPress 媒體庫看到幾 MB 的原始照片，主機空間也持續增加；即使安裝了圖片最佳化外掛，仍可能遇到壓縮後尺寸不對、畫質變差，或實際載入的檔案沒有變小等問題。

本文以 ShortPixel Image Optimizer 為例，示範如何先檢查原始檔案，再設定自動最佳化、指定處理圖片，最後驗證檔案大小與畫質。操作前請先確認網站有可用的檔案與資料庫備份。

先判斷問題是不是圖片太大

  • 在媒體庫開啟圖片，查看檔案大小、像素尺寸與檔案類型。WordPress 媒體庫的操作方式可參考官方媒體庫說明。
  • 用瀏覽器開發人員工具的 Network 分頁重新載入頁面，確認實際下載的是哪個圖片檔，以及檔案大小是否明顯偏大。
  • 檢查同一張圖片是否產生許多縮圖、WebP 或 AVIF 版本。縮圖與新格式可提升載入效率，但也會增加主機上的檔案數量與使用空間。
  • 記錄幾張代表性圖片的原始大小、顯示尺寸與載入大小，後續才能客觀比較壓縮結果。

圖片壓縮不是越小越好。若原始檔本來就已經是最佳化 JPEG，或圖片包含細線、文字與透明效果，壓縮後可能只省下少量空間，卻會更容易出現失真。

安裝 ShortPixel 並完成基本設定

  • 在「外掛」>「安裝外掛」搜尋 ShortPixel Image Optimizer，確認作者與官方外掛頁面一致後安裝並啟用。
  • 依外掛畫面申請或輸入 ShortPixel API 金鑰。免費額度與處理數量可能會變動，請以外掛及官方帳戶頁面顯示為準。
  • 在設定中確認是否保留原始圖片備份。第一次在正式網站使用時，建議保留備份，並同時保留主機或異地備份。
  • 設定「最大圖片尺寸」或類似的重新調整選項，避免手機拍攝的超高解析度照片直接成為網站原圖。不要把尺寸設定得小於網站實際需要，否則可能影響大型螢幕或下載用途。
  • 確認是否要處理縮圖。佈景主題與外掛可能登記多種圖片尺寸，不需要的尺寸不應盲目全部產生。

選擇壓縮模式：畫質與檔案大小的取捨

  • Lossless（無損）：盡量保留原始畫質，檔案通常只會小幅縮減，適合對細節或後續編輯要求較高的圖片。
  • Glossy（高品質有損）：在畫質與檔案大小之間取得平衡，適合多數企業網站與文章圖片。
  • Lossy（有損）：通常能取得較小檔案，但細節、文字邊緣或漸層可能出現差異，應先用少量圖片測試。

不同版本的 ShortPixel 介面與選項名稱可能略有不同。先選一篇測試文章的圖片，使用兩種模式比較檔案大小、手機畫面、放大檢視與文字邊緣，再決定正式網站的預設模式。不要預設任何圖片都能大幅縮小。

設定 WebP 或 AVIF 時要注意什麼

WebP 與 AVIF 通常能提供較有效率的圖片傳送方式，但外掛可能需要額外額度、伺服器支援或透過 HTML、Picture 標籤及重新導向提供替代格式。啟用後，不要只看媒體庫中的原始 JPEG 或 PNG；也要用瀏覽器 Network 分頁確認訪客實際收到的格式。

  • 確認網站快取、CDN 與圖片最佳化設定沒有互相覆寫。
  • 用常見瀏覽器測試透明背景、圖片連結、延遲載入與響應式圖片。
  • 不要因為產生 WebP 或 AVIF 就立刻刪除原始格式；舊瀏覽器、外部系統或下載功能可能仍需要原始格式。

WordPress 對現代圖片格式與圖片處理的相關背景，可參考WordPress 官方 WebP 說明。實際可用格式仍會受 WordPress 版本、PHP、主機影像函式庫與外掛版本影響。

只處理指定圖片，不要一開始掃描整個媒體庫

正式網站不建議第一次就對整個媒體庫執行大量處理。先挑選首頁、熱門文章及幾張大檔案圖片，逐一執行 ShortPixel 的最佳化功能；部分版本可在媒體庫的單張圖片操作列或批次處理頁面啟動。若介面提供「重新最佳化」或「最佳化」按鈕，先處理少量檔案並記錄結果。

  • 先處理 5 至 20 張測試圖片，觀察 CPU、記憶體、PHP 工作數量與網站回應時間。
  • 避開網站流量高峰，分批處理，批次之間留下觀察時間。
  • 遇到逾時、502、503、後台無法開啟或主機負載持續升高時，先停止批次，不要重複按下處理按鈕。
  • 若主機限制背景工作或 API 連線，請與主機商確認 PHP 執行時間、記憶體上限與外連限制。
測試流程：選 5 張圖片 → 記錄原始大小 → 設定一種壓縮模式 → 執行最佳化 → 比較大小、尺寸、畫質與實際載入格式

如何查看 ShortPixel 的處理結果

  • 回到媒體庫查看該圖片的最佳化狀態、原始大小、最佳化後大小與節省比例。不同外掛版本的欄位名稱可能不同。
  • 確認圖片像素尺寸沒有被意外縮小，也確認網站內容中的圖片網址仍能正常開啟。
  • 在前台以手機與桌機檢查細節、文字、透明背景、人物臉部與漸層，必要時放大圖片比較。
  • 用瀏覽器 Network 分頁檢查響應狀態、Content-Type、實際下載大小，以及是否載入符合螢幕寬度的縮圖。
  • 若使用快取或 CDN，清除相關快取後再測試，否則看到的可能仍是舊檔案。

縮圖、備份與主機空間的管理

一張原始圖片可能同時產生多種縮圖、WebP 或 AVIF，以及 ShortPixel 保留的原始檔備份。因此壓縮完成後主機空間不一定立刻下降，甚至可能暫時增加。這不代表壓縮失敗，應先確認哪些檔案是網站正在使用的版本，再依備份政策處理。

  • 不要直接透過檔案管理器或 SFTP 刪除原始圖片、縮圖或備份檔。
  • 不要在沒有備份及回復測試的情況下，使用批次工具清理圖片。
  • 若確認某些圖片尺寸由佈景主題或外掛產生但不再使用，先在測試環境驗證，再由維護人員依網站需求清理。
  • 將「壓縮省下的流量」與「主機磁碟使用量」分開觀察；兩者不一定同步下降。

壓縮後不符合需求時的驗證與回復

  • 先確認問題是畫質、像素尺寸、檔案格式、快取，還是前台載入了錯誤的縮圖。
  • 若 ShortPixel 設定中保留了原始圖片，使用該圖片的還原功能回復單張檔案，完成後再清除網站與 CDN 快取。
  • 若沒有可用的外掛原始檔，從經驗證的主機備份或異地備份還原對應的 uploads 檔案；不要以來路不明的檔案覆蓋正式網站。
  • 回復後重新檢查媒體庫、文章內圖片網址、前台畫質與瀏覽器實際下載格式。
  • 在正式環境調整設定前，記下原本的壓縮模式、尺寸上限、WebP/AVIF 選項與批次範圍，方便回復原設定。

較穩妥的做法是建立「小批次、可比較、可回復」的流程：先備份，再測試少量圖片；確認檔案大小與畫質符合需求後，才逐步擴大處理範圍。圖片最佳化只是效能改善的一部分，仍應搭配快取、響應式圖片、CDN 與適當的主機資源一起驗證。

參考來源

相連文章

臉書留言

一般留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *