如何在 WordPress 上使用 WebP 圖片

Markus Spiske
Markus Spiske

提供輕量級 WebP 圖片可以幫助提高網站速度,這對於使用者體驗和排名因素至關重要,在本文中,我們將介紹將現有圖片轉換為 WebP 的幾種不同方法,包括 Google 的 cwebp 實用程式、Convertio 等雲端轉換器以及 EWWW Image Optimizer 外掛程式。

我們還將向您展示如何結合使用 EWWW 和 WP Offload Media 將 WebP 映像檔卸載到雲端儲存供應商以釋放伺服器資源,並對其進行設置,以便所有內容都透過 CDN 提供服務。

不久前,您需要一個外掛程式來讓 WordPress 識別 WebP 圖片, WordPress 5.8 的發佈及其對 WebP 圖片格式的支援結束了那些日子,但在將現有圖片轉換為 WebP 格式方​​面,外掛程式仍然佔有一席之地,EWWW Image Optimizer 支援產生 WebP 文件,並且與 WP Offload Media 外掛程式配合得很好。

什麼是 WebP?

Google 於 2010 年開發了 WebP 圖片格式,以改善 JPEG 和 PNG 提供的壓縮,該格式還支援動畫和透明圖像, WebP 提供無損和有損影像壓縮。

  • 無損:以較大檔案大小為代價提供完美再現, PNG 是無損影像。
  • 有損:丟棄部分資料並使用演算法重建影像,產生較小的媒體檔案。 JPG 是有損影像。

PNG、JPG、WebP

根據 Google 的 Jyrki Alakuijala 和 Vincent Rabaud 進行的研究,WebP 圖片的檔案大小通常比同等的 PNG 或 JPG 檔案小。

  • PNG: WebP 檔案的無損版本比 PNG 檔案小約 26%。
  • JPG: 有損 WebP 檔案通常比 JPG 小 25% 到 34%。

當談到性能時,圖片尺寸很重要,提供 WebP 而不是 JPEG 或 PNG 圖片檔案可以節省大量頻寬,特別是當您的 WordPress 網站有大量圖片時,更緊湊的圖片檔案可以更快地交付網站、降低跳出率並提高排名,從而增強訪客體驗。

大多數瀏覽器支援 WebP

WordPress 5.8 引進了對 WebP 的支援,那時大多數主要的桌面和行動瀏覽器已經支援 WebP 影像格式,不過,Safari 對 WebP 格式的支援要求使用者至少升級到 Big Sur。

對 WebP 的支援很廣泛,但仍不夠普遍,對於沒有 WebP 支援的用戶,您需要回退到其他影像檔案,執行此操作的選項包括 HTMLpicture元素和圖片最佳化外掛程式。

新的競爭者:JPG XL 和 AVIF

WebP 是當前輕量級影像冠軍,但它可能不會長期保持這一地位,JPG XL 和 AVIF 文件格式的開發目的是在自己的遊戲中擊敗 WebP 文件,兩者都提供比 WebP 更高的壓縮比。

這兩種格式都很有前景,但瀏覽器尚未廣泛支援 JPG XL,有更多瀏覽器支援 AVIF,但目前 WordPress 不支援這兩種格式,話雖如此,您可以使用一些 PHP 讓 WordPress 識別下一代格式。

在 WordPress 網站上提供 WebP 圖片

有幾種不同的方法可以提供 WebP 圖片,同時仍提供後備,包括 HTMLpicture元素和外掛程式。

WordPress 5.8 及更高版本將 WebP 格式的圖片識別為有效的 MIME 類型,因此您可以使用wp_editor_set_quality 篩選器設定 WordPress 網站上 WebP 檔案的壓縮品質,請注意,WordPress 預設會建立與上傳格式相符的小檔案。

即使在 中設定 WebP 檔案的壓縮品質後wp_editor_set_quality,如果您上傳 JPEG,您將獲得較小尺寸的 JPEG,而不是 WebP 檔案,若要將所有縮圖轉換為 WebP,請參閱有關使用 WordPress 過濾器提供 WebP 縮圖的部分。

或者,有關使用 EWWW Image Optimizer 提供 WebP 圖片的部分包括一種提供 WebP 圖片的方法,同時為不相容 WebP 的瀏覽器保留原始圖片格式, WordPress 多網站使用者可能會面臨另一個挑戰,因為多網站會在您首次建立網站時設定可識別的檔案類型。

