WebP 圖片在 WordPress 中的工作原理

我們已經不止一次提到我們網站的加載速度是在搜索引擎中很好地定位它的關鍵因素。 儘管您可能不需要在 Google Speed 上達到頂峰，但任何與圖像優化相關的努力對於改進 SEO 都特別重要。

WordPress 社區很清楚這一點，因此，在最新的 5.8 版本中，它添加了支持 WebP 圖像格式的功能。

什麼是 WebP 圖像

WebP 是 Google 於 2010 年開發的一種圖像格式，可替代 PNG 和 JPG 等格式，生成更小的文件大小，同時保持相似的圖像質量。 與其他格式不同，WebP 支持有損和無損壓縮，以及透明度和動畫。

即使具有這些功能，WebP 始終提供比其替代方案更小的文件大小。 在 Google 對這些圖像格式的比較研究中，發現 WebP 有損圖像平均比 JPG 小 30%，比 PNG 小 25%。

此外，Google PageSpeed Insights 是您網站優化水平的評估者，建議您使用現代圖像格式作為提高網站加載速度的機會之一。

在考慮是否應該在 WebP 中包含所有圖像時，您可能會遇到的問題之一是當前對不同瀏覽器的支持。 您最不想看到的就是您的讀者無法正確查看圖像。

現實情況是，他們每個人的支持都在增加。 目前，我們已經在談論 95% 的支持。

如何將圖像轉換為 WebP

顯然，要將 WebP 圖像上傳到庫中，我們必須擁有的第一件事就是所述格式的圖像。 如果您從圖像庫下載圖像，您肯定會以 JPEG 或 PNG 格式下載它。 因此，您的首要任務是將圖像轉換為該格式。 我們有什麼選擇？

圖像設計工具

一些圖像設計工具，例如 Sketch、Adobe Photoshop 或 Cloudinary 等，包括以 WebP 格式保存任何圖像的選項。 它就像打開要轉換的圖像然後以新格式保存一樣簡單。

但是，如果這不是您的情況，請不要擔心，因為您有免費的替代品，我們將在下面看到。

官方谷歌工具

另一種選擇是下載cwebp ，這是一個用於 Linux、Widows 或 Mac 的工具，用於將任何 PNG 或 JPG 圖像轉換為 WebP。 下載並安裝後，您可以直接執行指令轉換計算機上的任何圖像。 因此，例如，您可以使用以下命令將 PNG 圖像文件轉換為質量範圍為 80 的 WebP 圖像：

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

如果您需要同時轉換大量圖像，本文解釋說明，在類 Unix 環境（如 macOS 或 Ubuntu）中，以便您可以轉換大量圖像。

在同一篇文章中，他們還告訴您使用 imagin-webp 工具使用 Node.js 對轉換進行編程的替代方案。

在線轉換器

如果您不想編寫單行代碼，另一種選擇是使用在線圖像轉換器。 谷歌搜索很容易找到一長串轉換器，包括以下內容：

• 埃茲吉夫·韋普
• 雲轉換
• 轉換
• 在線轉換
• 自由轉換

在所有這些中，您只需要上傳圖像，執行轉換並下載轉換後的文件。

WordPress 插件

最後，正如我將在下面解釋的那樣，當您將圖像上傳到您的 WordPress 網站時，您會看到還有一些插件可以將圖像轉換為 WebP 格式。

如何將 WebP 圖像上傳到媒體庫

一旦我們有了這種格式的圖像，您應該可以像往常一樣將它上傳到您的 WordPress 媒體庫，但是……

糟糕，它不起作用！ 至少，它不適合我。 根據您當前使用的託管服務提供商，您可能會面臨同樣的問題。

出於安全原因，WordPress 對您可以上傳到站點的 MIME 文件類型有內置限制。 MIME 代表多用途 Internet 郵件擴展。 瀏覽器和其他 Internet 設備使用 MIME 類型來確定與頁面關聯的內容類型。 例如，如果您在頁面上有一個 .png 文件和一個 .jpeg 文件，瀏覽器將從它們的 MIME 類型（而不是它們的文件擴展名）知道它應該將這兩個文件視為圖像，而不是視頻或其他文件類型。

默認情況下，WordPress 在wp-includes/functions.php中存儲已註冊的 MIME 類型列表。 但是，並非所有可識別的 MIME 類型都可以上傳。

如果您嘗試上傳具有此預定義列表之外的擴展名的文件，就像 WebP 一樣，您將看到上述錯誤消息。

在您的託管公司的文檔中，您會發現幾個替代方法來修改如何允許您上傳這種新的 MIME 類型。 這通常是通過使用插件來添加額外的文件類型或直接修改文件，或者使用您自己的插件和以下代碼：

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

或者，修改wp-config.php文件，添加以下代碼行：

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

進行必要的修改後，您應該能夠上傳您的圖像。 下一次嘗試……

好吧，看來這也不可能了……

在這種情況下，正如 WordPress 論壇中所討論的，對於某些解決方案，確保已安裝 imagick 庫並重新啟動服務器。 對於其他人（如我的情況），加載圖像的唯一方法是使用您在加載圖像面板底部找到的瀏覽器上傳器鏈接。

瞧，我上傳了我的 WebP 圖像！

將圖像轉換為 WebP 的 WordPress 插件

我已經告訴過您以這種 WebP 格式保存圖像的空間和負載節省。 當我們考慮如何轉換我們已經上傳到服務器上的所有圖像時，問題就出現了。 好消息是，在 WordPress 中大多數時候，我們有幾個插件可以完成這項工作。

不僅如此，其中一些在將任何圖像上傳到您的庫之前，可以強制將圖像轉換為 WebP，而無需您擔心。 一些最著名的是：

• EWWW 圖像優化器
• WebP快遞
• 短像素
• 想像一下
• 優品
• 用於媒體的 WebPC 轉換器

最後，我想指出，主要的 WordPress 託管公司非常清楚在您的網站上優化圖像的重要性。 出於這個原因，他們中的一些人已經在他們的服務器中提供了自己的插件，這些插件負責自動生成您上傳到庫的圖像到 WebP，以便始終將它們提供給支持它們的瀏覽器。 例如，Siteground 的 SG Optimizer 插件就是這種情況。

結論

WebP 快速、高效，並且獲得了很大的動力。 我們肯定比我們想像的更接近它在 WordPress 和瀏覽器中的大規模採用。 我們很高興 WordPress 沒有落伍，我們都可以通過支持 WebP 圖像格式來優化我們網站的 SEO。

Unsplash 上的碼頭特色圖片。