AVIF與WebP兩種圖片格式對比：網站更適合選擇哪一種？

如果光是讀到影象格式這個短語，你可能會第一時間想到 JPEG。又或者 PNG。

這兩種都是影象格式。而 WebP 和 AVIF 只是兩個不同的、稍新的版本。

為什麼會出現這兩種格式呢？

就像當初開發 T 型車是為了取代馬匹一樣，這些現代格式也是為了在速度和質量方面改變和改善現狀。

那麼，你到底為什麼要繼續閱讀呢？

如果你想確保你的小型企業網站儘可能跟上現代技術和不斷變化的消費者需求，你就需要從亨利-福特的書中汲取靈感，發揮創造力。

幸運的是，如今這項工作不那麼油膩，但可能更有技術含量。本指南為您提供了理解、選擇甚至實施圖片格式的理由、技巧和工具，讓您的網站獲得巨大成功。

為什麼要關注網站的圖片格式？

網站上的檔案格式，尤其是圖片格式，似乎是您最不需要考慮的問題。

我們建議您再想一想。

以下就是為什麼圖片格式是網站體驗和效能的關鍵所在。

圖片無處不在…

無論您的業務是什麼，圖片都可能在您的網站中佔很大比重。

根據 Web Almanac 的資料，在網站的全部 2315 KB 內容中，桌面影象佔了 1000KB 以上。這接近 50%！對於移動網站，在 2,020 KB 的總容量中，圖片佔了近 900 KB。其次使用最多的內容型別（JavaScript）甚至不及圖片的一半！

幾乎 100% 的網站頁面都包含圖片，這並不奇怪。而且，在 80% 的桌面網站（移動網站為 70%）中，圖片是最具影響力的組成部分。Core Web Vitals 的最大內容圖片（LCP）指標就證明了這一點，該指標確定了網站頁面首屏的最大元素。

換句話說，要誇大圖片在網路上的存在和重要性幾乎是不可能的。

…所以它們的表現很重要！

當你考慮到圖片佔網站頁面權重的大部分時，如何格式化圖片（這會影響圖片的表現）就成了關鍵問題。

不同的格式，例如我們接下來要深入討論的 AVIF 和 WebP，會影響圖片的大小和重量。

此外，不同格式的大小調整和壓縮方式也不同。如果不能將圖片編輯到網站所需的理想尺寸或重量，就會導致圖片過重和/或變形，從而影響載入速度和使用者體驗。

這種糟糕的體驗不僅會讓訪問者掃興。隨著時間的推移，搜尋引擎會發現載入時間過慢以及不雅圖片導致的跳轉，您的排名就會下降，從而影響您的知名度、轉化率，最終影響收入。

聽起來是時候學習如何優化網路圖片了？

在本文中，我們將介紹每個網站所有者和管理者都應該瞭解的兩種流行的現代圖片格式。

探索WebP

WebP 是一種影象格式，最初由谷歌於 2010 年建立，旨在改進 JPEG 的影象質量和可壓縮性。所有這些都不會增大影象檔案的大小。

它做到了這一點！

WebP 的獨特之處在於它同時使用了有失真壓縮（檔案大小縮小，部分影象資料丟失）和無失真壓縮（檔案大小縮小，但不丟失影象資料）技術。這意味著影象檔案可以在需要的時候進行壓縮，而視覺質量基本保持不變。WebP 還支援影象透明（PNG 就是著名的透明）和動畫等功能（GIF 是最早處理這種功能的檔案型別）。

WebP 已成為網路開發人員、設計師以及幾乎所有在網際網路上處理影象的人都非常喜歡的格式。

這是因為我們前面提到的許多特性： WebP 圖形壓縮效果好、外觀漂亮、可用於各種設定，而且由於其推出時間長、得到谷歌的支援，所有現代網路瀏覽器都支援 WebP。使用 WebP 通常會給網站訪問者和管理者帶來良好的體驗。

瞭解AVIF

AVIF 是 AV1 影象檔案格式的縮寫，是一種比 WebP 更新的影象格式。

AVIF 由開放媒體聯盟（Alliance for Open Media）於 2019 年推出，是著名的 AV1 視訊格式的衍生影象格式。與包括 JPEG 和 WebP 在內的舊格式相比，它旨在進一步改善影象的檔案質量和大小/重量。

就像之前的 WebP 一樣，AVIF 也實現了自己的目標。

與其他格式相比，使用 AVIF 可以獲得佔用空間極小的高質量影象。這一切都要歸功於它先進的圖形壓縮方式，以及在許多情況下提供更豐富色彩的能力。

