為什么在2024年應該使用AVIF而不是JPEG、WebP、PNG和GIF

作者：dev 2024-06-24 00:00:00

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

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

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

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

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

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

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

此外，

“AVIF可以實現(xiàn)40%到90%的壓縮。”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

責任編輯：姜華來源：大遷世界