換句話說,site_option_upload_filetypes如果您希望所有多網站子網站都使用 WebP 圖片,則必須對篩選器進行一些手動調整,確保將過濾器添加到網路 MU 外掛中,以便您的所有子網站都可以使用它, WordPress 核心中有一個開放的 PR 可以解決這個問題,該連結還包含在 PR 被接受之前您需要添加到 MU 外掛中的內容的詳細資訊。

除了多網站問題之外,您仍然需要為執行舊版 WordPress 的任何網站提供第三方外掛程式,該外掛必須從現有文件建立 WebP 文件,同時也將它們傳遞到支援 WebP 的瀏覽器。

帶有 HTML 的 WebP 圖像

您可以使用 HTMLpicture元素,它應該向大多數支援它的瀏覽器提供 WebP 圖片,同時向少數不支援 WebP 的使用者提供其他圖片格式。

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="">
</picture>

使用 WordPress 濾鏡提供 WebP 縮圖

在我們深入探討如何轉換圖片之前,如果您只關心以 WebP 形式提供縮圖,則有一種更簡單的方法,您不擔心不支援 WebP 的瀏覽器有後備圖片格式,並且您正在使用WordPress 5.8 或更高版本,此過程不會轉換原始影像文件,但會將縮圖顯示為 WebP,如果您有大量縮圖的頁面,這對於減少網站的載入時間非常有用。

關鍵是使用WordPress 5.8 的image_editor_output_format 過濾器,您可以使用它來調整 WordPress 用於保存縮圖檔案的 MIME 類型,由於 MIME 類型通常與來源影像匹配,因此傳遞到image_editor_output_format過濾器的映射數組預設為空,如果您變更篩選器中影像的映射,以便將一種 MIME 類型 (例如:JPG 或 PNG) 對應到另一種 MIME 類型,例如:WebP,則產生的縮圖影像將具有不同的類型,這會導致 WebP 影像被用作縮圖,而來源影像保留其原始格式。

您可以將以下程式碼新增至您的網站,將所有 JPEG 和 PNG 原始檔的縮圖轉換為 WebP:

add_filter( 'image_editor_output_format', function( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png'] = 'image/webp';

    return $formats;
} );

需要注意的是,這需要您的網頁伺服器的影像處理庫支援 WebP 格式。

重新產生現有縮圖

這將為webp任何新上傳的圖片創建縮圖,但是媒體庫中的任何現有圖片又如何呢 ?

如果您對縮圖感到滿意webp,則需要重新產生現有影像的縮圖,有一些外掛程式可以執行此操作,但如果您有權訪問 WP-CLI,也可以使用它,該wp media regenerate 命令將使用透過過濾器設定的新 WebP 格式重新產生所有縮圖:

wp media regenerate --yes --skip-delete

使用此--skip-delete選項可確保原始縮圖保留在伺服器上,但是,它們將被孤立,因為附件的元資料將不再引用它們。您可以手動修復此問題,但更容易使用 WP Migrate 的尋找和取代工具等工具來更新引用舊縮圖的所有內容,並將其變更為使用 WebP 擴充功能,此過程應將 WebP 影像作為縮圖提供,而無需轉換來源影像,然而,一個更優雅的解決方案是使用 EWWW Image Optimizer 或其他外掛程式將 WebP 新增為支援時提供的附加檔案。

轉換為 WebP 圖片格式的 3 種方法

使用 Cwebp 轉換為 WebP 圖片格式

Google 已預先編譯實用程序,可在上傳 JPG、PNG 和 TIFF 之前將其轉換為 WebP 圖片,您使用的作業系統將決定您如何安裝這些​​實用程式。

在 macOS 上有一個可用的自製程式包,您可以使用以下命令安裝它:

brew install webp

大多數流行的 Linux 發行版在其軟體包管理器中都有可用的實用程式版本,例如:在 Debian / Ubuntu 上,您可以透過 apt 安裝它:

sudo apt-get install webp

如果您使用的是 Windows,或無法使用上述選項之一,則可以下載適用於您的作業系統的打包實用程式的存檔。

