如何在WordPress上使用WebP圖像(並且圖像文件大小最多可縮小35%)

如果您想加快WordPress網站的速度,尋找減小圖像大小的方法可以為您帶來豐厚的投資回報。

#js-mykinsta-video {
背景圖片:url(https://kinsta.com/wp-content/themes/kinsta/images/mykinsta-dashboard-v8@2x.jpg);
}

免費試用

平均而言,圖片約佔網頁文件大小的一半,因此,即使是很小的改進也可以取得很大的效果。

WebP是一種現代的圖像格式,可以幫助您減小圖像的大小而不改變其外觀。平均而言,學習如何將圖像轉換為WebP可以將其尺寸縮小〜25-35%,而不會造成質量損失。

因此,我們將在此博客文章中深入探討該主題!

準備?讓我們開始吧!

什麼是WebP?

那麼……什麼是WebP文件?簡而言之,WebP是Google開發的一種圖像格式。例如,您具有JPEG或JPG和PNG等圖像格式,對嗎? WebP是圖像的另一種文件格式。

WebP致力於提供相同的圖像文件,只是文件尺寸較小。通過減少圖片文件的大小,您仍然可以為網站的訪問者提供相同的體驗,但是網站的載入速度更快。

例如,在Google的WebP壓縮研究中,Google發現一個WebP圖像文件平均…

  • 比同類JPEG圖像小25-34%。
  • 比類似的PNG圖像小26%。

這就是為什麼如果您通過PageSpeed Insights運行站點,許多建議之一就是以WebP之類的下一代格式提供圖像:

Google PageSpeed Insights建議使用WebP圖像

Google PageSpeed Insights建議使用WebP圖像

那麼Google的WebP格式如何實現這些文件大小的減小?

WebP支持有損和無損壓縮,因此確切的減少取決於您使用的是有損還是無損壓縮

通過有損的WebP壓縮,WebP使用一種稱為「預測編碼」的方法來減小文件大小。預測編碼使用圖像中相鄰像素的值來預測值,然後僅對差異進行編碼。它基於VP8關鍵幀編碼。

無損WebP使用WebP團隊開發的一套更為複雜的方法。

如果您想詳細了解WebP壓縮技術,則本文是一個很好的起點。

哪些Web瀏覽器支持WebP?

為了使WebP圖像起作用,訪問者的網路瀏覽器需要對其進行支持。不幸的是,儘管瀏覽器支持已經增長很多,但WebP兼容性仍然不是通用的。

流行的瀏覽器支持WebP圖像,例如:

  • Chrome(台式和移動)。
  • Firefox(台式機和移動版)。
  • 邊緣。
  • Opera(台式機和移動機)。

但是,值得注意的是Safari。在撰寫本文時,Safari的桌面版和移動版均不支持WebP圖像。 Apple在2016年短暫地嘗試了WebP對Safari的支持,但此後沒有再做任何努力。

Internet Explorer也缺少WebP支持(但Edge確實支持WebP,因為它基於Chromium)。

總計,大約77%的Internet用戶使用支持WebP的瀏覽器。因此,儘管肯定有多數支持,但23%的支持太大了,不容忽視(在下面的WordPress WebP教程中,我們將向您展示如何處理此問題,以便所有訪問者都擁有很好的體驗):

WebP Web瀏覽器支持

WebP支持

WebP,JPG,PNG大小比較

根據Google的測試,WebP圖像為:

  • 比同類JPEG圖像小25-34%。
  • 比同類PNG圖片小26%。

如果您想進一步了解Google的方法,可以在下面找到指向完整結果的直接鏈接:

  • JPEG格式
  • PNG

兩項測試均基於超過11,000張圖像,包括:

  • 著名的倫納圖像
  • 來自柯達真彩色圖像套件的24張圖像
  • 來自Tecnick.com的100張圖片
  • 來自Google圖片搜索的11,000多張圖片的隨機樣本

如何在WordPress上使用WebP圖像

由於並非所有瀏覽器都支持WebP圖像,因此您不能像在JPEG和PNG中一樣,僅在媒體庫中上傳WebP圖像文件並直接在WordPress中使用它們。

使用WordPress,我們的流量增長了1,187%。
我們將向您展示如何。
加入20,000多個其他人,他們每周都會收到有關WordPress內部技巧的新聞!

現在訂閱

成功!感謝您的訂閱

您將在一周內收到下一期的Kinsta新聞通訊。

訂閱Kinsta新聞通訊

訂閱

我同意條款和條件以及隱私政策

