WebP 是什麼?這個圖檔格式讓網站變快也讓 SEO 加分

WebP 是 Google 設計的圖檔格式,最大的賣點是檔案比 JPG 小 25% 到 35%、畫質卻幾乎沒差,是部落客想提升網站速度跟 SEO 最容易上手的方式。我手把手協助過上百位部落客把圖片換成 WebP,同一張 1MB 的食物照轉完只剩 273KB,網站開起來明顯變輕。這篇分享 WebP 跟 JPG、PNG 的差別、優缺點、適合誰用、WordPress 啟用 WebP 的幾種方法,還有轉換時最容易踩的雷,一次打包讓你看完就能動手。

WebP 是什麼?跟 JPG、PNG 差在哪

「我的網站怎麼這麼慢?」這幾乎是每位部落客找上我時最常開口的第一句,答案多半出在圖片。WebP 是 Google 設計的圖檔格式,特色就是檔案壓得很小、畫質又跟原本看起來差不多。簡單講,它把 JPG 適合放照片、PNG 支援透明背景的優點合在一起,變成一個更省空間的新選擇。

三種格式擺在一起比一比比較好懂:

格式檔案大小畫質透明背景適合用在
JPG適中不支援照片
PNG很大很好支援logo、icon、需要去背的圖
WebP跟 JPG 差不多支援上面兩種都能取代

簡單記:過去你用 JPG 放食物照、用 PNG 放透明 logo,現在這兩件事 WebP 一個人就能處理。

為什麼換成 WebP 後網站會變快、SEO 也跟著加分

因為 WebP 的檔案比 JPG 小很多,瀏覽器要載的內容變輕,頁面打開的速度自然就快。

不過講「快幾秒」其實不太準。並不是所有網站都七、八秒就能打開,如果你是用手機、剛好又在訊號差或網路慢的地方,圖片多的網站等個半分鐘到一分鐘都跑不出來、整個畫面卡住,這種狀況非常常見。再加上有些版型優化得比較差,在圖片載完之前整個網站是一片空白,逛部落格的人連看都不想看就直接關掉了。

換成 WebP 之後,圖片大小直接砍掉一半左右,網路慢的環境也能順利載完,這個差別在手機跟弱網路下特別有感。

網站速度本身就是 Google 排名的評分項目之一,不是什麼隱藏分數。你可以拿任何一篇圖片很多的文章丟到 Google 自己的測速工具跑一次,如果照片是 JPG,即使你已經壓到 100KB 以下,通常還是會被點名說「請使用新一代圖片格式」;同一張照片換成 WebP 再測,這個提示就會自動消失。

速度變快還有一個連鎖好處:來逛部落格的人等不到圖就跑掉,這叫做跳出率;頁面變輕、跳出率下降,Google 就會把你的文章往前推。所以 SEO 加分不是只看「換了 WebP」這一件事,而是「網站變快」這整個結果。

我之前手把手協助過一位食譜部落客,她每篇文章塞 20 張食物照、圖片動不動就 1MB 起跳,粉絲用手機進她網站常常等到不耐煩就直接關掉。換成 WebP 之後同樣的文章在手機跟弱網路也能順利打開,Google 後台的速度分數明顯往上跑,對搜尋排名來說這是直接看得到的差別。

延伸看完整的網站圖片優化策略,可以參考網站圖片優化懶人包,那邊把整套流程一次打包。

WebP 的缺點與限制,先知道再決定要不要換

WebP 雖然好用,還是有幾個小限制要先知道,免得換完才後悔。

  • 編輯軟體不一定支援:這點我自己最有感。我還在用買斷制的舊版 Photoshop,至少十年以上沒換,因為新版按月付費真的很貴。問題是這套舊版 PS 不支援 WebP,每次處理照片都要先存成 JPG 再轉一手。當然現在很多免費修圖軟體都已經支援 WebP,只是我自己在修圖跟轉檔上還是比較喜歡 Adobe,主要兩個原因:一是它的壓縮比例真的比較小、二是品質更好,檔案壓得下來、顏色表現也沒話講
  • 少數 Mac 螢幕會偏糊:很少數的高階 Mac 螢幕看 WebP 會比 JPG 模糊一點點,PC、手機(iPhone、Android)都沒這個問題。考慮到部落格 8 成以上流量來自手機,影響的人非常少
  • 舊版瀏覽器看不到:Safari 14 以前的版本不支援 WebP。Safari 14 是 2020 年底推出的,現在還停留在那之前版本的人非常少,但如果你的粉絲群偏年長、不更新系統,這點要注意

