提升WordPress網站的載入速度的其中一種辦法——減少圖片體積大小。平均而言，圖片約佔網頁檔案大小的一半，因此即使是很小的改進也可以取得很大的效果。
WebP是一種較新的圖片格式（相比jpg和png），該格式的最大特點是減小圖片體積大小而不影響質量。將圖片轉換為WebP格式可以將其尺寸縮小約25-35％，而不會造成質量損失。
我們將在此文中深入探討該主題！
什麼是WebP?
那麼……什麼是WebP檔案？簡而言之，WebP是Google開發的一種圖片格式。我們更為常見的圖片格式是JPEG或JPG和PNG，WebP則算得上後起之秀。
WebP致力於提供相同質量的圖片，但檔案尺寸較小。通過減少圖片檔案的大小，而不會“降低圖片呈現質量導致糟糕使用者體驗”，並且有利於網站載入速度提升。
在Google的WebP壓縮研究中，Google發現平均一個WebP圖片檔案…
- 比JPEG圖片小25-34％。
- 比PNG圖片小26％。
這就是為什麼如果您通過PageSpeed Insights執行網站測試，會看到採用WebP等下一代格式提供圖片：
Google PageSpeed Insights建議使用WebP格式圖片
那麼Google的WebP格式如何實現檔案大小減少？WebP支援有損和無失真壓縮，因此確切的減少取決於您使用的是有損還是無失真壓縮。
通過有損的WebP壓縮，WebP使用一種稱為“預測編碼”的方法來減小檔案大小。預測編碼使用圖片中相鄰畫素的值來預測值，然後僅對差異進行編碼。它基於VP8關鍵幀編碼。
無損WebP使用WebP團隊開發的一套更為複雜的方法。如果您想詳細瞭解WebP壓縮技術，那麼可以閱讀谷歌相關文件。
哪些瀏覽器支援WebP？
為了使WebP圖片起作用，需要Web瀏覽器相容才行。不幸的是，儘管越來越多的瀏覽器開始相容WebP，但WebP相容性仍然不是通用的。
當前主流瀏覽器一般都支援WebP圖片（冥頑不靈的IE依然是不支援的，也可能因為它不是開源的），例如：
- Chrome（PC&移動版）
- Firefox（PC&移動版）
- Edge
- Opera（PC&移動版）
值得注意的是Safari，Safari的桌面版和移動版均不支援WebP圖片。Apple在2016年曾嘗試Safari相容WebP的開發，但此後就渺無音訊了。
Internet Explorer也不相容WebP（Edge支援WebP，因為它基於Chromium）。
總計，大約77％網際網路使用者使用支援WebP的瀏覽器。但23％的數字太大了，不容忽視（在下面的WebP教程中，將會詳細說明如何處理此問題，以便所有訪問者都擁有良好的體驗）：
WebP支援
WebP vs JPG vs PNG 體積大小比較
根據Google的測試，WebP圖片為：
- 比JPEG圖片小25-34％
- 比PNG圖片小26％
如果您想進一步瞭解Google的方法，可以閱讀谷歌關於WebP的一些說明資料：Lossless and Transparency Encoding in WebP，WebP Compression Study。
兩項測試均基於超過11,000張圖片，包括：
- 著名的Lenna標準測試圖片
- 24張柯達真彩色圖片
- 100張Tecnick.com圖片
- 11,000多張Google圖片搜尋的隨機樣本
如何在WordPress上使用WebP圖片
由於並非所有瀏覽器都支援WebP圖片，因此，您不能像JPEG和PNG那樣，直接通過媒體庫上傳WebP圖片檔案並直接使用。
同樣，23％的網際網路使用者（包括所有Safari使用者）使用不支援WebP的瀏覽器。如果一刀切的方法所有圖片格式換成WebP，則此類訪客將無法看到您的網站圖片，結果可想而知。
但無需擔心，有問題自然就有對應的解決方案！
您可以使用WordPress外掛，而不是將WebP圖片直接上載到WordPress，而是將您的原始圖片轉換為WebP格式，並在訪客瀏覽器不支援WebP時提供原始圖片作為備用。
例如，如果您將JPEG檔案上傳到您的網站，則該外掛：
- 將JPEG檔案轉換為WebP，並使用WebP版本供使用Chrome，Firefox等瀏覽器訪問者瀏覽。
- 向使用IE、Safari和其他不支援WebP的瀏覽器的訪問者顯示原始JPEG檔案。
這樣，每個人都可以檢視網站圖片，並且保證了77%的訪客獲得更佳的網站載入體驗。下面，將介紹一些優秀的WebP圖片外掛。
ShortPixel
WordPress外掛-ShortPixel
ShortPixel是一個非常熱門的WordPress圖片優化外掛，可以幫助您自動調整圖片大小並壓縮上傳到WordPress網站。作為其功能列表的一部分，ShortPixel還可以自動將圖片轉換為WebP並將這些圖片提供給支援WebP的瀏覽器。
ShortPixel提供了一個基礎的免費計劃，每月免費優化約100張圖片。在那之後，付費套餐的起步價為4.99美元/月（5,000張圖片），或單次付費9.99美元（10,000圖片）。
您可以在任意網站上分配ShortPixel圖片優化額度-沒有站點限制（並且您的所有網站都可以使用相同的ShortPixel帳戶）。
要在你的WordPress網站使用ShortPixel，您需要從WordPress.org安裝外掛並新增API金鑰（您可以通過註冊免費的ShortPixel帳戶獲得）。
在“ General ”選項卡中，您可以設定圖片優化工作方式的基本設定。例如，使用哪種壓縮級別以及是否調整圖片大小：
ShortPixel外掛設定
要啟用WebP圖片，請轉到“Advanced ”選項卡，然後：
- 勾選“WebP Images”框
- 勾選“Deliver the WebP versions.. ”框。（選中第一個框後出現）
- 選中“Using the <PICTURE> tag syntax”單選按鈕（在選中上一個框後顯示）
- 保留預設的“Only via WordPress hooks selection”。
ShortPixel外掛啟用WebP圖片支援
最後，儲存您的更改。
Imagify
WordPress外掛-Imagify
Imagify是另一款熱門圖片優化外掛，為著名WordPress快取優化外掛WP Rocket開發人員所開發。
它可以自動壓縮和調整您上傳到WordPress網站的圖片的大小。然後，還可以將圖片轉換為WebP，並將WebP版本提供使用支援WebP的瀏覽器的訪問者。
在功能方面，ShortPixel和Imagify有許多相似之處。最大的不同是。ShortPixel按圖片數量計費，圖片大小則無限制；而Imagify會根據檔案總大小收費，但無圖片數量限制。
因此，如果您需要優化大量大圖片，ShortPixel的計費方式可能更合適你。相反，如果您需要優化許多小圖片，則Imagify的計費方式可能更划算些。
Imagify的免費套餐感覺“在侮辱使用者”，每月僅支援25MB的圖片優化。之後，付費方式為4.99美元/月（最多1GB）或單次付費9.99美元（最多1GB）。
與ShortPixel一樣，Imagify也支援在無限網站使用，反正是按量付費，管你在幾個網站上用。
要使用Imagify外掛使WordPress網站支援WebP圖片，您需要從WordPress.org安裝外掛並新增API金鑰啟用使用。
啟用外掛後，進行外掛設定介面選擇“General Settings”進行WebP優化設定。
Imagify外掛設定
要啟用WebP圖片，請向下滾動到“Optimization ”部分，然後找到“WebP Format”部分：
- 勾選“Create webp versions of images”
- 勾選“Display images in webp format…”
- 選擇單選按鈕“use <picture> tags”
- 如果你的WordPress網站使用了CDN，則還需要在“If you use a CDN box”輸入框填入CDN服務商提供的屬於你網站的CDN加速地址URL。
Imagify啟用WebP圖片優化設定
Optimole
WordPress外掛-Optimole
Optimole是這次要介紹的第三個WordPress圖片優化外掛，其操作與Imagify和ShortPixel略有不同。Optimole可以自動壓縮圖片並調整其大小。但是，它還提供其他兩個顯著功能：
- 它可以通過自己的CDN（由Amazon CloudFront支援）來提供圖片。
- 它提供實時的自適應圖片，Optimole將為每個訪客提供最佳尺寸的圖片。
這種方法類似於其他實時優化服務，例如Cloudinary，imgix，KeyCDN圖片處理等。
作為實時圖片優化的一部分，Optimole向支援WebP的瀏覽器提供WebP圖片。
Optimole也提供免費套餐，每月可以處理大約5,000個訪問者的圖片。之後，付費套餐起步價為19美金/月，支援25,000名訪客。
首先，您需要從WordPress.org安裝外掛，並使用API金鑰啟用該外掛（可以通過註冊免費的Optimole帳戶獲得該金鑰）。
完成後，Optimole將開始自動優化圖片並通過其CDN為訪客提供圖片。WebP支援預設情況下處於啟用狀態，無需手動啟用。
當然你還想執行其他設定，例如壓縮級別和縮放，可以轉到“媒體→Optimole→Settings”：
Optimole外掛設定
EWWW Optimizer
EWWW Image Optimizer外掛是最好的WordPress影象壓縮外掛之一，可讓您優化WordPress影象。它還支援WebP影象，並可以在支援的瀏覽器上自動顯示它們。
您需要做的第一件事是安裝並啟用EWWW Image Optimizer外掛。
啟用後，轉到Settings » EWWW Image Optimizer頁面以配置外掛選項。你可以根據安裝嚮導配置外掛，但如果你不需要，則可以點選“I know what I am doing”連結以退出嚮導。
EWWW Optimizer外掛安裝嚮導
在下一個介面上，可以看到一些外掛選項。向下滾動並選中“WebP Conversion”選項旁邊的框。
EWWW Optimizer外掛WebP轉換選項
之後，單擊“Save Changes”按鈕儲存設定。
接下來，向下滾動到“WebP Conversion”部分。現在，該外掛將為您顯示一些帶有紅色預覽影象的重寫規則。
您需要單擊“Insert Rewrite Rules”按鈕，外掛將自動嘗試將這些重寫規則插入.htaccess檔案中。
.htaccess重寫規則
如果外掛成功新增了這些規則，則紅色影象預覽將變為帶有“WebP”文字的綠色。
.htaccess檔案WebP重寫規則生效
有時，外掛可能無法插入規則。在這種情況下，您需要從外掛的設定頁面複製重寫規則，然後將其手動貼上到.htaccess檔案的底部。
完成後，返回到外掛的設定頁面，然後再次單擊“Save Changes”按鈕。如果預覽影象變為綠色，則表示您已成功在WordPress網站上啟用WebP影象傳遞。
或者，您可以從JS WebP Rewriting或<picture>這兩種WebP重寫方法中選擇其一作為WebP delivery選項。這些方法比.htaccess方法要慢一些，但可以完成工作。
批量將舊影象轉換為WebP版本
EWWW Image Optimizer支援將以前上傳的影象檔案轉換為WebP影象。只需轉到媒體»媒體庫頁面，然後切換到列表檢視。
WordPress多媒體庫列表顯示數量
接下來，您需要單擊“顯示選項”按鈕，並將“每頁的專案數”更改為999。如果您有1000幅以上的影象，則這些影象將顯示在下一頁上。
這樣，您將能夠快速選擇大量影象以進行批量優化。接下來，單擊頂部的全選覈取方塊以選擇所有影象。
批量優化圖片
之後，點選批量操作下拉選單，然後選擇批量優化選項。最後，單擊“應用”按鈕。
在下一個介面上，該外掛將為您提供一個選項，可以跳過影象壓縮，僅將其轉換為WebP。如果您的影象已經優化，則可以選中此選項。
跳過圖片壓縮僅轉換WebP
之後，單擊“Scan for Unoptimized Images”按鈕繼續。然後，該外掛將向您顯示找到的影象數量，因此您可以單擊“Optimize”按鈕繼續。
現在將優化您的影象，並且EWWW Image Optimizer將為您的影象生成WebP版本。
批量轉換進度
測試WebP影象生效情況
優化影象後，您可以轉到包含多個影象的部落格文章或頁面。將滑鼠移到任何影象上，然後單擊滑鼠右鍵以在新選項卡中開啟影象。
新視窗開啟檢視影象
這將在新的瀏覽器選項卡中開啟影象，您將能夠在位址列中看到其副檔名為.webp。
WebP格式圖片
如果外掛無法提供webp影象，則可以返回到外掛的設定頁面。在這裡，您可以將WebP Delivery選項更改為“JS WebP Rewriting”或“<picture> WebP Rewriting”方法。
SG Optimizer
如果您是SiteGround使用者，則建議使用此方法。
SiteGround是最好的WordPress託管公司之一。他們為使用者提供了免費的SG Optimizer外掛，可讓您優化WordPress效能。它還包括優化WordPress影象的選項。
首先，您需要安裝並啟用SG Optimizer外掛。
啟用後，該外掛會將新選單項新增到標有“SG Optimizer”的管理側邊欄中。單擊它會帶您到外掛的設定頁面。
SG Optimizer快取設定
如果您想使用SiteGround的內建快取系統，則可以在此處開啟快取設定。
之後，您可以切換到“Media Optimization”選項卡，然後開啟“Generate WebP Copies of New Images”選項。
為新圖片生成WebP副本
在其下，您將看到“Bulk Generate WebP Files”選項。單擊它將開始為WordPress媒體庫中的所有影象檔案生成WebP副本。
批量生成Webp檔案
完成後，您的WordPress網站將開始提供WebP影象。
在SG Optimizer中測試WebP影象
要檢視您的網站是否正在提供WebP影象，您需要在網站上開啟一個包含一些影象的頁面。
之後，右鍵單擊並選擇檢查工具。這將開啟開發者控制檯，您需要在其中切換到“Network ”選項卡。
瀏覽器除錯檢查圖片格式
在此處，單擊“img”選項卡，然後重新載入頁面（在Windows上為CTRL + R，在Mac上為Command + R）。當您的網站重新載入時，您將看到在開發人員控制檯中載入的所有影象。
小結
很多時候，WordPress網站中佔據頁面體積的大比例的，非圖片莫屬。如果頁面圖片過多且體積過大，建議應該考慮對圖片進一步優化以提升網站頁面的載入速度。
WebP作為新一代的圖片格式，與較為經典的JPEG或PNG檔案相比，可以將檔案大小減少約25％。
現在大多數現代瀏覽器都支援WebP（大約77％網際網路使用者使用支援WebP的瀏覽器），但是，某些瀏覽器（尤其是Safari和IE）仍不提供WebP支援，又不能為所有訪問者提供WebP圖片。
要解決此問題，建議使用WordPress外掛，將圖片轉換為WebP並向其瀏覽器支援此格式的訪問者提供WebP版本，而對那些不支援該格式的訪問者使用原始圖片。推薦以下三個外掛：
- ShortPixel.
- Imagify.
- Optimole.
- EWWW Optimizer.
- SG Optimizer.
以下為WordPress圖片優化相關文章，參考閱讀：
評論留言