如何使用 WordPress 提供 WebP 圖片而不是 JPG 或 PNG

已發表: 2019-11-20

谷歌位於互聯網食物鏈的頂端。 公司影響(或支配)很多在線發生的事情。 他們的新圖像格式 WebP 延續了這一趨勢。 隨著頁面加載速度變得越來越重要(主要是因為 Google Page Rank),開發人員和設計師將圖像壓縮視為減少加載時間的最簡單方法。 Google 的 WebP 圖像比典型的 JPG 或 PNG 圖像小約 30%,並保持相同的質量。 最重要的是,您不必擔心手動將圖像轉換為 WebP。

在本文中,我們將向您展示如何在 WordPress 中使用這種新的圖像格式,儘管默認情況下尚不支持它。

讓我們開始吧。

訂閱我們的 YouTube 頻道

使用 Optimole 在 WordPress 上提供 WebP

WordPress 默認不支持 WebP 作為圖像格式。 您可以上傳 .webp 圖像,但與 SVG 文件非常相似,您會發現自己收到錯誤消息。 再一次,就像在 WordPress 中使用 SVG 文件一樣,通過插件可以輕鬆解決您的 WP 站點的縮放問題。

在 WordPress 中使用 WebP 圖像

在我們嘗試過的 WebP 服務中,我們最喜歡的是 Optimole。 我們非常幸運地通過最少的調整使其工作,因此我們想向您介紹如何設置它並使您的 WordPress 安裝 WebP 盡可能輕鬆地兼容。

首先,很明顯,您需要下載並安裝插件本身。 它位於 WP.org 存儲庫中,並且完全免費。 支持它的基於 API 的服務也是如此(在一定程度上)。 雖然可以使用 PHP 將傳統圖像即時轉換為 WebP,但並非每個虛擬主機都向您的服務器授予該權限。 如果您確實擁有該權限,還可以查看WebP Express插件。 您可以通過它獲得很多控制權,但需要進行更多調整才能順利工作。

在 WordPress 網站上安裝並激活 Optimole 後,您將在Media – Optimole 上找到一個新的菜單選項。

您的 Optimole API 密鑰

在 WordPress 中使用 WebP 圖像

在您可以訪問任何設置或配置之前,您需要擁有一個 Optimole 帳戶。 如果您已經設置了一個,您可以單擊I Already Have an API Key按鈕。 如果沒有,請註冊並通過電子郵件發送 API 密鑰。 API 密鑰的基本帳戶是免費的,您可以在該層獲得大約 5,000 次訪問。 如果您需要更多,可以使用定價層。

在 WordPress 中使用 WebP 圖像

Optimole 將訪問定義為“任何訪問過您網站一次 [. . .] 每個用戶只計算一次。 他們在您的網站上做什麼、下載了多少圖片或訪問了多少頁面都無關緊要; 這只是一個用戶。 如果他們離開您的網站並在同一天返回,他們仍然只是一個用戶。

一旦用完測量的訪問量,就停止提供 WebP 圖像。 您的圖像本身沒有。 您將在最頂部的 Optimole 儀表板中找到 API 密鑰。

在 WordPress 中使用 WebP 圖像

只需將其粘貼回您的 WordPress 儀表板,您就可以開始使用 WordPress 提供 WebP 圖像了。

在 WordPress 中使用 WebP 圖像

您的 Optimole WordPress 儀表板

在您的 WordPress 儀表板中,您可以獲得有關 WebP 優化的一些基本信息。 這讓您可以排除故障並衡量加速實際的成功程度。 這樣你就可以進入並調整各種設置。

在 WordPress 中使用 WebP 圖像

首先,您會看到附加到 API 的帳戶,並且在屏幕底部,該插件會顯示最近優化的圖像。 您可以看到所提供的 WebP 圖像比您上傳到 WordPress 的原始圖像小了多少。

然後是最頂部的“可能的問題”選項卡。 沒有人喜歡看到突出顯示的選項卡,但我們也都需要了解可能會出現哪些衝突。

在 WordPress 中使用 WebP 圖像

我們面臨的主要問題是其他圖像壓縮和交付插件。 正如您在上圖中所看到的,Jetpack 插件通過 Photon APIT 以類似於 Optimole 的方式工作,因此它們可以撞頭。 對我們來說,這表現為根本沒有圖像傳遞給訪問者。 我們在使用 TinyPNG 或 Smush 等其他壓縮服務時沒有遇到任何問題。

使用儀表板

如果您想了解有關您的網站如何使用 WebP 的更多詳細信息,外部 Optimole 儀表板會為您提供該信息。

在 WordPress 中使用 WebP 圖像

您可以查看已提供的實際文件大小,而不是簡單地縮小 9.5 倍。 以及在 30 天內哪些文件本身。

在 WordPress 中使用 WebP 圖像

您還可以在 Optimole(或 WP)儀表板中設置水印,這樣當有人從您的 WordPress 站點獲得 WebP 時,他們會自動顯示您的徽標。 這是一個簡單的過程,您可以控制不透明度、位置等。

在 WordPress 中使用 WebP 圖像

您基本上可以從兩個儀表板執行相同的操作。 在 WordPress 的“設置”選項卡下,或通過訪問 Optimole 的外部儀表板。 這完全取決於您最喜歡什麼,以及您在任何給定時間需要什麼級別的數據。

此外,您將能夠根據文件名控制壓縮級別、延遲加載以及何時/是否將某些圖像用作 WebP。 您可以在Media – OptimoleSettings選項卡下找到所有這些。

在 WordPress 中使用 WebP 圖像

包起來

將 WebP 與 WordPress 網站一起使用的最佳部分是您不必手動處理文件。 沒有額外的上傳,沒有額外的壓縮時間,什麼都沒有。 由於 API 的工作方式,所有計算和過程都是實時運行的。 Google 確實通過使用 WebP 而不是 JPG 或 PNG 使互聯網運行得更快。 不過,最大的好處是即使圖像尺寸顯著縮小,圖像也能保持相同的質量。 讓您使用他們的格式來加速您的網站,以便他們可以為您排名更高,最終用戶體驗也更好,這對 Google 來說可能是自私的。 這才是最重要的。

您如何看待為您的網站訪問者提供 WebP 圖像?

文章特色圖片由 vladwel / shutterstock.com 提供