很多部落客會問我:WebP 會不會某天又被新格式取代,讓我白搞一場?我的答案是不會白搞。網路上每隔幾年就會出現「下一代圖片格式」的討論,但 WebP 從 Google 推出之後一路被瀏覽器跟 WordPress 採用,目前是相容性最廣的選擇,該轉就轉,不用等。

判斷自己現在該不該換,看這兩組對照:

適合馬上換:圖片多的部落格(食譜、旅遊、開箱、穿搭)、已經發現網站速度有點慢、在意 Google 排名、想長期經營部落格累積流量。

可以先不用:純文字部落格、剛架站整個媒體庫不到 100 張照片、工作主要在修圖且需要頻繁下載原檔回電腦處理。

三組照片實測:WebP 比原本的 JPG 小多少

直接看數字最有感。我用同樣 1,200×800 尺寸的三張照片做對比,JPG 跟 WebP 兩個版本各上傳一次,差距是這樣:

照片類型JPG 大小WebP 大小縮小幅度
風景照914KB437KB約一半
食物照587KB273KB約一半
人物照288KB108KB縮到三分之一

看得出來,畫質越複雜的照片(風景、食物)壓縮率穩定在五成左右,人物特寫這種大面積膚色的照片更狠,只剩三分之一。對網站速度的影響不是百分比,而是用「肉眼能感覺到」的順暢。

WebP 的壓縮品質要設 80% 還 90%?我自己的實作建議

直接給結論:我建議大部分部落客設 90%,速度跟畫質的平衡最舒服。

很多部落客會問我:圖片縮小時 WebP 要設 90% 還是 80%?這要看你的部落格走什麼路線:

  • 不是以圖片取勝(一般教學文、心得文、生活分享)→ 我覺得設 90% 就好,畫質夠好、檔案也壓得下來
  • 追求極致速度、可以接受一點點畫質損失 → 80% 是個臨界點,再低就明顯看得出來
  • 攝影作品集、純圖片型的部落格 → 我建議不要做任何壓縮,只把格式轉成 WebP 就好

如果你是用 Mac 電腦、又接 4K 螢幕,特別要注意:Mac 的解析度真的很高,圖片只要稍微壓一下就會被看出來。這種情況我會建議直接轉檔不壓縮,但會遇到一個有趣的狀況:完全不壓縮的 WebP 有時候反而比 JPG 還大,這時候你就要想清楚到底有沒有必要轉。

我自己是怎麼選?我全部統一轉 WebP,一部分原因是我有點「對齊控」,所有檔案格式都要統一才舒服;另一部分是我現在會搭配上面提到的圖片優化外掛再壓一次,就解決了「不壓縮的 WebP 反而比較大」這個問題。

所以我用舊版 Photoshop 處理照片的完整流程是這樣:

  1. 在 Photoshop 修完圖、存成 JPG(因為我這套 PS 不支援 WebP)
  2. 上傳到 WordPress,讓圖片優化外掛自動把 JPG 轉成 WebP 並縮小

這套流程看起來繞了一圈,但能同時保留 Adobe 的修圖品質跟 WebP 的檔案優勢,是我自己用最順的方法。

WordPress 把圖片換成 WebP 的幾種方法

WordPress 啟用 WebP 主要有三條路,你可以挑一個最順手的做。

  1. 用自動轉檔的圖片優化外掛:這是最省事的方法,部落客只要照常上傳 JPG,外掛會自動在背後產生一份 WebP,逛站的人看到的就會是 WebP 版本。新圖、舊圖都可以一起轉。怎麼挑外掛我整理在 WordPress 圖片優化外掛哪一套最好用 那篇
  2. 用電腦上的圖片壓縮軟體:上傳前先在自己電腦上把 JPG 轉成 WebP 再丟到部落格。免費的 Caesium Image Compressor 就能批次處理 WebP 格式、品質還挺好;如果預算夠、又對畫質特別講究,JPEGmini 是專門做圖片極致壓縮的付費軟體,可以跟自動轉檔外掛分工配合
  3. 用 Jetpack 內建功能:很多 WordPress 站本來就裝了 Jetpack,它有一個「把圖片代管到 Jetpack 雲端、自動轉成 WebP」的功能,優點是不用額外裝外掛,但圖片會被壓比較狠、有時候畫質太低,而且圖片放在 Jetpack 那邊有少數情況會載比較慢

