WebP 圖像指南:如何在 WordPress 中使用 WebP 格式
已發表: 2022-07-29我們都喜歡好的 GIF,但自 1987 年 GIF 推出以來,圖像格式已經走過了漫長的道路。精明的網頁設計師已經開始接受 JPEG、PNG 和現在的 WebP。
雖然 GIF 作為 Slack 頻道和短信的素材正在享受第二次生命,但新的 WebP 格式開始接管網絡。
在這篇文章中,我們研究了 WebP 的發展,並提供了有關如何將其用於您的網站的提示。 您將學習:
- 格式的工作原理
- WebP 圖像的好處
- 使用 WebP 的限制
- 如何為 WordPress 啟用 WebP 圖像
WebP 格式的工作原理
最初來自 On2 Technologies,Google 正在將 WebP 開發為一種開源圖像格式,並希望使其成為新的網絡圖像公認標準。
WebP 提供增強的圖像壓縮。 您可以減小文件大小而不會損失任何圖像質量。 WebP 在支持有損和無損壓縮方面是獨一無二的。
無損壓縮允許您在保持原始圖像質量的同時減小文件大小。 原始數據不會丟失,因此您可以將圖像恢復為其原始質量和大小。
使用有損壓縮會產生更小的文件大小。 有損壓縮僅保留以縮小尺寸顯示圖像所需的數據。 您將無法調整大小並保留原始質量。
要充分利用 WebP,請對需要縮放到不同大小的圖像(例如背景圖像)使用無損壓縮。 對具有固定尺寸的圖像使用有損壓縮。 如果您知道您網站的特色圖片或產品圖片的最大寬度,則可以通過有損壓縮將其保存到這些精確尺寸。
WebP 的好處
那麼是什麼推動了 WebP 的發展呢? 該格式提供了許多優點,包括易用性和性能。 讓我們探索在您的網站上使用 WebP 的最大優勢。
輕鬆轉換現有圖像
您可以將站點中的任何現有 PNG、GIF 或 JPEG 轉換為 WebP 文件。 您不會犧牲質量,通常會減小文件大小。
更好的壓縮
如果將 PNG 或 JPEG 轉換為 WebP,WebP 文件大小將比原始文件小 30% 到 50%。 較小的圖像應該可以幫助您的頁面加載更快,這就是為什麼我們建議將圖像壓縮作為加快 WooCommerce 網站速度的最佳方法之一。
更好的網站性能
更快的加載圖像和頁面可以創造更好的用戶體驗。 您還可以通過優化您的網站的速度來提高您的搜索引擎排名。 搜索引擎非常重視您的網站加載速度。 加載速度較快的網站往往比速度較慢的網站排名更高。
以 WebP 等下一代格式提供圖像是我們提高 Google PageSpeed Insights Score 的 12 種行之有效的方法之一。
支持透明度和動畫
誰不喜歡動畫 GIF? 使用 WebP,你很幸運。 WebP 支持動畫和透明度。
廣泛的瀏覽器支持
大多數現代瀏覽器都支持 WebP。 Apple 的 Safari 瀏覽器是唯一的堅持者,但最終在去年 Safari 14 中引入了 WebP 支持。
WebP 的局限性
WebP 的主要限制是確保您使用圖像的所有方式的兼容性。 如果您使用網站數據輸入電子郵件活動或移動應用程序,您可能會遇到問題。
請務必測試圖像將出現的所有位置,以確保 WebP 格式可以正常工作。 您還可以考慮提供兩個版本的圖像。 在允許時使用 WebP,在不支持 WebP 時使用後備 JPEG 或 PNG。
如何使用 WordPress 啟用 WebP
WordPress 從 5.8 版開始提供 WebP 支持。 如果您的服務器支持 WebP,您應該能夠像任何其他受支持的圖像類型一樣上傳和使用 WebP 圖像。
在 WordPress 中使用 WebP 圖像的選項包括:
- 手動轉換圖像。 使用CloudConvert等在線工具將圖像轉換為 WebP。 這是一項耗時的手動任務,因為您必須將文件上傳到轉換器,然後將新文件上傳到您的 WordPress 庫。
- 圖像優化插件。 許多圖像優化插件已經包含將圖像轉換和顯示為 WebP 文件的選項。 檢查您的插件文檔以了解如何為您的站點啟用這些選項。
- WebP 插件。 除了優化插件,您還可以使用專門設計的插件(如WebP Converter for Media )將上傳的圖像自動轉換為 WebP。
使用 WebP 和 Pressable 更快的站點
如果您對 WebP 感興趣,您可能希望您的網站盡可能快地加載。 使用 WebP 的出色壓縮將圖像文件大小減少一半是一個很好的起點。 確保您的網站盡快運行的另一種方法是選擇正確的主機。
在 Pressable,我們的託管服務可為 WordPress 網站提供最佳性能。 我們基於雲的託管託管服務使您的網站管理變得簡單,同時提供 100% 的正常運行時間和閃電般的速度。 哦,還有 WebP 支持? 我們已經涵蓋了。 我們的全球 CDN 網絡還支持 WebP,因此您可以獲得使用這種新圖像格式的所有速度提升優勢。
要了解有關 Pressable 如何使 WordPress 更好地工作的更多信息,請立即預訂自定義演示。