需要更快的頁面速度?瞭解WebP和AVIF兩種現代影象格式

WebP和AVIF兩種現代影象格式

“一張圖片勝過千言萬語”,這句流傳了一個世紀的格言依然有其道理。

事實上,當網站可能成為企業家與目標受眾的唯一連線點時,圖片對於講述你的故事可能比以往任何時候都更為重要。

這就引出了一個問題: 你的影象說明什麼?

它是否載入快速、清晰,給人留下現代印象,並將購物者拉入您的轉化漏斗?

還是您的圖片有點模糊或速度偏慢,導致訪問者懷疑您的品牌是否值得信賴–以及他們是否應該點選進入競爭對手的網站?

小型企業網站的效能、成功和使用者體驗在很大程度上取決於現代圖片格式。而升級你的網站可能比你想象的要容易得多。

在本指南中,我們將探討什麼是現代格式、如何選擇最適合你的格式、一個只需點選幾下就能實現這一切的 WordPress 外掛,最後是一個關注網站效能的策略,以確保你與當代消費趨勢保持一致。

瞭解WebP和AVIF影象

WebP 格式於 2010 年問世,在 JPEG 影象格式的基礎上進行了改進,在不增加檔案大小的情況下提供了卓越的質量和可壓縮性。

它支援有失真壓縮(大幅減小尺寸,同時將質量損失降到最低)和無失真壓縮(無質量損失),從而在保持視覺清晰度的同時減小檔案尺寸。WebP 還能處理透明度(如 PNG)和動畫(如 GIF)等功能。

由於其高效性、多功能性以及與所有現代瀏覽器的相容性,WebP 已成為一種常用格式

AVIF (AV1 影象檔案格式)於 2019 年推出,提供比 WebP 更好的影象質量和壓縮效果。由於採用了先進的影象壓縮技術並能生成更豐富的色彩,它能以最小的檔案大小提供更高質量的視覺效果。

雖然 AVIF 檔案由於更年輕,還沒有像 WebP 那樣被廣泛採用,但隨著越來越多的平臺開始接受這種格式,它的受歡迎程度也在不斷提高。

總而言之, JPEG 和 PNG 影象都是較老的格式,檔案大小較大,因此載入速度較慢。WebP 和 AVIF 格式較新,可壓縮性高,因此檔案更小,載入速度更快–通常不會損失太多(如果有的話)質量。

還有一件事你應該知道Modern Image Formats 是為 WordPress.org 網站開發的一個外掛的名稱,用於為媒體上傳啟用 AVIF 和 WebP 支援。

稍後,我們將向您介紹如何在自己的網站上安裝該外掛,以利用這些現代格式的優勢。

現代格式為何重要(提示:速度!)?

圖片對網站頁面體積的影響很大,在 2315 KB 的總體積中,桌面圖片的平均體積超過 1000 KB。這相當於近 50%!

在移動裝置上,2,020 KB 中圖片佔了近 900 KB。

頁面元素體積

由於圖片佔網站頁面重量的大部分,因此圖片的格式變得至關重要。這是因為不同的格式會極大地影響圖片的大小和重量,並最終影響圖片的載入時間。

您希望圖片的載入速度越快越好,因為這會產生兩方面的影響。

首先,它對搜尋引擎優化(SEO)至關重要。

谷歌使用一種名為 Core Web Vitals 的東西,這是它衡量每個網站的一組指標,根據穩定性、響應速度和你猜對了–速度,來衡量你的網站對使用者的友好程度!

它將使用您的 Core Web Vitals 以及其他因素,來決定您的網站在搜尋引擎結果頁面中相對於競爭對手的位置。(敬請關注,我們稍後將再次深入探討 Core Web Vitals!)。

此外,載入速度和準確性也是客戶體驗的重要因素,因此會極大地影響您的轉化能力。事實證明,網站速度越慢,轉化率越低

Core Web Vitals

選擇AVIF還是WebP

在網站上使用 WebP 或 AVIF 來提高速度之前,您需要確定您更喜歡哪種影象格式。

事實上,AVIF 和 WebP 都是適用於網路的優秀影象格式,所以選擇哪種格式其實完全取決於你的優先順序。

以下是我們的結論:

AVIF 保證影象質量

AVIF 非常適合清晰、細膩的影象,如攝影作品集、數字藝術或展示高階產品的電子商務網站。它能提供令人驚歎的視覺效果,同時對載入時間的影響最小。

功能多樣的WebP

WebP 適用於大多數網站,能輕鬆處理照片、插圖、Logo 和動畫。WebP 支援廣泛,是在網路上快速載入高質量影象的可靠選擇。

實際上,我們已經撰寫了一份詳細的指南來幫助你做出這一決定,如果你想了解更多細節,請不要錯過 AVIF vs. WebP:如何選擇正確的現代影象格式

功能多樣的WebP

使用Modern Image Formats外掛上傳最佳圖片

我們前面提到的那個外掛,Modern Image Formats?它可能是小型網站所有者和運營者在網上更新圖片的最佳方式。

因此,讓我們來探討一下該工具的功能、安裝和使用方法、它的優點以及如何確定它是否適合你。

什麼是Modern Image Formats外掛?

WordPress 剛於 2024 年在 6.5 版本中引入了 AVIF 支援,因此有些網站可能還沒有設定好使用這種格式。

這就需要使用現代影象格式這樣的外掛(以前是效能實驗室外掛的一部分,後來分離出來,在 2024 年之前稱為 WebP Uploads)。