AVIF 的主要缺點是它的知名度和使用率都不如 WebP。不過，隨著未來幾年越來越多的平臺、技術、設計師和開發人員使用 AVIF，我們將繼續看到它的崛起。

AVIF與WebP對比：7個關鍵向量的比較

上完有趣的歷史課後，終於到了深入探討 AVIF 和 WebP 在對您至關重要的所有方面的比較的時候了，這些方面包括載入時間、壓縮質量、編輯難易程度等。

1. 瀏覽器相容

當然，最好選擇與大多數網路瀏覽器相容的影象格式。對於使用者體驗來說，損壞的圖片可能比載入緩慢的圖片更糟糕。

在很長一段時間裡，AVIF 作為新生事物並沒有得到所有瀏覽器的廣泛支援。這就是為什麼你經常會看到它在瀏覽器支援方面得分較低的原因。

不過，截至 2024 年，Can I Use 網站顯示 AVIF 和 WebP 在所有主流瀏覽器上都可用。

由於 AVIF 幾乎已經拉開了差距，因此我們將這一結果視為平局。儘管如此，重要的是要知道 WebP 仍然是被更廣泛認可和使用的格式。因此，你可能會在一段時間內繼續看到它被稱為最相容瀏覽器的選項，從而影響它在我們今天要比較的其他幾個因素中的排名。

在這一個環節，兩者打成平手。

2. 載入時間

正如我們所提到的，作為網站所有者和使用者，您肯定也有過這樣的經歷，網站的載入速度對網站的效能起著巨大的作用。對於使用手持裝置的訪問者來說，這一點更為重要，因為他們很可能隨時準備採取行動。

縮小網頁所有元素的尺寸，尤其是圖片，可以顯著改善載入時間。

與 WebP 相比，AVIF 具有明顯的優勢。一般來說，AVIF 影象比 JPEG 影象小 50%，而 WebP 影象比 JPEG 影象小 30%。

這種尺寸上的差異可以歸結為每種檔案格式處理壓縮的方式。WebP 採用 VP8 視訊編解碼器壓縮方法，而 AVIF 壓縮則基於 AV1 視訊編解碼器，這是一種更現代的選擇。

雖然所有這些技術術語都很好懂，但關鍵在於以下幾點： AVIF 檔案更小，有助於加快網站載入速度。

在載入時間方面，AVIF 格式更勝一籌。

3. 無失真壓縮

好吧，壓縮並不代表一切；壓縮影象的質量仍然很重要！

這裡有一個有趣的現象：AVIF 確實支援無失真壓縮（又稱縮小檔案大小），幾乎沒有資料或質量損失。不過，在這一過程中，一些實驗發現它並不能像 WebP 格式那樣縮小檔案大小。

因此，如果您想要壓縮率最高、質量最好的圖片，尤其是沒有文字的圖片，WebP 是您的不二之選。

如果您希望兼顧質量和壓縮率，Webp 明顯是更佳選擇。

4. 有失真壓縮

反過來說，在有失真壓縮的情況下（需要最大程度的壓縮，同時可以犧牲一些質量），AVIF 格式可以保持比 WebP 稍高的質量，同時還能大大減輕檔案重量。

有需要壓縮但又不能犧牲清晰度的圖片嗎？比如照片、包含文字的影象等。試試 AVIF 格式吧。

跟上述的結果相反，如果有失真壓縮可以滿足您，則選 AVIF。

5. 攝影

與我們剛才討論的內容相關，如果要在網站上展示數碼攝影作品，AVIF 是最佳選擇。

這有幾個原因。

首先，更高效的壓縮演算法使得影象非常輕便，同時又不影響質量。此外，AVIF 比 WebP 支援更高的位元深度（或獨特顏色的數量）。因此，當您想讓照片保持最清晰、最細膩和最真實的色彩時，請使用 AVIF。

當您在這兩種中選擇作為攝影照片的格式時，AVIF吧。

6. 編輯易用性

事實上，即使不是所有流行的照片編輯工具，大多數工具都支援 WebP，而 AVIF 卻不支援。目前還不支援。這使得 WebP 在編輯簡便性方面更具優勢。

不過，我們已經討論過的 AVIF 影象格式的功能有助於它在編輯時保持更高的質量。本專欄的一個反面教材。

因此，雖然 AVIF 檔案在編輯時可能略勝一籌，但這隻有在您擁有可處理 AVIF 檔案的軟體時才有意義！

因此，我們將編輯難易度打成平手。

7. 社交媒體分享

