WebP 圖片和 WordPress:為什麼以及如何使用它們

已發表: 2021-11-25

WebP 圖像和 WordPress

如果您希望加快 WordPress 網站的速度,那麼最好使用 WebP 圖像格式。 為什麼您的網站內容加載緩慢的主要問題都是因為您網站上的大照片。

但是,圖像壓縮器可能會強制您的用戶加載圖像文件的兆字節,並延遲抓取他們的連接。 除此之外,由於壓縮器,您網站的圖像可能會變得模糊。

但甚至有一些文件格式可以將圖像壓縮到任何內容,但它會影響圖像的質量。 如果您不喜歡有損 JPEG 壓縮的工作方式並使您的圖像看起來幾乎沒有那麼您必須選擇使用 WebP。

您所說的WebP 圖像和 WordPress是什麼意思,何時使用它,以及如何將 WebP 添加到基於 WordPress 的網站?

您將在此博客中找到所有這些問題的答案。 此外,您將找到一種解決方案來最小化圖像大小,而不會影響您的頁面加載時間並確保其加載速度更快。

WebP:這是什麼意思?

我們使用的最流行的圖像格式從 www 開始就被廣泛使用。 是的,JPEG、PNG 和 GIF 等流行的圖像格式以最佳方式完成了它們的任務。 那麼什麼以及為什麼需要更多的圖像格式?

尋找其他圖像格式方法的主要問題是這些格式無法以最佳方式壓縮圖像。

互聯網的使用與日俱增。 因此,越來越多的人更喜歡通過他們的移動設備搜索任何信息,這些移動設備是一種小型技術,即與台式計算機相比更少的電源包。

在世界各地,移動連接都是可用的,因此它可以比傳統的有線互聯網慢。

2010 年,WebP 圖像和 WordPress 宣布附帶一個長期問題的替代選項。 與使用以前的圖像格式相比,它提供了出色的壓縮和更高質量的圖像。

它的目標與 WebM 的目標相似。 WebM 意味著在為網絡優化的同時壓縮音頻和視頻。

WebP 同時使用無損和有損壓縮。 除此之外,它還支持元數據、顏色配置文件、透明度、動畫等。 因此它也與所有主流瀏覽器兼容。

但它不適用於 Internet Explorer、KaiOS 和其他 safari 版本。 但是,仍然有很多用戶使用這些瀏覽器,包括舊版本的 safari。

為什麼 WebP 被認為是必不可少的

在 WebP 圖像和 WordPress 上,谷歌做了很多研究。 然而,他們每次都發現算法可以將有損圖像壓縮 25-34%,將無損圖像壓縮 26%。

這顯然意味著 WebP 可以更好地進行壓縮,因為它依賴於提供一致性。 除此之外,即使與 PNG 等無損算法相比,您也永遠不會失去圖像的質量。

這是使用 WebP 的優勢,但是仍然有很多用戶使用舊技術來壓縮圖像。

然而,只有 0.3% 的網站使用了 WebP 功能。 WebP 的趨勢正在上升,但人們仍然堅持使用較少使用的技術。

當我們談論 WebP 的好處時,這真是令人驚訝。

這可能是一個問題,因為 WebP 無法提供一些支持功能,其中還包括透明度、動畫等,以及與一些常見瀏覽器的不兼容。

另外,從其他圖像格式(如 PNG)切換到 WebP 的任務並不容易。 您不能僅通過將 WebP 圖像保存在您的計算機上來將圖像上傳到您的網站。 它還包含一些您需要注意的步驟。

但是,如果您真的希望您的網站內容應該快速加載,那麼值得付出一些額外的努力。

WebP 和其他圖像文件格式類型

有很多圖像文件格式。 所有這些都提供了執行特定任務的強大功能。 一些文件格式對於很好地壓縮圖像很有用,而有些則支持動畫。

您還會發現其他一些可以提供透明背景的格式。 我們並不是說 WebP 是所有替代方案的最佳選擇,但是是的,它提供了一些可用於各種情況的功能。

下面我們來看看全球通用的一些常見的圖片文件格式

  • PNG:PNG可以被認為是最常見的文件格式。 這種文件格式更適合無損壓縮,最好在線顯示藝術品和攝影作品。
  • TIFF:另一種文件格式是沒有壓縮的 TIFF。 這個形像在它的所有讚美中都得到了展示。 這就是大多數保存為 TIFF 的文件都會具有較大文件大小的原因。 對於網絡,這不是最佳選擇。
  • GIF:另一種格式是動畫支持的 GIF。 但是,您可以說它是最古老的文件格式,也支持 250 多種顏色。 以 GIF 格式保存的圖像看起來質量低劣且醜陋。 如果您正在尋找動畫,那麼您必須選擇 GIF 格式。
  • EPS 和 SVG 文件:這兩個是它們自己的關聯。 這將保存和顯示可縮放且清晰的矢量圖像,因為它們不是由像素創建的。
  • WebP:WebP 的圖像質量與 PNG 或 JPG 相同,但文件較小。 此外,它還支持動畫和透明度。

