如何在WordPress中使用WebP圖像(3種方法)


您是否要在WordPress中使用WebP圖像?

WebP圖像是一種現代的圖像格式,可通過減小文件大小來提供更好的圖像壓縮。 這使您的網站加載速度更快,並節省了帶寬。

在本文中,我們將向您展示如何輕鬆地在WordPress中使用WebP圖像。

在WordPress中添加WebP圖像

什麼是WebP?為什麼在WordPress中使用WebP圖像?

WebP是要在網絡上使用的圖像的新文件格式。 通過使用WebP圖像格式,您的圖像文件大小將比PNG和JPEG小25-34%,而不會降低質量。

如果圖像使您的網站變慢,則將其轉換為WebP格式可以提高頁面加載速度的測試成績。

要了解有關圖像壓縮的更多信息,請參見有關如何優化網絡圖像的指南。

由於WebP是一種新的文件格式,因此並非所有瀏覽器都支持它。 但是,大多數現代瀏覽器(例如​​Google Chrome,Firefox和Microsoft Edge)都支持WebP圖像。

您是否應該在WordPress中使用WebP圖像?

WebP圖像可以幫助您加快WordPress網站的速度。 這是推薦的最佳實踐,可與WordPress緩存插件,CDN等一起使用。

默認情況下,WordPress不支持WebP圖像,並且上載WebP圖像將顯示錯誤。

WordPress中的WebP圖片上傳錯誤

要解決此問題,您將需要使用圖像壓縮插件將圖像轉換為WebP圖像格式。 您仍將以WordPress支持的文件格式(例如PNG,JPEG和GIF)上傳圖像,以便將它們用作備份。

如果您的站點使用大量圖像,並且它們在減慢WordPress博客的速度,那麼您絕對應該考慮使用WebP圖像。

這是在WordPress中使用WebP圖像的方法。 我們將向您展示多種方法,因此您可以選擇一種最適合您的方法:

方法1.在EWWW Optimizer中使用WordPress中的WebP圖像

EWWW Image Optimizer插件是最好的WordPress圖像壓縮插件之一,可讓您優化WordPress圖像。 它還支持WebP圖像,並可以在支持的瀏覽器上自動顯示它們。

您需要做的第一件事是安裝並激活EWWW Image Optimizer插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,轉到 設置»EWWW圖像優化器 頁面以配置插件選項。 安裝嚮導會打招呼,但是您可以單擊“我知道我在做什麼”鏈接以退出嚮導。

EWWW嚮導

在下一個屏幕上,您將看到很多插件選項。 向下滾動並選中“ WebP轉換”選項旁邊的框。

EWWW中的WebP轉換

之後,單擊“保存更改”按鈕以存儲您的設置。

接下來,您需要向下滾動到“ WebP轉換”部分。 現在,該插件將為您顯示一些帶有紅色預覽圖像的重寫規則。

您需要單擊“插入重寫規則”按鈕,插件將自動嘗試將這些重​​寫規則插入您的.htaccess文件。

插入重寫規則

如果插件成功添加了這些規則,則紅色圖像預覽將變為帶有“ WebP”文本的綠色。

WebP傳遞方法成功

有時,插件可能無法插入規則。 在這種情況下,您需要從插件的設置頁面複製重寫規則,然後將其手動粘貼到.htaccess文件的底部。

完成後,返回到插件的設置頁面,然後再次單擊“保存更改”按鈕。 如果預覽圖像變為綠色,則表示您已成功在WordPress網站上啟用WebP圖像傳遞。

或者,您可以選擇JS WebP Rewriting或 WebP重寫方法作為您的WebP交付選項。 這些方法比.htaccess方法要慢一些,但可以完成工作。

批量將舊圖像轉換為WebP版本

EWWW圖像優化器使您可以輕鬆地將以前上傳的圖像文件轉換為WebP圖像。 只需轉到 媒體»圖書館 頁面並切換到列表視圖。

在媒體中選擇文件

接下來,您需要單擊“屏幕選項”按鈕,並將“每頁的項目數”更改為999。如果您有1000幅以上的圖像,則這些圖像將顯示在下一頁上。

這樣,您將能夠快速選擇大量圖像以進行批量優化。 接下來,單擊頂部的全選複選框以選擇所有圖像。

批量優化

之後,點擊批量操作下拉菜單,然後選擇批量優化選項。 最後,單擊“應用”按鈕。

在下一個屏幕上,該插件將為您提供一個選項,可以跳過圖像壓縮,僅將其轉換為WebP。 如果您的圖像已經優化,則可以選中此選項。

運行優化

之後,單擊“掃描未優化的圖像”按鈕繼續。 然後,該插件將向您顯示找到的圖像數量,因此您可以單擊“優化”按鈕繼續。

