本站使用日本人氣 No.1 商業佈景主題【SWELL】架設!瞭解更多

[外掛] 圖片上傳就自動優化! EWWW Image Optimizer 設定教學

歐森 Olsen

如何兼顧圖片顯示品質,及網站載入速度,是每個站長的重要功課!

EWWW Image Optimizer」是擁有上百萬個安裝數的熱門WordPress外掛,除了協助圖片壓縮之外,還可以線上轉換成WebP格式;它有付費版本,但是歐森覺得免費版就很夠用了!在本文中,我將詳細介紹免費版的安裝及設定方法,使之與SWELL完美配合運行。

目錄

EWWW Image Optimizer可以做什麼?

圖片壓縮

將圖片壓縮會犧牲部分畫質,但可以進一步縮小檔案,不僅節省主機硬碟空間,也可以讓網頁載入速度加快,對SEO有正面幫助。

過去,許多使用者購買 EWWW Image Optimizer 付費版的原因之一,是因為免費版本的圖像壓縮率並不高;不過在幾乎95%以上瀏覽器都開始支援次世代圖片格式 WebP 的現在,我們可以透過 EWWW Image Optimizer 免費版,將上傳的PNG、JPEG圖檔,轉成WebP格式於網頁前端顯示,所以壓縮率就不這麼重要囉!

如果你不想安裝外掛來壓縮圖片,可以在上傳前使用免費線上服務 TinyPNG 來壓縮圖片哦!

調整圖片尺寸大小

另一個減小圖檔容量的方法,就是將圖片尺寸縮小。

一般來說,從知名圖庫例如 UnsplashPixabay 等下載回來的原始圖片,動輒寬度都超過6000px,單張圖檔的容量多在 2MB以上;所以,將圖片裁切並縮放成適合的尺寸大小,就非常重要。

另外,當你上傳一張圖片到 WordPress 媒體庫,WordPress 預設會自動生成多張不同尺寸的圖片,有些佈景主題也會做同樣的事,所以你的圖片會從1張變成10張都有可能,非常浪費硬碟空間,未來要管理也非常麻煩;建議你先花一點時間,依照歐森的教學文章調整WordPress初始設定:

將圖片轉換為WebP格式

WebP,是Goolge在2010年提出的次世代圖片格式,旨在減少圖片檔案大小的同時,達到和JPEG、PNG、GIF格式相同的圖片品質,並提高圖片檔載入速度。

依據 CanIUse 網站的調查,截至2023年5月,已經有95%以上的主流瀏覽器及版本,都完整支援顯示WebP格式,所以基本上你可以放心使用WebP格式圖片做為網站主力圖檔,以獲得更快的網頁載入速度

那麼,可以直接上傳WebP格式圖片就好,不要上傳PNG/JPEG格式圖檔再用外掛轉成WebP嗎?

可以,但歐森不建議。

