前言
在現有的大環境下，越來越注重使用者體驗，是以對圖檔庫的要求也日益攀升。從成本的角度來看，使用 AVIF 格式可以節省大量的網絡帶寬和存儲空間，減少網站加載時間，可以改善使用者體驗，進而提高網站的效率和收益，節約大量的費用。
AVIF 的優點在于它可以提供更好的圖像品質和更小的檔案大小。與 JPEG 相比，AVIF 可以将檔案大小減少50%以上，同時保持相同的圖像品質。這是因為AVIF使用了更先進的壓縮算法，包括可變長度編碼（VLC）、幀間預測和深度學習等技術。
它還支援高動态範圍（HDR）和廣色域（WCG）圖像，這意味着它可以呈現更真實的顔色和更明亮的亮度。這對于需要高品質圖像的應用程式非常重要，例如醫學成像、衛星圖像和藝術品複制等。并且 AVIF 還具有廣泛的相容性。它可以在各種裝置和平台上使用，包括桌面、移動和Web。此外，AVIF 還可以與現有的圖像格式進行相容，例如 JPEG、PNG 和 WebP 等。
1.AVIF圖檔格式的壓縮對比
AVIF 是基于 AV1 的新圖像格式，使用 HEIF 作為容器（和Apple的HEVC一樣）和 AV1 幀，壓縮品質還是非常高的。
由上圖可見，同樣一張圖檔在AVIF和JPG兩種格式下，左側的AVIF壓縮到18kb的圖像顯示還是正常的，但是右側的JPG格式下壓縮到相同大小之後，就變得非常模糊，馬賽克的感覺就很強烈。
綜上圖檔可見。AVIF壓縮的大小是最小的，然而它的清晰度卻是最好的。肉眼可見幾乎沒有什麼太大的模糊，JPEG在壓縮到20kb的時候，整個圖檔已經糊得不忍直視了，肉眼可見8x8的DCT矩陣，高頻的車身部分還好一些。低頻的道路部分已經完全不能看了，就連WebP壓縮之後馬路中間的位置也有了模糊，并且AVIF的大小也是最小的。
另外，AVIF不僅支援标準動态範圍（SDR）圖像，還支援高動态範圍（HDR）和寬色域（WCG）。它可以存儲單個圖像和圖像序列。AVIF是符合HEIF标準的格式。
更多圖檔示例可見 https://avif.io/
2.現有的圖檔格式都有哪些
2.1
JPEG
标準JPEG：1992年正式通過，是“資訊技術連續色調靜止圖像的數字壓縮編碼”，該格式特點是：由上而下依序顯示圖像，直到圖像資料全部下載下傳完畢，才能看到圖像全貌。
漸進式JPEG：使用過ps的同學，在儲存“存儲為web所用格式”時候，有一個勾選連續勾選後就是漸進式JPEG圖檔。漸進式JPGE圖檔可以在沒有下載下傳完畢就可以看到最終圖像的大緻輪廓，一定程度上可以提升使用者體驗。自持壓縮，可以自定義，檔案尺寸相對較小，下載下傳速度會相對快些，但不是所有JPEG圖檔都是用于網絡圖檔顯示。也是因為他的特點是可壓縮，尺寸小，也相對不适宜用該格式來顯示高清晰度的圖像。
2.2
JPEG 2000
基于離散小波變換（DWT）的JPEG 2000格式是2000年JPEG的繼承者。它帶來了空間可伸縮性、感興趣區域編碼、支援比特深度範圍、顔色平面數目靈活、無損編碼等一系列附加特性，随着運動的擴充，2004年被公認為數字電影的視訊編碼标準。但并沒有得到很好的市場推廣（對比Google大力推崇的WebP、蘋果IOS系統支援的 HEVC）。JPEG2000在數字影院、指紋鑒别等小範圍内流行，但明顯缺乏更加強大、大衆化、商業化的軟體生态支援，故而并沒有實作真正的落地普及。
2.3
WebP
WebP 源于VP8，是Google 2010年開源出來的圖像編解碼算法，可以說是“含着金湯匙出生”，YouTube、Gmail、Google Play均應用WebP圖檔格式。2018年之後，浏覽器Edge、Firefox也宣布支援WebP格式。但就目前來說，WebP仍隻被看作PNG更高效快捷的替代方案，而且Google的一些非開源的技術總是能神奇地阻礙圖檔的分享。
2.4
HEVC
HEVC是AVC(H.264)的後繼産品，性能優秀，你可以在Apple裝置上将HEIF（HEIF是存儲HEVC編碼的靜态圖像的容器）玩出各種花樣。可惜的是，這支大佬的“獨苗”存在專利費用。
3.AVIF圖像格式轉換
- 分享一個線上轉換AVIF圖像格式的工具
https://convertio.co/zh/formats/avif/
https://avif.io/
可以把AVIF轉換成JPG，PNG格式，也可以把JPG，PNG轉換成AVIF格式，畢竟AVIF編碼都是開源的。
- 使用指令行工具轉換，指令行工具轉換圖像到AVIF，需要Node.js 14.15.0+
npm install avif
Options:
--input Input file name(s), supports globs/wildcards
[string] [default: "*.{jpg,jpeg,tif,tiff,webp,png,gif,svg}"]
--output Output directory, default is same directory as input
[string] [default: ""]
--quality Quality vs file size, 1 (lowest/smallest) to 100
(highest/largest) [number] [default: 50]
--effort CPU effort vs file size, 0 (fastest/largest) to 9
(slowest/smallest) [number] [default: 4]
--lossless Use lossless compression [boolean] [default: false]
--chroma-subsampling Set to '4:2:0' to use chroma subsampling
[string] [choices: "4:2:0", "4:4:4"] [default: "4:4:4"]
--overwrite Allow existing output files to be overwritten
[boolean] [default: false]
--append-ext Append .avif to the file name instead of replacing
the current extension (foo.jpg => foo.jpg.avif)
[boolean] [default: false]
--verbose Write progress to stdout [boolean] [default: false]
-h, --help Show help [boolean]
--version Show version number [boolean]
Examples：
npx avif --input="./imgs/*" --output="./output/" --verbose
npx avif --input="images/*.*" --effort=0 --quality=30
npx avif --input="**/*.{jpg,jpeg}" --output="/another/path" --overwrite 其中 imgs/ 是輸入檔案夾，output/ 是輸出檔案夾。
4.在項目中使用AVIF
一、可以使用在用戶端上提供一個優雅降級的方案
<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>
二、伺服器後端相容方案
因浏覽器會把所支援的圖檔格式加“Accept”請求頭上，進而在伺服器後端用“Accept”請求頭來判斷終端浏覽器是否支援avif。是以來說需要服務端按着上面邏輯來是确認支不支援，支援就響應avif圖檔，不支援就響應原格式圖檔。存在的問題是，CDN 廠商不一定支援。
三、web中使用JS進行解析
體驗項目 AVIF，它依賴service worker的請求攔截特性，當頁面發出fetch操作時，它可以将請求攔截住，然後給出自己的響應，這樣就能在請求完AVIF格式的圖檔以後，在service worker當中調用解碼器，将圖檔轉碼。同時，因為是運作在service worker線程當中，解碼操作并不會阻塞UI線程。
另外，由于AVIF是基于AV1視訊編碼的，Chrome等浏覽器在很早之前的版本就内置了AV1的解碼器，但是直到最近才支援AVIF的解析。
是以實際上在内置了原生解碼器的浏覽器版本裡面，我們就不需要使用這個polyfill實作的JS版本解碼器了，可以直接使用效率更高的原生解碼器。
npm install avif.js
// 下面代碼放到reg.js中，然後把avif-sw.js放在web伺服器根目錄
require("avif.js").register("/avif-sw.js");
<body>
<!-- 注冊worker -->
<script src="reg.js"></script>
<!-- 使用IMG标簽嵌入AVIF圖像 -->
<img src="image.avif">
<!-- 或者通過CSS屬性 -->
<div style="background: url(image2.avif)"></div>
</body> ► 優點：
1.小，可選依賴項，壓縮後小于4kb
2.友善，直接引入即可。JS會自動攔截AVIF fetch請求
3.快，如果浏覽器支援，就使用本機解碼器，會相當快
► 支援程度（引自官方）
原生編碼支援：
Chrome Desktop 70+
Firefox 63+ (media.av1.enabled需要激活)
Firefox for Android 64+ (media.av1.enabled 和 media.av1.use-dav1d 需要激活)
Edge 18+ (AV1 Video Extension需要安裝)
Bromite 71+
使用AV1 polyfill：
Chrome 57+
Firefox 53+
Edge 17+
Safari 11+
5.案例
目前 B 站用戶端已經大量在使用 AVIF 格式的圖檔：
随着移動端裝置性能的不斷提升和網絡帶寬的增大，圖像格式的選擇也變得越來越重要。在這種情況下，AVIF格式作為一種新興的圖像壓縮格式，具有更好的壓縮率和圖像品質，可以在保證圖檔清晰度的同時，減小圖檔的檔案大小，提高網頁的加載速度。例如B站 Web 端請求中，也約有一半的浏覽器不支援AVIF格式，主要是 Edge 浏覽器。為了相容這部分使用者，B站也使用了上述第一種優雅降級方案。
不過，目前在 React Native 項目中，AVIF 格式的圖檔還不受支援，這可能會對移動端應用的性能和使用者體驗産生一定的影響。是以，我們需要考慮在 RN 中對 AVIF 圖檔進行有效的支援。
為了實作這個目标，我們可以嘗試以下一些方案：
- 等待RN更新：我們可以等待React Native官方對AVIF格式進行支援，這需要等待RN更新。但是，這可能需要一些時間，因為RN的更新周期較長。
- 使用現有的第三方庫：我們可以使用現有的第三方庫，例如 react-native-fast-image 等，這些庫可能已經支援了AVIF格式的圖檔。
- 自己實作對AVIF格式的支援：我們也可以自己實作對AVIF格式的支援，我們團隊下一階段會進行相應的開發和測試。
- 總之，對于RN項目中的AVIF圖檔支援，我們需要考慮多種方案，并根據實際情況進行選擇。同時，我們也會關注技術的發展和趨勢，及時調整我們的技術方向和決策
6.思考
當然，在項目中引入AVIF之前，需要考慮一下幾點：
► 在相容性方面：
在引入 AVIF 之前，評估現有業務中所使用的圖檔格式，并确定哪些圖檔可以被 AVIF 替換。在評估中考慮的因素包括：圖檔類型、圖檔大小、使用場景、壓縮品質和壓縮率等。
AVIF 目前在移動端的支援程度夠不夠完善，确定需要支援的移動端版本型号，硬體等，以便在決定是否使用 AVIF 時考慮到相容性的問題。
► 在性能方面
引入 AVIF 後，需要進行性能和效果的評估，以確定引入 AVIF 後能夠滿足業務需求。這些評估可以包括：頁面加載速度、圖檔渲染速度、記憶體占用率、CPU占用率、圖像品質和檔案大小等。再确定哪些業務和格式使用 AVIF 的圖檔和支援的系統版本，可以逐漸引入 AVIF。
► 在工程化方面
考慮對圖檔的線上解碼還是離線解碼，及項目的 webpack 等打包工具也需要做相應的打包支援和在項目中 CSS 引入圖檔的路徑問題，相應的工程化工作也已經在建構中。
另外我們團隊将會進行相應的開發和測試，讓 React Native 更好地支援 AVIF 格式的圖檔，這将為移動端應用的開發和優化帶來更多的可能性和機會。我們将密切關注 AVIF 技術的發展和應用，及時更新我們的技術和方案，并分享給大家。同時，我們也歡迎大家積極參與讨論和貢獻，共同推動移動端應用技術的發展和進步。請大家持續關注我們的微信公衆号，了解更多關于移動端技術和應用的最新動态和實踐經驗。
總的來說，AVIF是一種非常有前途的圖像壓縮格式，它可以提供更好的圖像品質和更小的檔案大小。AVIF格式明顯的壓縮率優勢，豐富的特性支援以及AVIF格式支援圖檔的品質優化，可以保證圖檔的品質同時節省更多的容量，開源，包括谷歌，蘋果，微軟在内的大公司都在工作組中，未來可期。随着越來越多的應用程式和平台開始支援AVIF，它将成為未來圖像壓縮的主流格式之一。
參考
https://jakearchibald.com/2020/avif-has-landed/
https://www.ctrl.blog/entry/webp-avif-comparison.html
https://github.com/Kagami/avif.js
https://android-developers.googleblog.com/2021/02/android-12-dp1.html
作者簡介
石欣
■ C端及中台産研中心-用戶端研發部-前端團隊-C端組
■ 2018年加入汽車之家, 目前主要負責APP端的搜尋業務前端開發工作。
來源:微信公衆号:之家技術
出處:https://mp.weixin.qq.com/s/ebw50lXy-E23ARqp3drreA