如果您從上面的連結安裝版本,第一步是提取下載的檔案,解壓縮完成後,您可以cwebp在解壓縮檔案的 bin 目錄中找到可執行檔,您可能需要將此目錄新增至系統路徑中,具體取決於您打算執行該實用程式的頻率。

準備好轉換檔案後,打開命令列介面,將 PNG 檔案轉換為 WebP 的基本命令如下所示。

cwebp -q 80 image.png -o image.webp

讓我們分解這個命令的元素,看看如何建立我們自己的命令字串,以允許 cwebp 轉換我們的 PNG 和 JPEG。

  • cwebp:如果您尚未將 bin 資料夾新增至系統路徑中,則需要將檔案的完整路徑插入命令列中,在 Windows 中,這看起來像這樣:“C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe”
  • -q:後面應該跟著一個 1 到 100 之間的數字來設定壓縮係數,使用的數字越低,文件的品質越低,有損壓縮是 cwebp 的預設壓縮方式,若要啟動無損壓縮,請使用-lossless-exact選項。
  • image.png:將其替換為要轉換為 WebP 的檔案的名稱,確保包含正確的檔案副檔名,請注意,您還必須包含完整路徑,否則 cwebp 將不知道在哪裡找到它,影像的完整腳本應如下所示:“C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg”
  • -o:此命令指定新 WebP 檔案的名稱以及您希望將其儲存的位置,同樣,您需要在命令後包含完整路徑,按照上面的範例,我們將使用字串-o “C:\Users\Mike\Pictures\WebPs\Mountains Test.webp”

一旦我們把它們全部放回一起,我們就得到了這個命令列字串:

"C:\Users\Mike\Downloads\WebP\libwebp-1.2.1-windows-x64\bin\cwebp.exe" "C:\Users\Mike\Pictures\JPEGs\Mountains Test.jpg" -q 80 -o "C:\Users\Mike\Pictures\WebPs\Mountains Test.webp"

如果您能夠按照上面所述使用套件管理器安裝 cwebp 實用程序,則可能不需要包含 cwebp 可執行檔的完整路徑。

Google 提供了完整的 cwebp 命令列表,您可以使用它們將圖像檔案轉換為 WebP 格式,只有在少數情況下您才需要其中的大多數。

我們建構的命令字串一次只會轉換一張圖片,您可以透過這種方式轉換所有圖片,但我們都知道編寫腳本來轉換同一目錄中的每個圖像將是更合適的解決方案。

我打開 Git Bash 並導航到儲存測試圖像的目錄,然後我運行這個腳本:

for file in *.jpg
do
cwebp -q 80 "$file" -o "${file%.jpg}.webp"
done

這是一種相當基本的方法,我只轉換了 20 張圖片,而且過程很快,您可能想了解如何透過並行處理來運行它以加速 WebP 影像轉換,此外,我使用的腳本將新的 WebP 檔案放置在與 JPEG 相同的目錄中,將 WebP 格式的圖片與其他圖片進行排序非常容易,但這可能不是您想要的位置。

線上圖片轉換器

這些選項實際上有無窮無盡的選擇,具有不同的可用性等級,Convertio 是最受歡迎的軟體之一,無需註冊帳戶即可轉換最大 100MB 的檔案,與我嘗試過的許多轉換器網站不同,它也沒有被侵入性廣告所覆蓋。

如果您不註冊並付款帳戶,則只能進行兩次並發轉換,以這種方式轉換完整 100MB 限制的圖片意味著返回該選項卡並定期按一下「轉換」,直到作業完成。

當將 JPG / PNG 轉換為 WebP 時,Convertio 的一大賣點也減慢了這個過程:能夠將幾乎任何檔案轉換為各種不同的格式。

Convertio Format Selector.png

為每個文件選擇這些很快就會變得乏味,但 Convertio 有兩種方法可以避免此步驟,點擊檔案清單末尾的「全部轉換為」按鈕將開啟與先前相同的模式,但您只需進行一次選擇。

或者,您可以使用 Convertio 的 PNG 到 WEBPJPG 到 WEBP 轉換器,這是完全相同的介面,但所有內容都已預先選擇,如果您願意,您仍然可以隨意更改文件格式。

WebP 和 EWWW 圖片最佳化外掛

EWWW Image Optimizer 是一個 WordPress 外掛,旨在透過最佳化圖片來幫助更快地加載頁面,該外掛程式自 2014 年 8 月起就支援 WebP 圖片。

