法國作家安托萬·德·聖修伯里(Antoine de Saint-Exupéry)在《風沙星辰》裡有一句常被引用的話:「Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away」,意思是真正的完美,不在於還能再加些什麼,而在於已經沒有什麼可以拿掉。這句話原本在講飛機與機械設計的演進,工程師把零件一件一件拿掉,拿到不能再拿為止,剩下的才是真正必要的結構;放到圖片壓縮上一樣成立,壓縮要追求的不是把畫質犧牲光換一個很小的檔案,而是拿掉肉眼看不出差異的多餘資料,只留下畫面真正需要的部分。
多數經營 WordPress 網站的人,其實只做了半套。有人習慣在上傳前先用工具把圖片壓過一輪,壓完就當作大功告成;也有人只裝了一款壓縮外掛,以為裝上去就會自動處理好所有事情。這兩種做法各自都有漏洞。前者忙起來容易忘記那一次手動壓縮,後者的外掛沒設定好、免費額度用完,或是媒體庫裡的舊圖片根本沒被涵蓋進去,一樣會漏掉一堆該壓的圖。真正完整的 WordPress 圖片壓縮教學,該教的是上傳前先用工具手動壓一輪打底、上傳後再讓外掛自動補強一次的雙層作法,同時把破壞性壓縮與非破壞性壓縮怎麼選、壓縮比例大概抓多少講清楚。
先從圖片為什麼會拖慢網站、為什麼壓縮要分成兩層來做講起。

圖片太重拖慢網站,為什麼壓縮要分兩層?
HTTP Archive 在《2025 Web Almanac》的 Page Weight 報告裡指出,一個網站行動版首頁的中位數重量是 2,559 KB,其中圖片就佔了 911 KB,是所有資源類型裡佔比最高的一種;桌面版更重,總重量 2,862 KB 裡有 1,058 KB 是圖片。換句話說,一個網站將近四成的下載量都花在圖片上。這個比重不只是檔案大小的問題,它跟 LCP(最大內容繪製,Largest Contentful Paint)這項核心網頁指標直接相關。多數網頁的 LCP 元素本身就是一張圖片,圖片沒壓好,使用者要多等好幾秒才看得到主要內容,網站的核心網頁指標分數也會跟著被拖累。Google 官方 PageSpeed Insights 文件也把最佳化圖片列為提升網頁載入效能最直接的一步,理由正是圖片通常佔一個網頁下載量的最大宗。

只不過多數 WordPress 網站在壓縮圖片時,常常只做一層,而這一層本身就有漏洞。只在上傳前手動壓縮的人,靠的是自己每次上傳都記得先處理過一次,可是一旦忙起來、批次上傳好幾十張圖,很容易漏掉這道手續,某幾張沒壓過的原圖就這樣直接進了媒體庫。只靠外掛自動壓縮的人,問題出在外掛本身。設定沒開好、免費額度用完了沒有續約或換款,又或者外掛只處理之後上傳的新圖,網站原本就存在的舊圖完全沒被涵蓋進去,一樣會留下沒壓過的圖片繼續拖慢網站。
這兩種漏洞剛好可以互補。上傳前的手動壓縮負責打底,確保原始檔案一開始就不肥;上傳後的外掛壓縮負責補強,擋住忘記手動處理、或原本就沒設定好的那些圖。兩層不是重複做工,而是各自守住一段防線。先手動壓過一輪,再讓外掛把漏網之魚接住,這正是這篇 WordPress 圖片壓縮教學要教的雙層作法。接下來就先從第一層,上傳前的手動壓縮講起。
做法一:上傳前,先把圖片壓過一輪打底
這一層做的事很單純。圖片還沒送進 WordPress 媒體庫之前,先透過尺寸、格式、線上壓縮工具這三個動作,把檔案體積壓下來,讓外掛之後真正要處理的量本來就不多。重點不在把每一張圖修到完美,而在打底。原始檔案一開始就不能過重,比如手機直接拍出來動輒 4000 像素寬的大圖,若不先壓過就直接上傳,後面外掛再怎麼補強都事倍功半。
原圖如果沒先處理過,就算後面外掛能自動壓縮,還是會拖累主機空間與外掛的處理效率。外掛壓縮同樣要耗運算資源,原圖尺寸越大、檔案越肥,壓縮跑起來就越久,批次處理媒體庫裡幾百張這種大圖時尤其明顯,而且原始檔案本身還是會佔掉主機的儲存空間。先把這一層做好,不只是省事,也是替後面的外掛減輕負擔。
圖片尺寸,只留版面實際用得到的大小
圖片的檔案大小跟它的像素尺寸不是線性關係,尺寸放大一倍,檔案大小往往會用更快的比例膨脹上去。所以壓縮的第一步不是急著挑格式或找工具,而是先確認網站版面實際需要的顯示尺寸,用瀏覽器的開發者工具量測目前佈景主題裡那個圖片區塊的實際寬高,例如某個內文圖片欄位顯示寬度只有 800 像素,就沒有必要塞一張 4000 像素寬的原始照片進去。
量出實際需要的尺寸之後,把素材裁切、縮小到那個大小再上傳,而不是直接把相機或手機拍出來的原始大圖整張塞進媒體庫。
WordPress 核心其實也在做類似的事。從 5.3 版開始,只要上傳的圖片長邊超過 2560 像素,系統就會自動縮成一份 2560 像素的版本,前台預設也是使用這個縮小過的版本;原始檔案雖然還是會保留在伺服器上,但正常瀏覽不會用到它。這個機制能擋住最誇張的超大圖,卻不代表可以完全不管尺寸,2560 像素對多數網頁版面來說仍然偏大,真正該做的還是照版面實際寬度去裁切,而不是依賴 WordPress 這道最後防線。

