AVIF是一種新興的文件格式，本文撰寫時它已經在Microsoft Edge中獲得了支持，從而實現了顯著的瀏覽器支持。

我們已經不再處于技術的黑暗時代，大多數大型網站平臺通常支持最新版本的瀏覽器及其一年前的版本。你可以開始使用AVIF，并在2024年底之前使用WebP作為回退格式（在此之前回退格式是必要的）。

這意味著什么？

你現在可以主要使用AVIF作為柵格圖像的默認格式，因為它基本上取代了許多常見的JPEG用法。

為什么選擇AVIF而不是JPEG和WebP？

• 壓縮效率：比JPEG和WebP等格式具有更高的壓縮比，同時保留高圖像質量。
• 色深：支持8位、10位、12位和16位等廣泛的色深。
• 廣色域和HDR支持：AVIF支持廣泛的顏色范圍和高動態范圍（HDR），使圖像更生動逼真，非常適合需要精確顏色和細節的應用，如專業攝影和媒體內容。
• 有損和無損壓縮：AVIF的無損壓縮效果遠優于壓縮的位圖和PNG。
• 透明通道支持：類似于PNG，可以存儲半透明圖像，但壓縮效果更好。
• 基于AV1：AV1是一種由開放媒體聯盟開發的免版稅編解碼器，基于Google的VP9編碼。這意味著它將廣泛采用，并且相比其他新興圖像格式更少爭議。
• 主流瀏覽器和廣泛平臺支持。
• 減少帶寬和更快的加載時間：更小的文件意味著用戶加載速度更快。

缺點

計算密集型壓縮：通常，AVIF壓縮比舊的圖像格式如JPEG更具計算密集性，但它通常實現了更高效的壓縮效果。

有多小？

開放媒體聯盟非常興奮地聲稱：

“圖像可以比相似視覺質量的JPEG小多達十倍。”

此外，

“AVIF可以實現40%到90%的壓縮。”

我們已經使用AVIF大約4年了，根據經驗，壓縮的大多數圖像大約是等效質量JPEG輸出圖像大小的60%。這仍然令人驚嘆。

因此，AVIF涵蓋了除以下情況之外的大多數圖像場景：

• 矢量圖：SVG和SVG圖像很好地涵蓋了這一點。
• 矢量動畫：同樣，SVG在這里表現也不錯，盡管在渲染質量方面還有提升空間。

后端編碼/解碼

如果在你的首選后端語言中找不到支持AVIF的軟件庫，可以封裝libavif，官方的AOMedia編碼器/解碼器。或者，如果你有勇氣，可以將其轉換為本地支持。

GitHub - AOMediaCodec/libavif: libavif - 用于編碼和解碼.avif文件的庫

以下是我在GitHub上發現的一些庫：

• Node.js: https://github.com/lovell/sharp
• PHP: https://github.com/flyimg/flyimg
• Go: https://github.com/webp-sh/webp_server_go

何時不使用AVIF

這真的取決于圖像的動態和復雜性，但通常：

• 無損矢量/非真實動畫：這取決于具體情況（唉）。
• 在某些“罕見”情況下，當比較質量/壓縮比時，WebP甚至JPEG可能勝過AVIF。

作為經驗法則，AVIF在優化寫實圖像方面通常表現突出。個人認為它在其他圖像如圖表和矢量藝術中也相當占優勢。

支持舊版瀏覽器

想象一下，有人剛從長假回來，還沒有更新他們的瀏覽器。

如果你想在本文撰寫時開始使用AVIF，請使用srcset或 <picture><source>，以AVIF為主，回退到舊的圖像格式如WebP或JPEG。

如果從本文寫作時起Edge已經更新了3個或更多版本，你就可以只使用src。

動畫

動畫AVIF示例:https://colinbendell.github.io/webperf/animated-gif-decode/avif.html

雖然這略微超出了本文的范圍，但正如所提到的，AVIF可以像APNG一樣用于動畫。

這兩種格式都遠優于GIF，你應該考慮它們作為替代品，因為它們有完整的瀏覽器支持，而GIF作為一種舊的動畫圖像格式，其壓縮效果較差。

話雖如此，在電子郵件支持方面要謹慎，因為那也是一個舊的、糟糕的系統，可能不會一致地支持這些新格式，請務必檢查。

結論

盡量避免比較圖像格式和壓縮結果的優劣。事實上，所有的無損編解碼器都有代價；這是一個權衡問題。

你可能不喜歡特定圖像偽影的樣式，但如果這意味著某人在火車上或在延遲較差的情況下可以更快地加載你的網站，作為開發者你也需要做出妥協。

最終目標是在合理范圍內向用戶提供盡可能小的負載，無論哪種格式被證明更優化。

在我看來，新圖像格式只是構建更好產品、提高用戶體驗的工具，而不是競爭偏好的問題。