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

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

這意味著什么？

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

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

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

缺點

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

有多?。?/span>

開放媒體聯(lián)盟非常興奮地聲稱：

“圖像可以比相似視覺質(zhì)量的JPEG小多達十倍?！?/p>

此外，

“AVIF可以實現(xiàn)40%到90%的壓縮?！?/p>

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

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

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

后端編碼/解碼

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

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

以下是我在GitHub上發(fā)現(xiàn)的一些庫：

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

何時不使用AVIF

這真的取決于圖像的動態(tài)和復(fù)雜性，但通常：

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

作為經(jīng)驗法則，AVIF在優(yōu)化寫實圖像方面通常表現(xiàn)突出。個人認為它在其他圖像如圖表和矢量藝術(shù)中也相當占優(yōu)勢。

支持舊版瀏覽器

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

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

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

動畫

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

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

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

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

結(jié)論

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

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

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

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