JPG、PNG、WebP、AVIF,格式怎麼挑?
常見的圖片格式可以先用破壞性壓縮與非破壞性壓縮這兩個角度區分。JPG 是破壞性壓縮,壓縮時會捨棄一部分肉眼不容易察覺的細節資料,換來很小的檔案,適合拿來放一般的相片與內文配圖。PNG 是非破壞性壓縮,保留完整的細節與透明背景,檔案卻明顯比 JPG 大,適合圖示、去背素材這類需要精確呈現邊緣的圖片。
WebP 與 AVIF 則是這幾年主流瀏覽器都已經支援的新格式,同樣的畫質水準下,檔案比 JPG、PNG 都更小。Google 官方針對 WebP 做過的壓縮研究指出,WebP 的破壞性壓縮比同畫質的 JPEG 檔案小 25% 到 34%,非破壞性壓縮則比 PNG 小 26%。AVIF 更新,WordPress 官方在 6.5 版加入 AVIF 支援的公告裡提到,同畫質下 AVIF 檔案最高可以比 JPEG 小 50%。HTTP Archive《2025 Web Almanac》實際抽測網站圖片也印證這個差距:同一批網頁裡,90 百分位的 JPG 檔案大小約 278 KB,WebP 約 97 KB,AVIF 只要約 37 KB。
| 格式 | 壓縮方式 | 特性 | 適合情境 |
|---|---|---|---|
| JPG | 破壞性壓縮 | 檔案最小,會犧牲部分細節 | 一般相片、內文配圖 |
| PNG | 非破壞性壓縮 | 保留完整細節與透明背景,檔案較大 | 圖示、去背素材 |
| WebP | 依模式可選破壞性或非破壞性 | 同畫質下比 JPG、PNG 更小,相容性最廣 | 大部分網頁圖片的優先選擇 |
| AVIF | 依模式可選破壞性或非破壞性 | 同畫質下檔案通常最小,舊瀏覽器相容性較弱 | 想要壓到最極致的場合 |

