如何兼顧圖片顯示品質,及網站載入速度,是每個站長的重要功課!
「 EWWW Image Optimizer」是擁有上百萬個安裝數的熱門WordPress外掛,除了協助圖片壓縮之外,還可以線上轉換成WebP格式;它有付費版本,但是歐森覺得免費版就很夠用了!在本文中,我將詳細介紹免費版的安裝及設定方法,使之與SWELL完美配合運行。
EWWW Image Optimizer可以做什麼?
圖片壓縮
將圖片壓縮會犧牲部分畫質,但可以進一步縮小檔案,不僅節省主機硬碟空間,也可以讓網頁載入速度加快,對SEO有正面幫助。
過去,許多使用者購買 EWWW Image Optimizer 付費版的原因之一,是因為免費版本的圖像壓縮率並不高;不過在幾乎95%以上瀏覽器都開始支援次世代圖片格式 WebP 的現在,我們可以透過 EWWW Image Optimizer 免費版,將上傳的PNG、JPEG圖檔,轉成WebP格式於網頁前端顯示,所以壓縮率就不這麼重要囉!
調整圖片尺寸大小
另一個減小圖檔容量的方法,就是將圖片尺寸縮小。
一般來說,從知名圖庫例如 Unsplash、Pixabay 等下載回來的原始圖片,動輒寬度都超過6000px,單張圖檔的容量多在 2MB以上;所以,將圖片裁切並縮放成適合的尺寸大小,就非常重要。
另外,當你上傳一張圖片到 WordPress 媒體庫,WordPress 預設會自動生成多張不同尺寸的圖片,有些佈景主題也會做同樣的事,所以你的圖片會從1張變成10張都有可能,非常浪費硬碟空間,未來要管理也非常麻煩;建議你先花一點時間,依照歐森的教學文章調整WordPress初始設定:
將圖片轉換為WebP格式
WebP,是Goolge在2010年提出的次世代圖片格式,旨在減少圖片檔案大小的同時,達到和JPEG、PNG、GIF格式相同的圖片品質,並提高圖片檔載入速度。
依據 CanIUse 網站的調查,截至2024年4月,已經有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
EWWW Image Optimizer 詳細設定
跳過自動導航
變更為進階模式
基本設定(Basic頁籤)
重要性 | 設定項目 | 設定說明 |
---|---|---|
高 | Remove Metadata | 刪除照片的EXIF資訊(拍攝時間、地點等) 勾選,有效維護隱私。 |
低 | Resize Images | 如果圖片超過設定值,則自動裁切縮放 長寬設定都保持為0,即為不啟用,可避免加重主機伺服器負擔。 |
高 | Lazy Load | 圖像的 Lazyload 設定 不勾選,我們將使用SWELL主題的相關功能 |
高 | WebP Conversion | 將圖像轉換為WebP格式 勾選,下方會出現更多延伸設定項目,歐森將帶你繼續完成。 |
基本設定(WebP部分)
在上一步,我們勾選「WebP Conversion」後,下方會跳出更多設定控制項,別擔心,我們一步一步來。
右側找到「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格式。
針對安裝並設定完成前,就上傳的圖片
已經上傳的圖片,我們需要手動進行批量優化。
系統會掃描並計算需要優化的圖像數量
SWELL佈景主題的對應設定
我們不使用EWWW Image Optimizer 的圖像延遲加載(Lazyload)功能,是因為SWELL佈景主題本身,使用更好的JS腳本來達成圖像延遲加載的效果,且預設即為開啟的,無須再額外設定。
當然,你也可以到SWELL設定中,確認(スクリプト(lazysizes.js
)を使って遅延読み込みさせる)項目是否開啟:
常見問題
小結
以上就是EWWW Image Optimizer 的安裝設定教學囉!如果你覺得這篇教學對你有幫助,歡迎幫歐森分享出去,這將會帶給我很大鼓勵,非常感謝你!(鞠躬)
歡迎留言一起討論!