如果您願意犧牲某種圖像質量以換取較小的圖像,那麼 WebP 是您的理想選擇。

如果您不是在從事像投資組合網站這樣的圖像質量起著重要作用的項目,那麼權衡一下是不錯的選擇。 如果沒有,那麼 PNG 是一個不錯的選擇。 取而代之的是,很少有人使用 TIFF 圖像,否則 WebP 是您工作的理想選擇。

到您的 WordPress 如何上傳 WebP 圖像

您將遇到兩種不同的方式來幫助您上傳 WebP 圖像和 WordPress

  • 第一種方法是手動在您的網站上上傳 WebP 圖片
  • 第二種方法是使用插件在網站上上傳 WebP 圖片。

我們建議您使用插件在您的網站上獲取 WebP 圖像,因為這是最簡單的方法,因為您不需要處理編碼內容,而且在使用插件時只需很少的設置。

但是,如果您選擇手動獲取 WebP 圖像,那麼您首先必須獲取 WebP 圖像。 作為 WebP,您無法保存圖像或在您的計算機上,您無法更改擴展名,您需要一個專用的轉換器。

為此,您可以使用 Google 的 Photoshop 插件,稱為 WebPShop。 或者您也可以使用在線 WebP 轉換器並在您的計算機上上傳圖像。

當您準備好上傳 WebP 圖像時,您可以在 HTML 或 CSS 中展示 WebP 圖像。 對於不受支持的瀏覽器,您必須確保確定後備圖像。 但不是這個,它只是引用 HTML 中的另一個圖像。

有了這個,它有一個問題:

您不能在媒體上傳器的幫助下上傳 WebP 圖像,因為 WordPress 不允許您這樣做。 它只會通過確定您的瀏覽器不支持這種類型的文件來顯示錯誤。

在您的服務器上,您可以手動上傳 WebP 圖像,並可以正確配置網站以展示它們,但這確實需要付出很多努力。

為了簡化流程,您可以使用一些 WordPress 插件。 這些插件將幫助您更輕鬆地執行轉換。 但是,您不需要執行太多任務來編輯代碼以添加圖像。

1.想像

想像一下

您可以說 Imagify 不僅僅是一個 WebP 轉換,它還是一個插件,可以幫助您優化您上傳的圖像和縮略圖。

Imagify 包含三種不同級別的壓縮,即超(最大有損壓縮)、正常(無損)和激進(有損)。

批量優化器將幫助您壓縮所有已上傳的圖像。 因此,備份版本將被保存,如果您不想壓縮圖像,則可以撤消它。

只要您借助 Imagify 在您的網站上添加圖像,它就會添加不同的 WebP 版本。 這樣,您就可以在您的網站上展示優化後的 WebP 圖片。

借助 Imagify,您可以免費壓縮每月 25MB 的圖像。

2. EWWW 圖像優化器

ewww 圖像優化器

另一個最受歡迎的 WordPress 圖像優化器插件是 EWWW。 該插件兼作 WebP 轉換器。 您也可以免費壓縮無限的圖像。

因此,在使用此插件時,您不必擔心它的每月數據上限。 它還包括一個批量上傳器。 但是,無論是否保存在媒體庫中,它都會壓縮所有圖像。

有了這個插件,WebP 就可以使用了。 所有過程都是自動的。 在不更改原始圖像的情況下,您還將獲得壓縮、延遲加載和頁面大小縮放。

3. ShortPixel 圖像優化器

短像素圖像優化器

使用 ShortPixels,您將獲得廣泛的功能來壓縮圖像。 只需單擊幾下,您就可以開始使用它的功能。

因此,您將能夠很容易地自動生成 WebP 版本。 使用批量優化器或直接上傳您可以優化圖像。

此外,它將幫助您將圖像文件格式從 PNG 轉換為 JPG、調整圖像大小、優化縮略圖、優化圖像、刪除元數據以及在您的服務器上備份未優化的圖像。

這個插件實際上是在信用系統的基礎上工作的,這意味著當你每月有 100 個圖像信用時,你可以每月壓縮 100 個圖像來壓縮更多,你將不得不購買更多的信用。

結論:
通過 WordPress,實際上並不支持 WebP,但在您的網站上,您仍然可以使用 WebP 圖像。 如果您嘗試直接上傳它,它將無法正常工作。 但是你會發現一些插件可以很容易地在你的網站上添加 WebP。