同樣,有23%的人(包括所有Safari用戶)使用的網路瀏覽器不支持WebP。如果您轉換WebP圖像並直接在您的內容中使用它們,則這些訪問者將無法看到您的圖像,這將破壞他們的瀏覽體驗。

不用擔心,有解決方案!

您可以使用WordPress插件,而不是將WebP圖像直接上傳到WordPress,而是將您的原始圖像轉換為WebP格式,並在訪問者的瀏覽器不支持WebP的情況下提供原始圖像作為備用。

例如,如果您將JPEG文件上傳到您的網站,則該插件將:

  • 將JPEG文件轉換為WebP,並使用WebP版本供訪問者使用Chrome,Firefox等瀏覽。
  • 向使用Safari和其他不支持WebP的瀏覽器瀏覽的訪問者顯示原始JPEG文件。

這樣,每個人都可以看到您的圖像,並且每個人都可以獲得最快的體驗。

下面,我們將介紹一些最佳的WebP WordPress插件,所有這些插件都可與Kinsta和Kinsta CDN一起使用。

信息

如果您在Kinsta託管,則需要獲得我們的支持,以便我們可以為其中一些插件的WebP緩存桶創建Nginx規則。

短像素

ShortPixel WordPress插件

ShortPixel WordPress插件

ShortPixel是一個流行的WordPress圖像優化插件,可以幫助您自動調整大小並壓縮上傳到WordPress網站的圖像。

作為其功能列表的一部分,ShortPixel還可以幫助您自動將圖像轉換為WebP並將這些圖像提供給支持WebP的瀏覽器。

ShortPixel有一個有限的免費計劃,可讓您每月免費優化約100張圖像。在那之後,付費計劃的起價為每月4.99美元(最多5,000張圖片/學分),或一次9.99美元(一包10,000學分)。

ShortPixel會將您優化過的每個WordPress圖像尺寸計算在內。因此,如果您要優化多個圖像縮略圖的大小,則可以想像一張圖像可以使用多個字幕。圖像沒有文件大小限制。

您可以在不受限制的網站上分配您的ShortPixel積分-沒有針對每個站點的限制(您的所有網站都可以使用相同的ShortPixel帳戶)。

要使用ShortPixel在WordPress上提供WebP圖像,您需要從WordPress.org安裝插件並添加您的API密鑰(您可以通過註冊免費的ShortPixel帳戶獲得)。

在「常規」選項卡中,您可以設置圖像優化工作方式的基本設置。例如,使用哪種壓縮級別以及是否調整圖像大小:

如何在ShortPixel中設置壓縮級別和圖像尺寸

如何在ShortPixel中設置壓縮級別和圖像尺寸

要啟用WebP圖像,請轉到「高級」選項卡,然後:

  1. 選中「 WebP圖像」框
  2. 選中提供WebP版本的框。(選中第一個框後出現)
  3. 選擇單選按鈕以使用 標記語法(在選中上一個框後顯示)
  4. 保留默認的「僅通過WordPress掛鉤」選擇

如何在ShortPixel中啟用WordPress WebP圖像

如何在ShortPixel中啟用WordPress WebP圖像

然後,保存您的更改。

如果您在Kinsta託管,ShortPixel將為您提供有關在Nginx上配置伺服器配置文件的警告消息。要配置這些設置,您可以聯繫Kinsta支持,我們很樂意為您設置伺服器配置。

想像一下

想像一下WordPress插件

想像一下WordPress插件

Imagify是與WP Rocket相同的開發人員開發的流行圖像優化插件(這是與Kinsta配合使用的少數緩存插件之一)。

它可以自動壓縮和調整您上傳到WordPress網站的圖像的大小。然後,它還可以幫助您將它們轉換為WebP,並通過支持WebP的瀏覽器將WebP版本提供給訪問者。

在功能方面,ShortPixel和Imagify具有許多相似之處。當您查看價格時,最大的不同是。 ShortPixel會根據圖像對您收費,每張圖像沒有大小限制,而Imagify會根據文件總大小而收費,沒有圖像限制。

因此,如果您需要優化大量大圖像,ShortPixel的方法可能會更便宜。但是,如果您需要優化許多小圖像,那麼Imagify的方法可能會更便宜。

Imagify的免費套餐有限,每月可以進行25 MB的優化。之後,付費計劃的起始費用為每月4.99美元(最多1 GB)或9.99美元(一次性的1 GB信用)。

與ShortPixel一樣,您可以將帳戶限制分散到無限的網站上。

厭倦了您的WordPress網站的緩慢主機?我們提供WordPress專家提供的快速伺服器和24/7世界一流的支持。查看我們的計劃

