小巧玲瓏的AVIF，你的網頁圖片換新裝！

在現有的大環境下，越來越註重用戶體驗，因此對圖片庫的要求也日益攀升。從成本的角度來看，使用 AVIF 格式可以節省大量的網路帶寬和存儲空間，減少網站載入時間，可以改善用戶體驗，進而提高網站的效率和收益，節約大量的費用。

AVIF 的優點在於它可以提供更好的圖像質量和更小的文件大小。與 JPEG 相比，AVIF 可以將文件大小減少50%以上，同時保持相同的圖像質量。這是因為AVIF使用了更先進的壓縮演算法，包括可變長度編碼（VLC）、幀間預測和深度學習等技術。

它還支持高動態範圍（HDR）和廣色域（WCG）圖像，這意味著它可以呈現更真實的顏色和更明亮的亮度。這對於需要高質量圖像的應用程式非常重要，例如醫學成像、衛星圖像和藝術品複製等。並且 AVIF 還具有廣泛的相容性。它可以在各種設備和平臺上使用，包括桌面、移動和Web。此外，AVIF 還可以與現有的圖像格式進行相容，例如 JPEG、PNG 和 WebP 等。

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/

標準JPEG：1992年正式通過，是“信息技術連續色調靜止圖像的數字壓縮編碼”，該格式特點是：由上而下依序顯示圖像，直到圖像資料全部下載完畢，才能看到圖像全貌。

漸進式JPEG：使用過ps的同學，在保存“存儲為web所用格式”時候，有一個勾選連續勾選後就是漸進式JPEG圖片。漸進式JPGE圖片可以在沒有下載完畢就可以看到最終圖像的大致輪廓，一定程度上可以提升用戶體驗。自持壓縮，可以自定義，文件尺寸相對較小，下載速度會相對快些，但不是所有JPEG圖片都是用於網路圖片顯示。也是因為他的特點是可壓縮，尺寸小，也相對不適宜用該格式來顯示高清晰度的圖像。

基於離散小波變換（DWT）的JPEG 2000格式是2000年JPEG的繼承者。它帶來了空間可伸縮性、感興趣區域編碼、支持比特深度範圍、顏色平面數目靈活、無損編碼等一系列附加特性，隨著運動的擴展，2004年被公認為數字電影的視頻編碼標準。但並沒有得到很好的市場推廣（對比Google大力推崇的WebP、蘋果IOS系統支持的 HEVC）。JPEG2000在數字影院、指紋鑒別等小範圍內流行，但明顯缺乏更加強大、大眾化、商業化的軟體生態支持，故而並沒有實現真正的落地普及。

WebP 源於VP8，是Google 2010年開源出來的圖像編解碼演算法，可以說是“含著金湯匙出生”，YouTube、Gmail、Google Play均應用WebP圖片格式。2018年之後，瀏覽器Edge、Firefox也宣佈支持WebP格式。但就目前來說，WebP仍只被看作PNG更高效快捷的替代方案，而且Google的一些非開源的技術總是能神奇地阻礙圖片的分享。

HEVC是AVC(H.264)的後繼產品，性能優秀，你可以在Apple設備上將HEIF（HEIF是存儲HEVC編碼的靜態圖像的容器）玩出各種花樣。可惜的是，這支大佬的“獨苗”存在專利費用。

• 分享一個線上轉換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/ 是輸出文件夾。 

一、可以使用在客戶端上提供一個優雅降級的方案

<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+

目前 B 站客戶端已經大量在使用 AVIF 格式的圖片：

當然，在項目中引入AVIF之前，需要考慮一下幾點：

► 在相容性方面：

在引入 AVIF 之前，評估現有業務中所使用的圖片格式，並確定哪些圖片可以被 AVIF 替換。在評估中考慮的因素包括：圖片類型、圖片大小、使用場景、壓縮質量和壓縮率等。

AVIF 目前在移動端的支持程度夠不夠完善，確定需要支持的移動端版本型號，硬體等，以便在決定是否使用 AVIF 時考慮到相容性的問題。

► 在性能方面

引入 AVIF 後，需要進行性能和效果的評估，以確保引入 AVIF 後能夠滿足業務需求。這些評估可以包括：頁面載入速度、圖片渲染速度、記憶體占用率、CPU占用率、圖像質量和文件大小等。再確定哪些業務和格式使用 AVIF 的圖片和支持的系統版本，可以逐步引入 AVIF。

► 在工程化方面

考慮對圖片的線上解碼還是離線解碼，及項目的 webpack 等打包工具也需要做相應的打包支持和在項目中 CSS 引入圖片的路徑問題，相應的工程化工作也已經在構建中。

 另外我們團隊將會進行相應的開發和測試，讓 React Native 更好地支持 AVIF 格式的圖片，這將為移動端應用的開發和優化帶來更多的可能性和機會。我們將密切關註 AVIF 技術的發展和應用，及時更新我們的技術和方案，並分享給大家。同時，我們也歡迎大家積极參与討論和貢獻，共同推動移動端應用技術的發展和進步。請大家持續關註我們的微信公眾號，瞭解更多關於移動端技術和應用的最新動態和實踐經驗。

總的來說，AVIF是一種非常有前途的圖像壓縮格式，它可以提供更好的圖像質量和更小的文件大小。AVIF格式明顯的壓縮率優勢，豐富的特性支持以及AVIF格式支持圖片的質量優化，可以保證圖片的質量同時節省更多的容量，開源，包括谷歌，蘋果，微軟在內的大公司都在工作組中，未來可期。隨著越來越多的應用程式和平臺開始支持AVIF，它將成為未來圖像壓縮的主流格式之一。