給讀者一個簡單判斷原則:一般的內文照片優先用 WebP,相容性最廣,幾乎所有現代瀏覽器都吃得下;想要壓到最極致,再挑 AVIF;需要透明背景的素材,才輪到 PNG 上場。
線上壓縮工具,把檔案再進一步壓小一輪
把圖片裁到對的尺寸、也選好格式之後,可以再透過免安裝的線上壓縮工具,把檔案進一步壓小一輪。TinyPNG 這類國際通用的線上工具操作方式都差不多,把圖片拖進網頁,工具就會自動跑壓縮演算法,壓完直接提供下載連結。壓完記得比對一下壓縮前跟壓縮後的檔案大小,確認真的有壓到,而不是憑感覺覺得應該有壓。
這一步順便會做一件很多人沒注意到的事:去除照片裡的 EXIF 中繼資料,也就是拍攝時間、地點、使用的相機或手機型號這些資訊。這些資料對網頁顯示完全沒有用處,只會白白增加檔案體積。Google PageSpeed Insights 官方文件也建議,壓縮 JPEG 時應該去除中繼資料,檔案超過 1 萬位元組的 JPEG 改用漸進式(progressive)格式,色彩取樣則降到 4:2:0,這幾個都是可以直接照做的具體壓縮參數。
做法二:上傳後,讓外掛自動幫你補一次
上傳前的尺寸、格式、線上工具這三關都做完,原始檔案已經先瘦一輪,才輪到第二層接手。這是雙層作法的第二層,幫網站裝一款上傳圖片時自動壓縮的外掛,當作漏網之魚的最後防線,就算忘記做法一那一輪手動處理,圖片上傳的當下還是會被壓過一次。這一節的重點放在怎麼挑、怎麼裝、怎麼確認新圖片真的有被自動處理,不是逐一評測哪一款外掛最好。
就算做法一每一步都做到位,也很難保證往後每一次上傳圖片,自己都會記得先手動壓過一輪。網站經營久了,忙碌的時候還是會忘記手動壓縮這一步,這時候能自動接手的外掛就是最後一道保險。
安裝外掛,讓新上傳的圖片自動壓縮
WordPress 官方外掛目錄裡有好幾款專門做自動壓縮的外掛,像是 EWWW Image Optimizer、ShortPixel、Imagify、Smush 都是常見的選項。這些外掛的運作邏輯大同小異。安裝啟用之後,圖片上傳的當下就會自動送去壓縮,也大多提供一鍵批次處理媒體庫既有圖片的功能。部分外掛需要先申請一組免費的 API 金鑰才能開始使用,免費額度通常有張數或流量上限,超過額度之後要嘛付費升級,要嘛換一款外掛繼續用。

哪一款外掛實際功能與免費額度多少,建議直接到 WordPress 官方外掛目錄查當下的頁面說明,各外掛的免費額度、付費方案時常調整,這裡不特別評比哪一款比較好用。
壓縮等級記得調整,避免預設值太溫和
大多數自動壓縮外掛都會提供幾種不同的壓縮等級可以選,常見的命名像是 Lossy(破壞性)、Lossless(非破壞性),或是介於中間、外掛自己取名的 Glossy 之類的分級。外掛裝好啟用之後,記得進設定頁面確認實際套用的是哪一個等級,不要裝完就放著沿用預設值。有些外掛出廠預設是最溫和的等級,壓縮效果相當有限,等於白裝了一款外掛卻沒拿到多少效益。
至於等級該怎麼選才對,牽涉到破壞性壓縮與非破壞性壓縮的取捨,下一個部分會更完整拆解判斷標準。
媒體庫裡的舊圖,也要回頭批次壓縮
外掛裝好之後,預設通常只會處理之後上傳的新圖片,媒體庫裡本來就存在的舊圖不會自動被回頭處理,得手動觸發一次批次壓縮才會補到。建議養成習慣,每次大量上傳圖片之後,或是固定一段時間,就回頭執行一次批次壓縮,確認媒體庫裡沒有漏網的舊圖繼續拖累網站的整體重量。

破壞性壓縮與非破壞性壓縮,該怎麼抓平衡點?
兩層作法都上軌道之後,還剩下一個貫穿兩層的判斷題,也就是壓縮等級該選破壞性還是非破壞性,才不會壓過頭犧牲畫質,又不會壓不夠浪費效果。先把破壞性壓縮(Lossy)與非破壞性壓縮(Lossless)的差別講清楚。非破壞性壓縮不會犧牲任何原始畫質,壓縮完的圖片解壓縮回來,資料跟原圖一模一樣,但正因為它不丟資料,能壓縮的幅度有限。破壞性壓縮則是把肉眼不容易察覺的細節資料直接捨棄,能大幅縮小檔案,但代價是畫質會有一定程度的犧牲。