現在將優化您的圖像,並且EWWW優化器將為您的圖像生成WebP版本。

WebP圖像轉換完成

測試您的WebP圖像傳遞

優化圖像後,您可以轉到包含多個圖像的博客文章或頁面。 將鼠標移到任何圖像上,然後單擊鼠標右鍵以在新選項卡中打開圖像。

檢查圖像

這將在新的瀏覽器選項卡中打開圖像,您將能夠在地址欄中看到其擴展名為.webp。

驗證是否提供了WebP圖像

如果插件無法提供webp圖像,則可以返回到插件的設置頁面。 在這裡,您可以將WebP交付選項更改為“ JS WebP Rewriting”或“ WebP重寫”方法。

方法2:通過Imagify在WordPress中使用WebP圖像

Imagify是WordPress圖像優化插件,由WP Rocket(最好的WordPress緩存插件)背後的人們創建。 它使您可以輕鬆優化圖像並將其轉換為WebP圖像格式。

您需要做的第一件事是安裝並激活Imagify插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活後,您需要訪問 設置»想像 頁面以配置插件設置。 從這裡。 點擊“創建免費的API密鑰”按鈕繼續。

創建Imagify API密鑰

之後,系統會要求您輸入公司的電子郵件地址,然後您可以在收件箱中查看包含API密鑰的電子郵件。 將密鑰複製並粘貼到插件的設置頁面上,然後單擊“保存更改”按鈕。

接下來,您需要向下滾動到“優化”部分。 在那裡,您需要檢查“創建webp版本的圖像”和“在站點上以webp格式顯示圖像”選項旁邊的選項。

想像WebP設置

在此之下,您可以從兩種交付方式中選擇一種,以在WordPress中顯示WebP圖像。 第一個是.htaccess方法,第二個是通過使用 標籤。

.htaccess方法更快,但是如果您使用CDN服務,則該方法不起作用。 標記方法也可用於CDN,但它可能會破壞某些WordPress主題。

您可以選擇一種最適合您的網站的方式。 之後,點擊底部的“保存並轉到批量優化器”按鈕。

保存設置並啟動圖像優化器

這將帶您到 媒體»批量優化 頁。 該插件將在後台自動開始優化您的所有WordPress圖像。

優化狀態

如果您有很多圖像,則可能要花一些時間。 不用擔心,您可以關閉頁面並稍後再返回頁面,因為關閉頁面不會停止圖像優化過程。

在WordPress中測試您的WebP圖像

優化完成後,您可以訪問包含一些圖像的頁面或帖子。 將鼠標移到圖像上,然後右鍵單擊以選擇“在新選項卡中打開圖像”。

檢查圖像

這將在新的瀏覽器選項卡中打開圖像,並且您將能夠在地址欄中看到.webp擴展名。

驗證是否提供了WebP圖像

方法3。在帶有SG Optimizer的WordPress中使用WebP圖像

如果您是SiteGround用戶,則建議使用此方法。

SiteGround是最好的WordPress託管公司之一。 他們為用戶提供了免費的SG Optimizer插件,可讓您優化WordPress性能。 它還包括優化WordPress圖像的選項。

首先,您需要安裝並激活SG Optimizer插件。

激活後,該插件會將新菜單項添加到標有“ SG Optimizer”的管理側邊欄中。 單擊它會帶您到插件的設置頁面。

SG優化器設置

如果要使用SiteGround的內置緩存系統,則可以從此處打開緩存設置。

之後,您可以切換到“媒體優化”選項卡,然後打開“生成新圖像的WebP副本”選項。

在SG Optimizer中啟用WebP圖像

在其下,您將看到“批量生成WebP文件”選項。 單擊它將開始為WordPress媒體庫中的所有圖像文件生成WebP副本。

批量生成WebP圖像

完成後,您的WordPress網站將開始提供WebP圖像。

在SG Optimizer中測試WebP圖像

要查看您的網站是否正在提供WebP圖像,您需要在網站上打開一個包含一些圖像的頁面。

之後,右鍵單擊並選擇檢查工具。 這將打開開發者控制台,您需要在其中切換到“網絡”選項卡。

在開發人員工具中查看WebP圖像

在此處,單擊“ img”選項卡,然後重新加載頁面(在Windows上為CTRL + R,在Mac上為Command + R)。 當您的網站重新加載時,您將看到在開發人員控制台中加載的所有圖像。

我們希望本文能幫助您學習如何在WordPress中使用WebP圖像。 您可能還想查看有關如何創建電子郵件時事通訊的指南,以及我們為您的網站提供的最佳商務電話服務的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在以下位置找到我們 推特 和Facebook。