如果你想 加快您的WordPress網站,找到減小圖像尺寸的方法可帶來巨大的投資回報。

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

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

這就是我們在此博客文章中深入探討該主題的原因!

準備?讓我們開始吧!

什麼是WebP?

那麼……什麼是WebP文件?簡而言之,WebP是Google開發的一種圖像格式。例如,您有類似的圖像格式 JPEG或JPG 和PNG,對不對?嗯,WebP是圖像的另一種文件格式。看看如何 不同的圖像文件類型 可能會影響您網站的速度。

WebP專注於提供相同的圖像文件,只是文件尺寸較小。通過減少圖片文件的大小,您仍然可以為網站的訪問者提供相同的體驗,但是 您的網站將加載得更快.

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

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

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

Google PageSpeed Insights suggests using WebP images

Google PageSpeed Insights建議使用WebP圖像

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

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

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

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

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

哪些Web瀏覽器支持WebP?

為了使WebP圖像起作用,訪問者的Web瀏覽器需要支持它們。不幸的是,儘管瀏覽器支持已經增長很多, WebP兼容性仍然不是通用的.

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

  • 鉻(桌面和移動).
  • Firefox(桌面和移動).
  • 邊緣。
  • 歌劇(桌面和移動).

但是,值得注意的是Safari。在撰寫本文時,Safari的桌面版和移動版均不支持WebP圖像。 蘋果做了短暫的實驗 WebP在2016年對Safari提供了支持,但此後沒有再進行任何推動。

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

總共, 大約77%的互聯網用戶 使用支持WebP的瀏覽器。因此,儘管23%當然具有多數支持,但它太大了以至於無法忽略(在下面的WordPress WebP教程中,我們將向您展示如何處理此問題,以便所有訪問者都擁有很好的體驗):

WebP web browser support

WebP支持

WebP,JPG,PNG大小比較

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

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

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

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

如何在WordPress上使用WebP圖像

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

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

不用擔心,有解決方案!

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

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

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

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

下面,我們將介紹一些 最好的WebP WordPress插件,所有這些都與Kinsta和 Kinsta CDN.

信息

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

短像素

ShortPixel WordPress plugin

ShortPixel WordPress插件

短像素 是一個流行的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帳戶即可獲得).

在裡面 一般 標籤中,您可以設置圖像優化工作方式的基本設置。例如,使用哪種壓縮級別以及是否調整圖像大小:

How to set compression level and image dimensions in ShortPixel

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

要啟用WebP圖像,請轉到 高級 標籤和:

  1. 選中復選框 WebP圖像
  2. 選中復選框 交付WebP版本。 (在您選中第一個框後就會顯示)
  3. 選擇單選按鈕 使用標籤語法 (在選中上一個框後顯示)
  4. 保留默認值 僅通過WordPress掛鉤選擇
How to enable WordPress WebP images in ShortPixel

如何在ShortPixel中啟用WordPress WebP圖像

然後,保存您的更改。

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

想像一下

Imagify WordPress plugin

想像一下WordPress插件

想像一下 是與開發者相同的流行圖像優化插件 WP火箭 (這是 與Kinsta搭配使用的少數緩存插件之一).

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

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

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

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

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

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

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

激活插件後,您可以使用 通用設置 框以選擇您的壓縮級別。

How to set compression level in Imagify

如何在Imagify中設置壓縮級別

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

  1. 選中復選框 創建圖像的WebP版本
  2. 選中復選框 以webp格式顯示圖像…
  3. 選擇單選按鈕以 利用標籤
  4. 如果您是在Kinsta託管並使用Kinsta CDN,請在以下位置輸入Kinsta CDN的URL(包括https://)。 如果您使用CDN盒 (我們將在下面告訴您如何找到Kinsta CDN URL)
How to enable WordPress WebP images in Imagify

如何在Imagify中啟用WordPress WebP圖像

如果你是 使用Kinsta CDN,您可以在以下位置打開您的網站來找到您的CDN網址: MyKinsta儀表板 並參觀 金斯塔CDN 網站設置的標籤:

How to find Kinsta CDN URL

如何找到Kinsta CDN URL

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

擎天柱

Optimole WordPress plugin

Optimole WordPress插件

擎天柱 是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→設置:

The Optimole settings area - WordPress WebP images are enabled by default

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

由於Optimole通過其自己的CDN來處理圖像,因此,如果您在Kinsta託管,則無需設置任何Nginx規則。

/ *點擊鳴叫* /
正文a.novashare-ctt {
顯示:塊;
背景:#00abf0;
邊距:30px自動;
填充:20px 20px 20px 15px;
顏色:#ffffff;
文字修飾:無!重要;
box-shadow:無!重要;
-webkit-box-shadow:無!重要;
-moz-box-shadow:無!重要;
邊框:無;
左邊框:5px實心#00abf0;
}
正文a.novashare-ctt:hover {
顏色:#ffffff;
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt:visited {
顏色:#ffffff;
}
正文a.novashare-ctt * {
指針事件:無;
}
正文a.novashare-ctt .novashare-ctt-tweet {
顯示:塊;
font-size:18px;
行高:27px;
底邊距:10px;
}
正文a.novashare-ctt .novashare-ctt-cta-container {
顯示:塊;
溢出:隱藏;
}
正文a.novashare-ctt .novashare-ctt-cta {
浮動:正確;
}
正文a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
向左飄浮;
}
正文a.novashare-ctt .novashare-ctt-cta-text {
font-size:16px;
行高:16px;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon {
左邊距:10px;
顯示:inline-block;
垂直對齊:中間;
}
正文a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直對齊:中間;
高度:18px;
}
/ *簡單+簡單備用主題* /
正文a.novashare-ctt.novashare-ctt-simple {
背景:無;
填充:10px 0px 10px 20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
填充:20px;
顏色:初始;
}
正文a.novashare-ctt.novashare-ctt-simple:hover,正文a.novashare-ctt.novashare-ctt-simple-alt:hover {
左邊框:5px實心#008cc4;
}
正文a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
顏色:#00abf0;
}
正文a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta,正文a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
顏色:#008cc4;
}

概要

WordPress網站的圖像在平均頁面的文件大小中佔很大一部分。如果您找到縮小圖像尺寸的方法,則可以 加快您的網站 不會改變訪客的體驗。

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

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

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

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

  • ShortPixel。
  • 想像一下
  • Optimole。

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

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