如果您想加快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的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,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圖像優化插件,可以幫助您自動調整大小並壓縮上傳到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帳戶獲得)。
在「常規」選項卡中,您可以設置圖像優化工作方式的基本設置。例如,使用哪種壓縮級別以及是否調整圖像大小:
要啟用WebP圖像,請轉到「高級」選項卡,然後:
- 選中「 WebP圖像」框
- 選中提供WebP版本的框。(選中第一個框後出現)
- 選擇單選按鈕以使用
- 保留默認的「僅通過WordPress掛鉤」選擇
然後,保存您的更改。
如果您在Kinsta託管,ShortPixel將為您提供有關在Nginx上配置伺服器配置文件的警告消息。要配置這些設置,您可以聯繫Kinsta支持,我們很樂意為您設置伺服器配置。
想像一下
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密鑰以開始使用。
激活插件後,您可以使用「常規設置」框選擇壓縮級別。
要啟用WebP圖像,請向下滾動到「優化」部分,然後找到「 WebP格式」部分:
- 選中創建圖像的WebP版本的框
- 選中以Webp格式顯示圖像的框…
- 選擇單選按鈕以使用
- 如果您是在Kinsta託管並使用Kinsta CDN,請在「如果使用CDN」框中輸入Kinsta CDN的網址(我們將在下面告訴您如何找到Kinsta CDN網址)
如果您使用的是Kinsta CDN,則可以通過在MyKinsta儀錶板中打開網站並訪問網站設置的Kinsta CDN標籤來找到您的CDN URL:
與ShortPixel一樣,如果您在Kinsta託管,則需要為WebP緩存存儲區創建Nginx規則(只需聯繫Kinsta支持)。
擎天柱
Optimole是一個WordPress圖像優化插件,其操作與Imagify和ShortPixel略有不同。 Optimole可以自動壓縮圖像並調整其大小。但是,它還具有其他兩個顯著功能:
- 它可以通過自己的CDN(由Amazon CloudFront支持)來提供圖像。
- 它提供實時的自適應圖像,Optimole將為每個訪客提供最佳尺寸的圖像。例如,與在Retina屏幕上瀏覽的人相比,在小屏幕上瀏覽的人將獲得較低解析度的圖像。
這種方法類似於其他實時優化/操縱服務,例如Cloudinary,imgix,KeyCDN圖像處理等。
作為實時圖像優化的一部分,Optimole還可以使用支持WebP的瀏覽器向訪問者提供WebP圖像。
Optimole有一個有限的免費計劃,該計劃每月可以處理大約5,000個訪問者的圖像。之後,付費計劃的起價為每月19美元,可容納約25,000名訪客。
首先,您需要從WordPress.org安裝該插件,並使用API密鑰(可以通過註冊免費的Optimole帳戶獲得)來激活它。
完成此操作後,Optimole將開始自動優化圖像並通過其CDN交付圖像。默認情況下,WebP支持處於啟用狀態,因此無需手動啟用它。
要配置其他設置,例如壓縮級別和縮放行為,可以轉到媒體→Optimole→設置:
由於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的與眾不同!查看我們的計劃