常被部落客問:轉完 WebP 後,原本的 JPG 是不是可以全部刪掉省空間?答案是千萬不要,原因下個段落講清楚。

WebP 轉換要注意的三件事

轉 WebP 不是按一鍵就結束,先把這三件事想好,後面少走很多冤枉路。

  1. JPG 原檔一定要留:大部分自動轉檔的外掛會同時保留 JPG 跟 WebP 兩個版本,別手賤把 JPG 刪掉。萬一以後想換別的格式、或外掛壞掉、或要把照片下載回來修圖,原檔還在你才有得救
  2. 圖床空間會變兩倍:既然兩個版本都留,1,000 張照片就變 2,000 張的容量。換 WebP 之前先確認你的主機空間夠不夠用,空間不夠先升級或先清掉用不到的尺寸(ThumbPress 這支外掛可以幫你做這件事)
  3. 既有舊圖建議分批轉:如果你的部落格已經有幾千張舊圖,千萬不要一次全部轉,讓主機 CPU 喘不過氣。我建議分批,一次轉幾百張、觀察網站正不正常,再轉下一批

如果你正在從痞客邦或其他平台搬家過來,圖片格式這件事建議搬完之後一起處理,搬家階段先別動,免得搬到一半圖片對應錯亂。從痞客邦搬到 WordPress 的完整流程跟踩雷重點可以參考痞客邦搬家攻略,裡面有講到圖片那一塊的眉角。

金城老師觀點

金城老師觀點

說真的,WebP 是這幾年我最推薦部落客做的優化之一,因為它效果明顯、成本又低,裝個外掛就能跑、不用改任何文章內容。我自己手把手協助過上百位部落客做這件事,沒有一個換完之後後悔的。我也明白很多部落客跟我一樣還在用老牌修圖軟體不想換、或是 Mac 用戶對畫質特別敏感,這些都有對應的做法,不用一刀切。如果你還在等「最完美的時機」才要換,我的建議是直接挑一個禮拜不忙的時段做,當天就能看到 Google 速度分數的差別。記得 JPG 原檔保留就好,真的踩雷也救得回來,放心動手。

延伸閱讀

參考資料

常見問題

WebP 跟 JPG 比,哪個畫質比較好?

畫質幾乎一樣,但 WebP 的檔案小很多。同樣一張 1,200×800 的照片,JPG 大約 914KB、WebP 只要 437KB,肉眼看不太出差別,網站速度卻快很多。

WebP 壓縮品質要設多少?

大部分部落客我建議設 90%,速度跟畫質平衡剛好。如果是攝影作品集、不在意檔案稍大,直接不壓縮、只轉格式就好;追求極致速度可以設 80%,但再低畫質就會明顯被看出來。

換成 WebP 之後 SEO 真的會變好嗎?

會。Google 把網站速度列在排名評分項目裡,WebP 讓圖片變輕、頁面變快,跳出率降低、停留時間拉長,間接讓 SEO 分數往上跑。Google 自己的測速工具就會直接顯示「請使用新一代圖片格式」這個提示。

Photoshop 不支援 WebP 怎麼辦?

這是很多用舊版 PS 的部落客都會遇到的問題,包含我自己。最簡單的解法是先在 Photoshop 修完圖、存成 JPG,上傳到 WordPress 之後讓圖片優化外掛自動轉成 WebP,流程繞一手但畫質跟檔案大小都顧到。

我的部落格圖片不多,需要換 WebP 嗎?

如果整個媒體庫不到 100 張照片、又以文字為主,換 WebP 帶來的速度差別感覺不明顯,可以先不用急。等你圖片量累積到一定規模、或開始衝 SEO 流量時再換也不遲。

文章目錄