Modern Image Formats 的建立是為了在 WordPress 中使用 WebP 和 AVIF 影象格式。只要您的主機伺服器支援 AVIF,外掛就會預設輸出 AVIF 格式,否則就會使用 WebP 格式。如果兩種格式都支援,您可以在“設定”選單中選擇您喜歡的輸出格式。

快速提示:使用該外掛只能對新上傳的圖片進行格式現代化,因此無法對網站上已有的圖片進行追溯。

選擇好理想的現代檔案型別,準備好提升圖形和網站速度了嗎?太好了–讓我們開始使用現代圖片格式外掛吧!

提醒:如果您想使用 WebP 和 AVIF 檔案格式,您的主機環境也必須支援這些格式。如果您不確定是否支援,請聯絡您的供應商!

如何使用Modern Image Formats

與所有外掛一樣,您可以通過 WordPress 管理員安裝 Modern Image Formats。只需登入並導航至左側選單中的 “外掛”>“安裝新外掛”

安裝新外掛

搜尋“Modern Image Formats”,點選 “立即安裝”,然後等待安裝完成後再點選“啟用”按鈕。

安裝Modern Image Formats

完成後,你將被重定向到已安裝外掛頁面,該頁面按字母順序排列。

向下滾動找到 Modern Image Formats,然後點選“Settings”。

在這裡,你只需看一看,確保你喜歡所有預設設定,包括首選影象輸出格式、後備影象輸出等。

設定滿意後,使用“儲存更改”按鈕。

Modern Image Formats外掛設定

現在,當你上傳新圖片時,外掛會自動將其轉換為你選擇的預設格式。

讓我們快速釋出一張圖片來測試一下。我們將前往 “文章”>“寫文章”,然後將一張圖片拖到頁面上。

釋出新文章

給它取一個標題,然後點選右上角的釋出按鈕。在實時帖子上,將滑鼠懸停在圖片上,點選右鍵,然後檢查 。你會發現圖片是你喜歡的格式!

預設情況下,當你上傳 JPEG 或 PNG 圖片時,調整大小的版本將以 WebP 或 AVIF 等現代格式建立。不用擔心,原始檔案將保持原來的 JPEG 或 PNG 格式!

快速提示:使用此外掛,您只能對新上傳的圖片進行格式現代化處理,因此無法對網站上已有的圖片進行追溯處理。

Modern Image Formats外掛的好處

這個外掛最大的好處,也是它的全部目標,就是讓所有技術背景的網站所有者都能輕鬆地將自己的網站帶入現代。安裝後,它能立即使網站相容當今最有效的圖片格式,確保快速載入、高質量和更好的體驗。

其次,選擇該外掛的另一個主要好處是簡化了格式選擇。它可以根據伺服器能力自動選擇最佳格式。在支援 AVIF 的情況下,它會優先選擇 AVIF 格式,而 WebP 則作為後備格式使用–除非你選擇調整其他設定。這樣,在網站管理和優化方面就少了一件麻煩事。

Modern Image Formats適合你嗎?

像往常一樣,我們很難說什麼才是最適合你的。您用來支援小企業的工具與您的品牌、您的網站、您和/或您團隊的技能組合以及您可用於上述所有方面的時間息息相關!

如果您的網站和業務的成功取決於影象,我們建議您使用該工具。這可能適用於攝影師、需要展示高質量作品樣本的數字服務提供商、電子商務賣家等。

基本上,如果你的網站充滿了圖片,你需要注意的不僅是它們看起來很棒,而且它們不會影響你在桌上型電腦或手機上的載入速度。

如果這聽起來像你的想法,那麼使用一個外掛也無妨,它可以讓你在上傳圖片到網站時,更輕鬆地將圖片快速升級為最佳和最快的格式。

使用Core Web Vitals衡量您的圖片優化工作

既然您已經做出了這一重大調整,如果您還沒有這樣做的話,那麼現在就應該開始關注您的核心網站生命指數得分,以瞭解它們對網站效能的影響。

提醒您,這是一組指標:谷歌對網站進行跟蹤,以幫助確定網站的可用性併為谷歌搜尋者進行排名。

Core Web Vitals

以下是確定核心網站活力分數的三種方法,可用於跟蹤和提高網站效能:

  • PageSpeed Insights:訪問 Google PageSpeed Insights,輸入您的網站 URL,然後單擊Analyze分析)。它將提供移動和桌面 Core Web Vitals 分數以及改進建議。
  • Chrome 瀏覽器使用者體驗報告:前往Google Search Console>Core Web Vitals>Experience,瞭解真實訪客與網站的互動情況。
  • Web Vitals Chrome 瀏覽器擴充套件: 將 Web Vitals Chrome 擴充套件新增到 Chrome 瀏覽器,可直接從您訪問的任何網站即時訪問 Core Web Vitals 分數。

小結

好了,好了,在我們結束之前還有一件事。我們一直在撰寫關於小型企業網站的文章,因此我們已經積累了大量關於提高網站速度的資源。

對於那些想盡一切辦法通過提高網站速度來提升銷售額和客戶體驗的人來說,這裡有幾篇文章值得一讀:

同樣重要的是,網站託管與速度也有很大關係!

超載的伺服器、遙遠的伺服器、有限的頻寬、簡陋的基礎設施–所有這些劣質主機的特點都會嚴重降低網站的速度,無論你如何優化圖形都無濟於事。

評論留言