主要是要在上傳前一張張轉檔成WebP相當麻煩,諸如Photoshop等圖像軟體,要獲得直接儲存為webp格式檔案,也需要另外安裝支援模組(2023/5/3更新:PS 23.2版已經支援WebP;另外是如果真的訪客的瀏覽器版本不能正確顯示WebP圖檔,你的網站又沒有PNG/JPEG檔備用,那網頁就會出現一堆紅色XX(俗稱的紅色叉燒包啦!),這就很尷尬了。

圖片延遲加載(Lazyload)

如果你的網頁有20張圖片,一般情況下,瀏覽器會將這20張圖片都載入完成,才會把畫面show給你;如果這20張圖片,你又沒有正確壓縮、縮小檔案大小,光是圖片總大小可能就超過10MB,網頁開啟速度超級慢就不能怪別人了。

如果有圖片延遲加載(Lazyload)功能,瀏覽器會「先載入使用者在當前畫面會看到的圖片,等到使用者將頁面往下捲動時才繼續載入後續圖片」,大幅降低使用者等待時間。

EWWW Image Optimizer 和 SWELL 都有 Lazyload 功能,兩者會相互衝突,後續歐森會教你怎麼設定。

如何安裝EWWW Image Optimizer

路徑:控制台>外掛>安裝外掛

STEP
搜尋「EWWW Image Optimizer」,安裝並立即啟用

EWWW Image Optimizer 詳細設定

跳過自動導航

路徑:控制台>設定>EWWW Image Optimizer

STEP
點選「I know what I’m doing, leave me alone!」跳過自動導航。
STEP

如果你選擇Speed up your site等選項並按下「Next」,圖片 Lazyload 就會自動開啟,可能與SWELL會產生衝突;自動導航設定項目中也沒有開啟WebP的選項,所以請跳過自動導航,改用手動設定。

變更為進階模式

STEP
點擊管理介面中的「Enable Ludicrous Mode」,進入進階模式

另外一提,如果你不訂閱付費版本,管理介面上方的「Optimization Score」永遠不會是100%,歐森覺得這只是焦慮行銷,所以不用在意這個分數值。

基本設定(Basic頁籤)

可以捲動
重要性設定項目設定說明
Remove Metadata刪除照片的EXIF資訊(拍攝時間、地點等)
勾選,有效維護隱私。
Resize Images如果圖片超過設定值,則自動裁切縮放
長寬設定都保持為0,即為不啟用,可避免加重主機伺服器負擔。
Lazy Load圖像的 Lazyload 設定
不勾選,我們將使用SWELL主題的相關功能
WebP Conversion將圖像轉換為WebP格式
勾選,下方會出現更多延伸設定項目,歐森將帶你繼續完成。

基本設定(WebP部分)

在上一步,我們勾選「WebP Conversion」後,下方會跳出更多設定控制項,別擔心,我們一步一步來。

STEP
先拉到畫面最下方,按下「Save」儲存設定
STEP
點選「Insert Rewrite Rules」按鈕,將轉檔規則寫入網站的 .htaccess 檔中之後…

如果你跟歐森一樣,使用Cloudways主機,將轉檔規則寫入 .htaccesss 之後,會出現以下訊息,表示寫入成功,但是WebP測試失敗。我們需要於Cloudways主機端也進行對應設定(請參考下一步驟):
Insertion successful, but self-test failed: WebP response failed mime-type test. Purge all caches and try again.

STEP
[其他]於 Cloudways主機端啟用 WebP Redirection 服務

路徑:Cloudways管理介面>Applications>選擇你要啟用的網站>左側Application Settings

右側找到「WebP Redirection」,預設是關閉(Disable),切換到開啟(Enable),按下「OK」確認後,等它跑完就可以回到WordPress後台繼續設定囉。

回到 EWWW Image Optimizer 介面,清除網站快取(範例中使用Cloudways預設安裝的 Breeze 緩存外掛)後,就會看到「WebP Rules verified successfully」 字樣,且原本的紅色PNG標示,變為綠色WebP標示,就設定完成囉!

轉換設定(Convert頁籤)

接著,讓我們直接跳到「Convert」頁籤(Local、Advanced、Resize頁籤中的設定都維持預設即可)

可以捲動
重要性設定項目設定說明
Hide Conversion Links媒體庫中,每一張圖片都會多一個「圖片格式轉換」的手動功能,如果你的網站不只一個管理者,你可以勾選這個項目,避免其他管理者透過圖片格式轉換功能,繞過你設定好的圖像管理設定。

如果有多個網站管理者,建議勾選。
Delete Originals圖片轉換後,是否刪除原始檔?
不勾選,保留原始檔案備用。
JPG to PNG Conversion不勾選,避免增加伺服器負擔
PNG to JPG Conversion不勾選,避免增加伺服器負擔
GIF to PNG Conversion不勾選,避免增加伺服器負擔

如何使用EWWW Image Optimizer?

針對安裝並設定完成後,才上傳的圖片

當你上傳新圖片到WordPress媒體庫時,EWWW Image Optimizer 會自動優化並轉換成WebP格式。

針對安裝並設定完成前,就上傳的圖片

已經上傳的圖片,我們需要手動進行批量優化。

路徑:控制台>媒體>Bulk Optimize

STEP
點選「Scan for unoptimized images」

系統會掃描並計算需要優化的圖像數量

STEP
點選「Optimize x images」進行優化
STEP
等待跑完就完成圖片批量優化囉!

SWELL佈景主題的對應設定

我們不使用EWWW Image Optimizer 的圖像延遲加載(Lazyload)功能,是因為SWELL佈景主題本身,使用更好的JS腳本來達成圖像延遲加載的效果,且預設即為開啟的,無須再額外設定。

當然,你也可以到SWELL設定中,確認(スクリプト(lazysizes.js)を使って遅延読み込みさせる)項目是否開啟:

路徑:控制台>SWELL設定>高速化

常見問題

圖片上傳之前,我需要先進行壓縮嗎?

不用唷!因為圖片上傳後會自動壓縮,這樣等於壓縮兩次,圖像質量會降低變得模糊。

所以上傳之前,請裁切成你要的尺寸就好,不需要再用TinyPNG之類的服務/軟體壓縮

圖片上傳前,我應該要裁切圖片的長寬尺寸嗎?

是的,請務必這麼做。

如果你不知道該裁切成什麼長寬才適合SWELL佈景主題,請參考以下文章。

小結

以上就是EWWW Image Optimizer 的安裝設定教學囉!如果你覺得這篇教學對你有幫助,歡迎幫歐森分享出去,這將會帶給我很大鼓勵,非常感謝你!(鞠躬)

請分享給更多人!^^
  • 已成功複製本頁網址(URL)!
  • 已成功複製本頁網址(URL)!

責任編輯

不在電腦前寫稿剪片,就在探索世界角落的路上。信仰「內容」的力量,相信發自內心的真誠分享,就是數位時代能攏聚一眾人心的關鍵密碼!:)

歡迎留言一起討論!

撰寫留言

目錄