一般的作法是這樣區分:網站上大部分的內文照片、部落格配圖,適合用破壞性壓縮換取速度,因為讀者在瀏覽網頁時,不太可能盯著單張圖片放大檢查細節。真正需要精確呈現細節的素材,像是作品集裡的設計稿、商品實拍的近拍照,才優先考慮非破壞性壓縮,確保每一個細節都不失真。
至於壓縮比例該抓多少,Google 官方 PageSpeed Insights 文件給過具體數字。JPEG 的壓縮品質建議降到 85,超過 85 之後,檔案會變大,但肉眼看得出來的畫質提升非常有限。WordPress 官方的做法也落在相近的區間,核心從 4.5 版開始,處理圖片時預設就是採用 82% 的 JPEG 品質壓縮。兩邊的數字都落在 80 幾趴這個區間,可以互相佐證。多數情況下,把壓縮品質抓在 80 到 85 之間,就是肉眼看不太出差異、檔案卻能明顯縮小的臨界點。

進階:善用 WordPress 內建的 WebP/AVIF 與 AI 智慧壓縮
前面兩層做法都圍繞著外掛打轉,但這幾年 WordPress 本身在圖片格式與壓縮上也有不少進展,免得誤以為壓縮只能靠外掛這一條路。
WordPress 核心其實已經內建 WebP、AVIF 支援
WordPress 核心其實從 5.8 版開始,就已經原生支援 WebP 圖片的上傳與顯示,不需要額外裝外掛就能直接把 WebP 圖片放進媒體庫使用;6.5 版起,核心進一步原生支援 AVIF 格式。換句話說,只要伺服器環境支援,網站用的 WordPress 版本夠新,本來就有一定的新格式處理能力,不是所有壓縮都得靠外掛補。
想要更完整的自動化,可以用 WordPress 官方效能團隊維護的 Performance Lab 外掛,它把上傳時自動產生 WebP、AVIF 版本這個更進一步的自動轉換功能做了出來。上傳一張 JPEG 或 PNG,外掛就會在背景自動轉出對應的新格式版本,提供給支援的瀏覽器使用。這款外掛目前是核心效能團隊測試中、準備併入 WordPress 核心的方向之一,對想要提早用上這個能力的人,是比自己另外找第三方外掛更貼近官方路線的選擇。
AI 智慧壓縮怎麼判斷該壓縮多少?
近期部分圖片壓縮外掛開始加入以類神經網路為基礎的智慧壓縮引擎。傳統做法是整批圖片套用同一個壓縮等級,不管這張圖適不適合;智慧壓縮則是針對每一張圖片個別判斷,分析畫面的複雜度與細節分佈,抓出壓到多小、肉眼才會開始看出差異的臨界點,再依照這個臨界點各自套用不同的壓縮強度。同一批圖裡,畫面簡單的圖能壓得更狠,細節豐富的圖則會保留多一點資料,而不是一視同仁套用同一組參數。

除了壓縮本身,也有工具把類似的 AI 技術延伸到自動裁切、去背等圖片處理任務上,一起串進上傳流程裡。這類技術目前還在快速演進,值得留意其中的原理,但個別商業品牌的 AI 功能實際表現落差不小,選用前建議自己實際測試比較準。
圖片壓縮不是做過一次就永遠不用管的工作。上傳前的手動打底,跟上傳後的外掛自動補強,兩層都做到,才是完整的 WordPress 圖片壓縮教學該有的樣子——少了任何一層,漏網的圖片遲早會一張一張把網站拖慢回去。
回到聖修伯里那句話,真正做到位的壓縮,從來不是靠犧牲畫質去換取速度,而是把肉眼看不出差異的多餘資料拿掉,把該留住的畫質跟該爭取的速度,同時留在畫面裡。下次要幫網站上傳圖片之前,不妨先想一下,這張圖還能不能再減一點。
