這次主題是利用Imagify這個外掛讓Wordpress(WP)系統可以支援WebP的圖檔格式. 其實WP 5.8版本以後就有支援此功能, 但有少部份瀏覽器並沒有支援(IE…等等), 這樣子當訪客到訪時, 會看到原先圖片位置呈現空白. 所以利用此外掛來增加相容的作用, 以避免上述的問題發生.
而WebP是Google所推出的一種技術,主要是讓圖檔更小且不會破壞原圖的結構, 以利網頁載入時能更加快速傳輸而改善主機效能, 也更能減少訪客的跳出率(Bounce Rate)而影響SEO. 更多詳細就不再此篇文章描述了!
直接在WP後台\外掛\安裝外掛, 輸入[Imagify],然後[立即安裝]\[啟用]就可以.
Lazy Load是另一個外掛程式,但端看網站主的需求而要不要安裝使用. 原因是網站是用Autoptimize外掛內的lazy load功能, 但因為它與Imagify外掛裡的WebP功能不相容, 會導致無法正確顯示WebP的圖檔, 在和原作者的詢問之後, 可以用此外掛來替代lazy load功能且不會有無法顯示的問題發生!
直接[安裝]\[啟用]就可以, 無需做其他任何設定.
在啟用Imagify外掛後, 一開始需要一組API Key, 如果網站沒有很多圖片優化的需求, 可以用免費的功能, 每個月有20MB的額度可以使用, 若需要更多, 可購買其他服務.
點選下方的[CREATE A FREE API KEY]按鈕,就可以開始申請.
輸入任一個Email, 以方便接收信件來啟用此帳號. (中間省略了此步驟, 請見諒!)
在從Email中, 點選指定的路徑之後, 就會開啟一個視窗,可以在右上角看此帳戶的相關資訊.
然後點選[API-INTEGRATION]就會自動產生API Key了, 此時複製它, 再把它貼回WP網站內的正確位置之後,就可以開始使用Imagify外掛的功能了.
下方為Imagify主要功能畫面, 各功能可依網站主的需要去做適切的調整.
紅色框中是啟用WebP format最重要的選項, 選擇[Use <picture> tags (preferred)]此功能就可以了.
最後別忘了按下[儲存設定]按鈕!
Imagify的Bulk Optimization(批次優化), 從這裡可以知道目前此帳戶的使用量狀況. 這裡可以一次大量的轉換成webp, 但個人建議, 先把系統備份好, 再來使用, 且可以小量的分批處理圖片, 才不會造成網站大混亂.
利用WP後台中的[媒體庫], 在右側可以清楚有哪些已經透過Imagify轉換完成了.
最後回到前台網站, 可以試著在圖片上按右鍵\另存影像, 就可以知道是否預設已更改為WebP格式了.
總結:
利用上面的方式來改善網站對客戶端瀏覽器的相容性,且也有利於網站改善整體速度, 儘管免費註冊的額度不多, 但可以利用其他方式來改善. 可以先在本地端把要上傳圖片全部透過Google Squoosh去做轉換成WebP, 這樣子就會有二份圖檔了, 二邊的圖檔檔名要一樣, 在WebP的圖檔需要再多加[.webp]. 例如:一邊圖檔名稱是test.jpg. 那另一邊WebP的檔名就要取名為test.jpg.webp, 這樣子此外掛才能正確判別何時用WebP的圖檔.
溫馨提醒: [.webp]格式的圖檔, 建議從主機方直接上傳, 如果從WP後台裡上傳, 會變成[尚無關聯內容],可能會造成系統效能的影響!
另外, 此方式是為了支援無法顯示WebP的瀏覽器, 所以網站主機中會存有二份圖檔, 要注意一下主機的空間, 以避免造成效能降低或其他不可預期的問題發生!
實用的文章, 感謝分享!