繼續在 LinkedIn 或 Facebook 上滾動，然後告訴我們： 帶有圖片的帖子是否更容易吸引你的眼球？我們都知道！

如今，當你與成千上萬（甚至上百萬）的其他企業競爭注意力時，釋出高質量的圖片對於社交媒體的參與度至關重要。

最理想的檔案格式是相容性。雖然 AVIF 通常在載入速度上佔優勢，但如果平臺不支援該圖片型別，則根本無法載入！例如，Facebook 的母公司 Meta 在廣告中支援 WebP 影象，但不支援 AVIF。

WebP 仍然擁有更廣泛的瀏覽器和平臺支援，因此在選擇使用哪種檔案格式在社交平臺上分享圖片時，WebP 佔據了上風（無論如何，目前是這樣）。

何時選擇 AVIF 與 WebP

照片、圖形和一般影象是網頁設計中最重要的元素之一，因此為網站選擇合適的檔案型別可能會讓人望而生畏。

老實說，我們認為 AVIF 或 WebP 都不會有錯。您選擇哪種檔案型別完全取決於您的優先順序，而且您將來還可以隨時改變主意！

但是，如果您發現自己舉棋不定，我們將向您介紹我們對何時選擇 AVIF、何時選擇 WebP 的基本看法。

當影象就是一切時：選擇 AVIF

總的來說，AVIF 影象格式非常適合真正高質量的視覺效果，如照片、數字藝術和圖形設計，無論如何都需要可讀性。因此，它非常適合需要大而精美圖片的網站，可以快速載入，給人留下難忘的第一印象。

例如，高度視覺化行業的作品集網站、攝影企業的營銷網站，或者需要超詳細產品照片的電子商務網站（也許你銷售高階定製車身套件？ 酷！）。

AVIF 是一種既能獲得清晰影象，又能快速載入且不影響使用者體驗的方式。

當多功能是關鍵：選擇 WebP

事實上，大多數網站型別：從本地服務企業到線上精品店、單頁自由職業者檔案、簡單的電子商務平臺等等，都可以安全地使用 WebP 影象。

這是因為這種格式可以很好地處理各種圖形型別，包括大多數影象以及插圖、徽標、動畫等。而且，它的檔案大小非常適合快速載入。

此外，這種格式仍然是兩種格式中被更廣泛認可的一種，在瀏覽器、平臺、編輯工具和設計人員之間具有微弱但堅實的優勢，這一點是無可爭議的。

優化網站圖片的7種工具

既然你已經知道如何根據自己的需要和願望選擇和使用正確的檔案格式，作為一個小型企業網站的管理者，讓我們來談談如何才能真正將這些資訊用到實處。

無論你是需要轉換、壓縮、編輯，還是設定你的網站來處理所有圖片，這裡都有一些不同價位的好工具，讓你在優化圖片時得心應手。

WordPress 外掛

Optimole 是一款付費 WordPress 外掛，可處理 WordPress 網站的幾乎所有圖片事務：從自動優化到調整大小、雲端儲存、智慧載入等。套餐起價為 19.08 美元/月，按年結算。

既有處理 WebP 轉換的免費 Converter for Media 外掛，也有處理 AVIF 轉換的付費外掛（50 美元/年）Converter for Media PRO。

壓縮工具

Kraken.io是一款流行、強大、快速的壓縮和優化網站影象的工具。如果你經常新增新圖片，訂閱可能是你的正確選擇（每年 50 美元起）。

對於偶爾使用的使用者，可以檢視 ShortPixel 的免費影象壓縮平臺，或者他們的網站檢查器，幫助你找出需要改進的地方。

轉換應用程式

影象和視訊平臺 Cloudinary 提供影象轉 AVIF 工具和影象轉 WEBP 工具，可免費快速轉換檔案格式！

Picflow 的免費影象轉換工具可在大多數現代影象型別之間快速轉換，包括 AVIF 和 WebP。

調整大小和編輯軟體

AVIF Studio 是一個免費的 Chrome 擴充套件程式（和網站），你可以用它來調整大小、編輯和註釋多種格式的圖片，包括 AVIF、WebP、JPG、PNG 和 ICO。

小結

說到現代影象格式，AVIF 和 WebP 都有很多可取之處。

AVIF 在質量和速度方面都非常出色，因此在需要令人驚歎的視覺效果和完美的載入時，它是最理想的格式。

但這並不能忽視 WebP 的價值，它的價值在於其多功能性、完美的壓縮與質量平衡以及全球認可。

雖然我們不喜歡用看情況這句老話……但在 AVIF 和 WebP 之間做出選擇確實取決於您網站的需求和您的偏好！