為了測試使用這個外掛組合提供 WebP 文件,我首先創建了一個包含單個圖片和圖庫的文章。

Webp Image And Gallery Post Cropped 1.png

我在 Firefox 中開啟了 devtools 控制台,並刷新了該網站幾次,同時保持「停用快取」複選框處於啟用狀態,這讓我大致了解了傳輸的總位元組數以及該網站的新訪客加載頁面可能需要多長時間。

在下面的螢幕截圖中,您可以看到這次傳輸的總位元組數為 1.88 MB 中的 1.19 MB,載入時間為 1.54 秒,因此這是我們的基準。

Webp Baseline Set Screenshot 2024update

在 WordPress 管理區域的常用「新增外掛程式」頁面中,我搜尋「ewww」,然後只需點擊「EWWW Image Optimizer」的「立即安裝」按鈕,然後正常啟動它。

Ewww And Ome Installing Plugin.png

設定 EWWW 圖片最佳化器以將 JPEG 轉換為 WebP 圖片格式

然後我進入了 EWWW 設定頁面,該外掛程式可讓您選擇預設目標:加快網站速度或節省儲存空間,我想查看其餘的設置,所以我選擇了我知道我在做什麼,別打擾我 !

Ewww First Screen 1

這將打開另一個螢幕,您可以在其中查看當前的最佳化等級和各種選項的複選框,我對 Enable Ludicrous Mode 有點感興趣,但我選擇暫時保留它,轉而選擇 WebP Conversion,勾選此方塊會出現 WebP 傳遞方法,顯示三個選項:「插入重寫規則」、「JS WebP 重寫」和「圖片 WebP 重寫」,我檢查了 JS WebP 重寫選項,此時您可以排除文件,但我想轉換所有內容,所以我將其留空。

選取 WebP 轉換複選框將確保為支援 WebP 的使用者提供 WebP 圖片,同時繼續為不支援 WebP 的使用者提供 JPEG 和 PNG。

為我們的 WordPress 網站最佳化圖片

此時,上傳的任何新圖片都將轉換為 WebP,轉換先前上傳的圖片需要使用 EWWW 的批次工具,我想轉換範例文章中的圖片,因此我點擊了 EWWW 設定畫面右側的批次轉換器。

Webp Settings After Optimization 1.png

「批次轉換器」頁面的控制項很少,右側的複選框為您提供了強制重新最佳化的選項,這將覆蓋跳過之前最佳化過的圖片,WebP Only 完全跳過壓縮,只是將所有內容轉換為 WebP,我繼續單擊「掃描未最佳化的圖片」,這會掃描媒體庫中的所有內容,以及活動主題和您已配置的任何資料夾,我還選擇了 WebP Only,因為我想看看它可以節省多少空間和頻寬。

Webp Bulk Optimizer Controls 1.png

該外掛發現有 200 張圖片可供最佳化,因此我單擊「最佳化 200 張圖片」並讓它執行其操作,處理圖像檔案只花了幾分鐘,轉換為 WebP 格式可以節省空間,即使文件一開始就非常小,尺寸減小通常在 30% 至 60% 之間。

Webp Ewww Bulk Optimizer Log 1.png

我清除了瀏覽器快取,然後刷新了部落格頁面幾次,以確保最佳化和 WebP 轉換有效,現在,每個圖片都使用附加到其名稱的版本.webp,這些是提供給我的瀏覽器的圖片。

載入時間從原來的 1.54 秒下降到 1.37 秒,但真正節省的是所使用的頻寬,比原來的 1.19 MB 減少了 786 KB,減少了近 33%,好的 ! 請記住,我第一次跳過了這些圖片的壓縮,因此我們可以僅透過 WebP 轉換來查看節省的費用。

我回到 EWWW 設定頁面並再次運行批量轉換器,這次選擇「強制重新最佳化」以確保它會壓縮所有圖片,包括我已經轉換為 WebP 的圖片,這次我還確保未選取「僅 WebP 轉換」,。這一次,我們設法將加載時間降至 1.22 秒,增量節省,但如果您有一個圖片較多的網站,則可能會增加。

設定 WP Offload Media 外掛程式以支援 WebP

