如何使用 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 站點的縮放問題。

在我們嘗試過的 WebP 服務中,我們最喜歡的是 Optimole。 我們非常幸運地通過最少的調整使其工作,因此我們想向您介紹如何設置它並使您的 WordPress 安裝 WebP 盡可能輕鬆地兼容。
首先,很明顯,您需要下載並安裝插件本身。 它位於 WP.org 存儲庫中,並且完全免費。 支持它的基於 API 的服務也是如此(在一定程度上)。 雖然可以使用 PHP 將傳統圖像即時轉換為 WebP,但並非每個虛擬主機都向您的服務器授予該權限。 如果您確實擁有該權限,還可以查看WebP Express插件。 您可以通過它獲得很多控制權,但需要進行更多調整才能順利工作。
在 WordPress 網站上安裝並激活 Optimole 後,您將在Media – Optimole 上找到一個新的菜單選項。
您的 Optimole API 密鑰

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

Optimole 將訪問定義為“任何訪問過您網站一次 [. . .] 每個用戶只計算一次。 他們在您的網站上做什麼、下載了多少圖片或訪問了多少頁面都無關緊要; 這只是一個用戶。 如果他們離開您的網站並在同一天返回,他們仍然只是一個用戶。 ”
一旦用完測量的訪問量,就停止提供 WebP 圖像。 您的圖像本身沒有。 您將在最頂部的 Optimole 儀表板中找到 API 密鑰。

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


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

首先,您會看到附加到 API 的帳戶,並且在屏幕底部,該插件會顯示最近優化的圖像。 您可以看到所提供的 WebP 圖像比您上傳到 WordPress 的原始圖像小了多少。
然後是最頂部的“可能的問題”選項卡。 沒有人喜歡看到突出顯示的選項卡,但我們也都需要了解可能會出現哪些衝突。

我們面臨的主要問題是其他圖像壓縮和交付插件。 正如您在上圖中所看到的,Jetpack 插件通過 Photon APIT 以類似於 Optimole 的方式工作,因此它們可以撞頭。 對我們來說,這表現為根本沒有圖像傳遞給訪問者。 我們在使用 TinyPNG 或 Smush 等其他壓縮服務時沒有遇到任何問題。
使用儀表板
如果您想了解有關您的網站如何使用 WebP 的更多詳細信息,外部 Optimole 儀表板會為您提供該信息。

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

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

您基本上可以從兩個儀表板執行相同的操作。 在 WordPress 的“設置”選項卡下,或通過訪問 Optimole 的外部儀表板。 這完全取決於您最喜歡什麼,以及您在任何給定時間需要什麼級別的數據。
此外,您將能夠根據文件名控制壓縮級別、延遲加載以及何時/是否將某些圖像用作 WebP。 您可以在Media – Optimole的Settings選項卡下找到所有這些。

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