要使用Imagify交付WordPress WebP圖像,您需要從WordPress.org安裝插件並添加API密鑰以開始使用。

激活插件後,您可以使用「常規設置」框選擇壓縮級別。

如何在Imagify中設置壓縮級別

如何在Imagify中設置壓縮級別

要啟用WebP圖像,請向下滾動到「優化」部分,然後找到「 WebP格式」部分:

  1. 選中創建圖像的WebP版本的框
  2. 選中以Webp格式顯示圖像的框…
  3. 選擇單選按鈕以使用 標籤
  4. 如果您是在Kinsta託管並使用Kinsta CDN,請在「如果使用CDN」框中輸入Kinsta CDN的網址(我們將在下面告訴您如何找到Kinsta CDN網址)

如何在Imagify中啟用WordPress WebP圖像

如何在Imagify中啟用WordPress WebP圖像

如果您使用的是Kinsta CDN,則可以通過在MyKinsta儀錶板中打開網站並訪問網站設置的Kinsta CDN標籤來找到您的CDN URL:

如何找到Kinsta CDN URL

如何找到Kinsta CDN URL

與ShortPixel一樣,如果您在Kinsta託管,則需要為WebP緩存存儲區創建Nginx規則(只需聯繫Kinsta支持)。

擎天柱

Optimole WordPress插件

Optimole WordPress插件

Optimole是一個WordPress圖像優化插件,其操作與Imagify和ShortPixel略有不同。 Optimole可以自動壓縮圖像並調整其大小。但是,它還具有其他兩個顯著功能:

  1. 它可以通過自己的CDN(由Amazon CloudFront支持)來提供圖像。
  2. 它提供實時的自適應圖像,Optimole將為每個訪客提供最佳尺寸的圖像。例如,與在Retina屏幕上瀏覽的人相比,在小屏幕上瀏覽的人將獲得較低解析度的圖像。

這種方法類似於其他實時優化/操縱服務,例如Cloudinary,imgix,KeyCDN圖像處理等。

作為實時圖像優化的一部分,Optimole還可以使用支持WebP的瀏覽器向訪問者提供WebP圖像。

Optimole有一個有限的免費計劃,該計劃每月可以處理大約5,000個訪問者的圖像。之後,付費計劃的起價為每月19美元,可容納約25,000名訪客。

首先,您需要從WordPress.org安裝該插件,並使用API​​密鑰(可以通過註冊免費的Optimole帳戶獲得)來激活它。

完成此操作後,Optimole將開始自動優化圖像並通過其CDN交付圖像。默認情況下,WebP支持處於啟用狀態,因此無需手動啟用它。

要配置其他設置,例如壓縮級別和縮放行為,可以轉到媒體→Optimole→設置:

Optimole設置區域-默認情況下啟用WordPress WebP圖像

Optimole設置區域–默認情況下啟用WordPress WebP圖像

由於Optimole可以通過自己的CDN傳送圖像,因此,如果您在Kinsta託管,則無需設置任何Nginx規則。

提高⬆️網站速度,同時減小⬇️圖像大小。了解如何在#WordPress網站上利用WebP格式?

點擊鳴叫

摘要

WordPress網站的圖片在平均頁面的文件大小中占很大一部分。如果您找到減小圖像大小的方法,則可以在不改變訪問者體驗的情況下加快網站速度。

WebP是一種現代圖像格式,與比較的JPEG或PNG文件相比,可以將文件大小減少約25%。

大多數現代瀏覽器都支持WebP,大約77%的Internet用戶使用的瀏覽器支持WebP。但是,某些瀏覽器(尤其是Safari)仍然不提供WebP支持,因此您不能向所有訪問者提供WebP圖像。

為解決此問題,您可以使用WordPress插件,將圖像轉換為WebP並向瀏覽器支持此格式的訪問者提供WebP版本,而將原始圖像用於其瀏覽器不支持此格式的訪問者。

可以幫助您完成此操作的三個插件是:

  • ShortPixel。
  • 想像一下
  • Optimole。

有關優化圖像的更多策略,請查看我們的完整指南,以優化圖像以提高網路性能。

您對在WordPress上使用WebP有任何疑問嗎?在評論中詢問我們。

如果您喜歡這篇文章,那麼您會喜歡Kinsta的WordPress託管平台。加速您的網站,並從我們經驗豐富的WordPress團隊獲得24/7支持。我們基於Google Cloud的基礎架構專註於自動擴展,性能和安全性。讓我們向您展示Kinsta的與眾不同!查看我們的計劃

相關文章