圖片格式-AVIF

CamilleZJ發表於2020-11-23

一、前言

開啟caniuse首頁（https://caniuse.com/)，在最新的特性這裡看到一個陌生的東西，一個名為AVIF的圖片格式，這麼名詞有意思，AV？IF？等下，我先繫個安全帶，可以了，讓我開進去看看是個什麼東東。

caniuse首頁AVIF

結果萬里江山一片紅：

我一瞬間就明白事情不簡單，這玩意不得了。

開天闢地頭一回，還沒有任何瀏覽器支援，就把一個特性放上來的，說明這廝潛力可以，未來之星，大腿務必立刻抱上。

於是我就參考相關文件，終於大致搞清楚了AVIF圖片格式…………的表面一些支援，對，就表面這點東西，什麼演算法之類，對比起，超過了我的技能範疇，講不來，講不來。

本文大量內容參考Netflix官方技術部落格“AVIF for Next-Generation Image Coding”這篇文章，原文很長，本文就取之精華簡單介紹。

二、AVIF與奈飛Netflix

AVIF這種圖片格式是Netflix這家公司在今年情人節公佈的。

Netflix是一家流媒體影視公司，必然會有大量影視海報，都是大圖片。

海報圖片

因此，Netflix對高清晰同時體積較小的圖片訴求很高，需要一種替代JPEG的方法，這種新的方法需要支援以下特性：

a）得到廣泛支援，b）具有更好的壓縮效率，c）具有更廣泛的功能集。

然後Netflix覺得AV1影像檔案格式（AVIF）很有潛力，於是決定公佈和開源。

已有的圖片格式為什麼不行

除了JPG，還有其他幾種為人熟知的圖片編碼格式，如JPEG2000、WebP與HEVC。

但均有不足，例如：

  • 基於離散小波變換（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的優勢

我覺得AVIF圖片格式有下面幾個優點：

  1. 一統天下；
  2. 壓縮溜溜溜；
  3. 開源JS可解析；

AVIF由開源組織AOMedia開發，Netflix、Google與Apple均是該組織的成員。看到沒，幾個大佬都在，因此是一統天下的圖片格式。

其他優點可以專門開一個小節講下。

add on 翌日
from微博 @紫雲妃

avif 圖片支援在metadata中對原始圖片進行一些變形操作，有旋轉（irot），映象（imr）和裁切（clap）三種，尤其是裁切挺神奇的，也就是客戶端看到的圖可能只是一張大圖的一部分，明明完整圖片已經下載下來了，但你就是看不到其它部分。

三、AVIF圖片格式的壓縮對比

AVIF是基於AV1的新影像格式，使用HEIF作為容器（和Apple的HEVC一樣）和AV1幀，壓縮質量還真是歎為觀止。

下面幾張圖是官方提供的：

這是原始圖，無損PNG，近乎700K：
原始圖

JPEG 444的效果圖，大小@ 20,429位元組：
JPEG444圖片

這是AVIF的效果圖，大小@ 19,788位元組：
AVIF444圖片

可以看到，在同樣尺寸大小範圍內，JPEG格式的圖形已經糊成漿糊一樣，大片的明顯的色塊色條就像是斑駁的老建築，無法直視。但是，AVIF格式的圖形顯示卻非常OK，體積也很小。

此時的AVIF相比無損PNG有約59倍的壓縮效能（原始影像尺寸768×512，因此無損位元組數是768x512x3 ，現在壓縮到20k，壓縮比59倍）。

如果我們提高以下圖片的壓縮質量，不要壓縮那麼狠，再看下JPG圖片和AVIF圖片效果，都是無損PNG截圖效果，以便準確對比。

JPEG 444的效果圖，大小@ 40,276位元組：
JPEG444圖片

這是AVIF 444的效果圖，大小@ 39,819位元組：
AVIF444圖片

可以看到，JPG圖片的天空有很多明顯顏色滲漏，視覺上一點也不平滑，而AVIF影像與原始影像視覺效果相當，這裡的壓縮係數為29倍。

官方還提供了很多其他對比圖，還有對比圖示和資料，這裡就不一一展示了，有興趣可以去文章一開始提到的博文地址查閱。

總而言之一句話，AVIF圖片格式壓縮很棒，件大小比JPEG小10倍，具有相同的影像質量。

另外，AVIF不僅支援標準動態範圍（SDR）影像，還支援高動態範圍（HDR）和寬色域（WCG）。它可以儲存單個影像和影像序列。

AVIF是符合HEIF標準的格式。

種種跡象表明，這一次的AVIF是來真的了。

四、AVIF影像格式轉換

分享一個線上轉換AVIF影像格式的工具：https://convertio.co/zh/formats/avif/

可以把AVIF轉換成JPG，PNG格式，也可以把JPG，PNG轉換成AVIF格式，畢竟AVIF編碼都是開源的。

例如下面這個JPG轉AVIF的操作介面截圖：

JPG轉AVIF

如果你只是想找一些AVIF影像做一些測試之類，這裡有影像資源。

五、在專案中使用AVIF – Polyfill

OK，現在有了AVIF圖片，如何在專案中使用呢，都沒有瀏覽器支援，豈不是用個空大屁，哦，非也非也，因為AVIF專案是開源的，因此，web中也是可以使用JS進行解析的。

有請avif polyfill專案：https://github.com/Kagami/avif.js

avif polyfill專案

demo體驗地址：https://kagami.github.io/avif.js/

優點

  • 小，可選依賴項，minified&gzip後小於4kb
  • 方便，直接引入即可。JS會自動攔截AVIF fetch請求
  • 快，如果瀏覽器支援，就使用本機解碼器，會相當快

支援瀏覽器

原生編碼支援：

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

使用

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)">
    by zhangxinxu(.com)
  </div>
</body>

其他

  • 需要使用HTTPS協議
  • 不支援在Firefox/Edge隱私模式視窗
  • 頁面第一次訪問需要重載入來顯示靜態資源

實際上，理論上瀏覽器不支援Service workers也是可以解析AVIF，讓瀏覽器顯示的，問題就是fetch avif格式檔案不方便，此Polyfill指令碼日後可能會進行支援。

相關文章