2 分鐘了解下一代圖片壓縮格式 AVIF
一直以來(lái)，我們所熟知的或者運(yùn)用到 Web 應(yīng)用中的圖片格式無(wú)非就是 PNG、JPG、GIF、SVG 或者 WebP，關(guān)于這些格式我總結(jié)了 2 篇文章，感興趣的可以看看：
- jpg、gif、png和svg用于web上，我們?cè)撊绾芜x擇最合適的圖像格式
- 為你的網(wǎng)站加上 WebP 格式的圖片吧
在介紹 WebP 的時(shí)候，我們已經(jīng)知道了相比 JPG 和 PNG 來(lái)說(shuō)，WebP 已經(jīng)兼顧了高呈現(xiàn)質(zhì)量以及更小的文件體積，可以說(shuō)已經(jīng)非常優(yōu)秀了，然后還是有一群人不滿足于此，他們開發(fā)出了 AVIF 這種號(hào)稱下一代圖像壓縮格式的玩意。
這篇文章將圍繞 AVIF 是什么?對(duì)比其他圖像格式有哪些優(yōu)勢(shì)?怎么運(yùn)用?這 3 個(gè)問(wèn)題展開。
AVIF 是什么
AVIF 這種圖像格式首次是由 Netflix 這個(gè)公司在 2020年2月14號(hào)這天公布的。Netflix(奈飛)是一家流媒體影視公司，所以必然會(huì)有大量的影視海報(bào)，它們都是體積很大的大圖片。因此 Netflix 對(duì)呈現(xiàn)質(zhì)量有很高的要求，同時(shí)又希望圖片體積能盡可能的小，所以他們一直在探尋一種新的圖像格式希望能替換 JPG。
事實(shí)上，AVIF 這種圖像格式是由開放媒體聯(lián)盟(aomedia.org)與 Google、Cisco 以及 Xiph.org 合作開發(fā)出來(lái)的。這種格式被創(chuàng)建為一種開源且免版稅的圖像格式，不像 JPEG XR，它是一種壓縮非常小但需要昂貴許可才能實(shí)現(xiàn)的文件格式。
AVIF 是一種基于開源 AV1 視頻編解碼器的新型開放圖像格式。這種格式非常靈活，因?yàn)樗С秩魏螆D像編解碼器，支持有損和無(wú)損編碼，能夠使用 alpha 通道，甚至能夠存儲(chǔ)一系列動(dòng)畫幀，就像高質(zhì)量 gif 動(dòng)畫一樣。它也是最早支持 HDR 顏色的圖像格式之一，提供更高的亮度、顏色位深度和顏色色域。
與JPEG 和 WebP 的比較
國(guó)外有個(gè)程序員 Daniel Aleksandersen 寫了一個(gè)博客，然后他希望他博客的圖片盡可能小的占用網(wǎng)絡(luò)帶寬，但是他在猶豫使用什么格式的圖像會(huì)比較好，所以他決定親自探索一翻。
他使用了大于 600 張的圖片，通過(guò)將他們基于相同的 DSSIM 情況下編碼成不同格式的圖片。
然后通過(guò)對(duì)比這些大量的不同格式的圖片數(shù)據(jù)，他得到的結(jié)論是：
- 與 JPEG 相比，WebP 格式的圖片減少了 30% 的體積;
- 與 JPEG 相比，AVIF 格式的圖片減少了 50% 的體積;
也就是說(shuō) AVIF 的圖片依然比 WebP 少了將近 20% 的體積 😱。
兼容性怎么樣
既然 AVIF 有如此好的表現(xiàn)，那它的兼容性是什么樣的呢?
從上圖可以看到截止到目前 2021-02-03 為止，AVIF 的兼容性還只是做到低兼容，只被 Chrome 85、Firefox 86 及 Opera 71 以上的版本所支持，而其他的瀏覽器像 IE 或者移動(dòng)端瀏覽器都是不支持的，相信在未來(lái)可以獲得更好的支持程度。
將圖片轉(zhuǎn)成 AVIF
既然想在項(xiàng)目中使用 AVIF 格式，那就需要先有這個(gè)格式的圖片。
可以使用 Squoosh 這個(gè)在線的圖像壓縮應(yīng)用程序，可以在多種格式的圖像之間互相轉(zhuǎn)換，更厲害的是它提供了各種高級(jí)的圖像壓縮選項(xiàng)讓你選擇。
如果你不知道要配置什么壓縮選項(xiàng)，那你也可以使用這個(gè) convertio.co 在線工具進(jìn)行圖片格式轉(zhuǎn)換：
另外，如果你偏愛命令行，也可以使用官方的 AOMedia 庫(kù) libavif 對(duì) AVIF 文件進(jìn)行編碼/解碼，我這里就不嘗試了。
在 Web 開發(fā)中的應(yīng)用
盡管 AVIF 還沒有得到廣泛支持，但是我們?nèi)匀豢梢栽谠?HTML 中使用帶有
。
- <picture>
- <source srcset="img/photo.avif" type="image/avif">
- <source srcset="img/photo.webp" type="image/webp">
- <img src="img/photo.jpg" alt="Description of Photo">
- </picture>
參考文章
https://aomediacodec.github.io/av1-avif/
https://www.ctrl.blog/entry/webp-avif-comparison.html
https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/
https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4
