江山代有才人出,WebP 和 AVIF 都是這幾年新開發的圖像檔案格式,目標是取代已獨領風騷許久的 JPEG、PNG 和動畫 GIF等舊的圖檔格式。因為這些舊的圖檔格式,早在網路時代就有之,它們的圖片壓縮比率不高,在網路上傳輸自然比較慢,並且會有圖像失真的缺點。因此推出這兩個新的圖像格式取而代之,以加快圖像在網路上的傳送,並提高圖像的壓縮品質。

關於 WebP 已經在《Google WebP 一統江湖?》貼文裡介紹過。而 AVIF(AV1 Image Format,詳見 AVIF 維基百科)是由開放媒體聯盟( Alliance for Open Media )所開發,是一種近期(2020年)新推出的影像編碼格式,能支援有損壓縮格式(JPEG),以及無損壓縮格式(PNG),檔案大小可因應使用者需求而調整。此外,它還支援透明背景、HDR,甚至可以支援動畫,是 JPEG 和 PNG 等標準圖像格式的最佳替代方案。

既然新一代的圖像檔案格式,是因應網路時代而生,當然要能夠在網路瀏覽器上顯示這些新的圖檔內容。Google Chrome 最早支援這兩款新的檔案格式,而微軟 Edge 雖然跟 Chrome 一樣是系出同門,但直到 2024年才加入 AVIF 格式的支援。至於 Apple Safari 14 直到 2020年後半才支援 WebP 格式,而 AVIF 格式則等到 iOS 16 的 Safari 16(2022)才終於支援。
知名的 WordPress 部落格軟體和內容管理系統,從 5.8 版(2021 年)起原生支援 WebP 圖片,而支援 AVIF 圖片格式,則是等到晚近 2024 年的 6.5 版起才開始支援。主要是 WordPress 植基於 PHP 語言,該電腦語言也是在 PHP 8.1 起(2021 年底)才提供 AVIF 與 WebP 的支援。
在 2025 年終於等到各家瀏覽器和網站應用,皆已陸續到位和支援之後,接著來比較 WebP 與 AVIF,看兩者之間的優缺點。
WebP | AVIF | |
壓縮比率 | 壓縮效果好,檔案小 | 壓效果更好,檔案最小 |
影像品質 | 非常好,不支援 HDR | 非常好,支持 HDR |
色彩範圍 | 中等 | 廣泛 |
編碼速度 | 較快 | 慢些 |
瀏覽器支持 | 廣泛 | 陸續增加中 |
如果在意檔案大小與獲得最高的質量,尤其是對於 HDR 或透明影像,AVIF 是最佳選擇。如果在意檔案載入速度,則可考慮使用 WebP 格式。整體而言,後起之秀的 AVIF 格式,有後來居上的技術優勢。
此外,最近 Adobe Photoshop(26.8 起)終於支援直接存取 AVIF 檔案的功能,不需要透過 Camera Raw 濾鏡 的轉檔功能,來轉存 AVIF 圖檔。可參考《Photoshop 將圖檔轉存成 .AVIF 的方法教學》的說明,而 Photoshop 23.2 起就已支援 WebP 圖檔格式。