WordPress 5.8 增加了 WebP 圖像格式支持

WebP是一種現代圖像格式,可為網絡上的圖像提供改進的無損和有損壓縮。WebP 圖像比其 JPEG 或 PNG 等效圖像平均小 30% 左右,從而使網站速度更快,使用的帶寬更少。根據 caniuse,所有現代瀏覽器都支持 WebP 圖像格式 。

根據 caniuse,所有現代瀏覽器都支持 WebP 

從 WordPress 5.8 版開始,您可以像今天使用 JPEG 或 PNG 圖像一樣在 WordPress 中上傳和使用 WebP 圖像(只要您的託管服務支持 WebP)。將圖像切換為 WebP 格式將提高您網站的性能和網站訪問者的體驗。

WebP 如何幫助您

WebP 圖像明顯小於其 JPEG 等效圖像,因此您網站的訪問者會更快地看到完整頁面的加載。較小的圖像需要較少的帶寬來傳輸,並且srcset默認情況下您的圖像仍然可以獲得延遲加載的所有響應優勢。最後,所有主要瀏覽器都支持 WebP,因此大多數網站今天就可以開始使用它們。

創建 WebP 圖像

圖像編輯工具支持在 WebP 中導出,或者您也可以使用命令行轉換工具或基於 Web 的工具,例如Squoosh。將圖像保存為 WebP 後,將它們上傳到 WordPress 並像使用任何其他圖像一樣使用它們。

使用 WebP 圖像

WebP 圖像與 WordPress 中的任何其他圖像一樣工作,但有一些小警告。

WebP 圖像支持有損和無損壓縮,以及動畫格式並支持透明圖像。在 WordPress 中,只有在託管服務器使用 Imagick 時才支持無損 WebP格式,直到 LibGD添加支持。此外,調整大小的圖像尚不支持動畫和 Alpha 格式(以這些格式上傳時會創建有損圖像)。

媒體庫中的 WebP 支持要求您的 Web 服務器的圖像處理庫(WordPress 支持 Imagick 和 LibGD)支持 WebP 格式。幸運的是,這些庫支持 WebP 已經有一段時間了,因此支持是廣泛可用的。如果您的網絡服務器不支持 WebP,您將在嘗試上傳 WebP 圖像時看到錯誤消息。

如果您的受眾包括大量使用不受支持的瀏覽器(例如 IE11)的用戶,請避免使用 WebP 圖像,或將瀏覽器 polyfill 加入隊列

對未來的計劃

媒體組件團隊還在探索讓 WordPress 對上傳的圖像執行圖像格式轉換的選項——使用 WebP 作為小尺寸圖像的默認輸出格式。您可以跟蹤TRAC工單進度和測試的這項功能。我們還密切關注更現代的格式,如 AVIF 和 JPEGXL,它們將提高壓縮率並進一步減少壓縮所需的資源。

常問問題

如何微調用於 WebP 圖像的壓縮質量設置?

開發人員或插件可以使用wp_editor_set_quality 過濾器來設置質量設置。傳遞的 MIME 類型啟用按類型設置,例如:

// Use a quality setting of 75 for WebP images.
function filter_webp_quality( $quality, $mime_type ) {
if ( 'image/webp' === $mime_type ) {
return 75;
}
return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_webp_quality', 10, 2 );

如果我啟用過濾器以使用 WebP 子尺寸,但上傳 JPEG,會發生什麼情況?子尺寸是否必須與原始尺寸相匹配?

默認情況下,WordPres 創建與上傳文件相同類型的小尺寸圖像,因此上傳 WebP 文件以在您的站點上獲取 WebP 文件。如果您想嘗試上傳 JPEG 並讓 WordPress 為您的小尺寸圖像自動將這些轉換為 WebP,請查看此插件(相關的跟蹤票)。

如果我使用 WordPress 多站點模式,我的所有網站都可以使用 WebP 圖片嗎?

否。多站點存儲用戶在創建站點時允許上傳的文件類型。我們正在努力改進#53167。同時,為了確保網絡上所有現有站點都允許 WebP 文件,您可以使用網絡 mu-插件中的site_option過濾器為所有網絡站點添加webp為允許的文件類型:

// Ensure all network sites include WebP support.
add_filter(
'site_option_upload_filetypes',
function ( $filetypes ) {
$filetypes = explode( ' ', $filetypes );
if ( ! in_array( 'webp', $filetypes, true ) ) {
$filetypes[] = 'webp';
$filetypes = implode( ' ', $filetypes );
}
return $filetypes;
}
);

發表評論

郵箱地址不會被公開。 必填項已用*標註