現在是時候安裝 WP Offload Media 外掛並將媒體卸載到 S3 以幫助節省伺服器上的更多資源,最終目標是透過 Amazon CloudFront 傳送文件,以便網站訪客盡快取得這些文件。

安裝 WP Offload Media 後,我使用 wp-config.php 檔案中定義的建議AS3CF_SETTINGS常數將其配置為使用我的 AWS 存取金鑰,然後透過 UI 建立一個新儲存桶。

Webp Offload Media Bucket Setup 1.png

然後,我使用 WP Offload Media 的快速入門指南中介紹的流程,使用所有預設設定將現有媒體庫項目卸載到新儲存桶。

Webp Offload Media Bucket Settings 1.png

您會注意到我一開始並沒有設定 CloudFront,我想確保在配置 CDN 之前可以使用預設 URL 卸載到儲存桶。

我再次檢查我們的測試站點,以確保從儲存桶中提供 WebP 檔案。成功 !

EWWW 和 WP 分離媒體庫支援 WebP

事實證明,EWWW Image Optimizer 對 WP Offload Media 的支援是貨真價實的,它實作了 as3cf_attachment_file_paths 過濾器以確保將 WebP 檔案新增至應卸載的檔案清單中,並實作 as3cf_object_meta 過濾器以設定正確的「ContentType」,以便 S3 不會拒絕它們。

查看載入統計數據,傳輸的位元組數大致相同,但載入時間從 1.37 秒猛增至 1.61 秒,我本來預計會發生這種情況,因為 S3 並未針對速度進行最佳化,這就是我們需要 CDN 的原因。

當然,WP Offload Media 可以很好地處理現有的 WebP 格式的圖片,例如您使用 cwebp 或圖片編輯器在本地轉換的任何檔案,在這種情況下,您可以直接將 WebP 檔案上傳到媒體庫,然後將它們放入 S3 儲存桶中。

使用 CDN 提高 WordPress 網站速度

現在我們已經從 S3 儲存桶提供了 WebP 圖片,是時候透過使用 CDN (在本例中為 Amazon CloudFront) 來真正提高速度了, CDN 是提高網站速度最簡單的方法之一,可以輕鬆地從最近的位置提供內容。

根據 WP Offload Media 的 CloudFront 設定將媒體分離到 Amazon S3 指南建立了一個 CloudFront 發行版。

在 WP Offload Media 設定中,我開啟了「自訂網域 (CNAME)」設定並輸入了我想要使用的子網域,我們強烈建議您在此處使用您網站網域的子網域,以實現更好的 SEO。

對該網站的首頁進行了幾次刷新,我開始看到交付速度有了很大的提高。

如預期的那樣,傳輸的總位元組數與我們使用 WebP 時的其他時間大致相同 (786 KB),但載入時間已降至 986 毫秒 !

檢查影像優化器的優點

我還嘗試了 WP Offload Media 的「從伺服器刪除檔案」選項,分離各種較大的媒體庫項目,看看是否可以破壞 EWWW Image Optimizer,EWWImage Optimizer 能夠毫無問題地壓縮原始檔案並產生 WebP 圖片。

EWWW Image Optimizer 與 WP Offload Media 完美整合,這使得卸載媒體和提供 WebP 圖片變得相對容易。

  • 開啟 EWWImage Optimizer 的 WebP 標籤中的所有選項並輸入卸載媒體的基本 URL
  • 大量最佳化您的媒體庫
  • 使用 WP Offload Media 分離您的媒體庫
  • 任務完成 !

EWWW 的影像最佳化服務和 CDN 結合,Easy IO,是我未來需要關注的。除許多其他功能外,它還可以自動建立 WebP 檔案並替換其所提供的圖片。

結論

使用 WebP 似乎有一些實際的好處,因此如果您有一個圖片較多的網站,可能值得研究一下,雖然 WordPress 支援 WebP 圖片,但這不會幫助您轉換媒體庫中已有的圖片, EWWW Image Optimizer 是轉換 JPEG 和 PNG 的絕佳選擇,無需再次下載、轉換和上傳它們。

您是否正在使用 WebP 圖片來加速您的 WordPress 網站,或者您是否處於領先地位並且已經提供了 AVIF 檔案 ?

Please rate Stellar
0 / 5 5 Votes 4

Your page rank:

Your Mastodon Instance