已有的圖片格式為什么不行
除了JPG，還有其他幾種為人熟知的圖片編碼格式，如、WebP與HEVC。
但均有不足，例如：
AVIF的優勢
我覺得AVIF圖片格式有下面幾個優點：
一統天下；壓縮溜溜溜；開源JS可解析；
AVIF由開源組織開發，、與Apple均是該組織的成員。看到沒，幾個大佬都在，因此是一統天下的圖片格式。
其他優點可以專門開一個小節講下。
add on 翌日
from微博 @紫云妃
avif 圖片支持在中對原始圖片進行一些變形操作，有旋轉（irot），鏡像（imr）和裁切（clap）三種，尤其是裁切挺神奇的，也就是客戶端看到的圖可能只是一張大圖的一部分，明明完整圖片已經下載下來了，但你就是看不到其它部分。
三、AVIF圖片格式的壓縮對比
AVIF是基于AV1的新圖像格式，使用HEIF作為容器（和Apple的HEVC一樣）和AV1幀，壓縮質量還真是嘆為觀止。
下面幾張圖是官方提供的：
這是原始圖，無損PNG，近乎700K：
這是AVIF的效果圖，大小@ 19,788字節：
可以看到，在同樣尺寸大小范圍內，JPEG格式的圖形已經糊成漿糊一樣，大片的明顯的色塊色條就像是斑駁的老建筑，無法直視。但是，AVIF格式的圖形顯示卻非常OK，體積也很小。
此時的AVIF相比無損PNG有約59倍的壓縮性能（原始圖像尺寸768×512，因此無損字節數是 ，現在壓縮到20k，壓縮比59倍）。
如果我們提高以下圖片的壓縮質量，不要壓縮那么狠，再看下JPG圖片和AVIF圖片效果，都是無損PNG截圖效果，以便準確對比。
JPEG 444的效果圖，大小@ 40,276字節：
這是AVIF 444的效果圖，大小@ 39,819字節：
可以看到google 新圖片格式，JPG圖片的天空有很多明顯顏色滲漏，視覺上一點也不平滑，而AVIF圖像與原始圖像視覺效果相當，這里的壓縮系數為29倍。
官方還提供了很多其他對比圖，還有對比圖標和數據，這里就不一一展示了，有興趣可以去文章一開始提到的博文地址查閱。
總而言之一句話，AVIF圖片格式壓縮很棒，件大小比JPEG小10倍，具有相同的圖像質量。
另外，AVIF不僅支持標準動態范圍（SDR）圖像，還支持高動態范圍（HDR）和寬色域（WCG）。它可以存儲單個圖像和圖像序列。
AVIF是符合HEIF標準的格式。
種種跡象表明，這一次的AVIF是來真的了。
四、AVIF圖像格式轉換
分享一個在線轉換AVIF圖像格式的工具：
可以把AVIF轉換成JPG，PNG格式，也可以把JPG，PNG轉換成AVIF格式google 新圖片格式，畢竟AVIF編碼都是開源的。
例如下面這個JPG轉AVIF的操作界面截圖：
如果你只是想找一些AVIF圖像做一些測試之類，這里有圖像資源。
更新于2021-07-26
上面地址可能要收費，使用這個在線平臺吧，任意格式轉avif，免費的：
更新于2022-08-01
現在已經可以命令行工具轉換了（項目地址點擊這里）：
npm install avif
然后運行：
npx avif --input="./imgs/*" --output="./output/" --verbose
其中 imgs/ 是輸入文件夾，/ 是輸出文件夾。
五、在項目中使用AVIF –
OK，現在有了AVIF圖片，如何在項目中使用呢，都沒有瀏覽器支持，豈不是用個空大屁，哦，非也非也，因為AVIF項目是開源的，因此，web中也是可以使用JS進行解析的。
有請avif 項目：
demo體驗地址：
優點支持瀏覽器
原生編碼支持：
使用AV1 ：
使用
npm install avif.js
// 下面代碼放到reg.js中，然后把avif-sw.js放在web服務器根目錄
require("avif.js").register("/avif-sw.js");
<script src="reg.js"></script>by zhangxinxu(.com)
其他
實際上，理論上瀏覽器不支持 也是可以解析AVIF，讓瀏覽器顯示的，問題就是fetch avif格式文件不方便，此腳本日后可能會進行支持。
六、結語
為啥這些標準啊，規則啊，都是制定的呢？
我要琢磨琢磨是不是國內也可以指定一些標準，底層的駕馭不了，應用層的標準可以試一試。
可以放在心里面盤一盤，以后說不定有機會的。
當下還是要不斷積累。
好，本文就說這么多，簡單介紹下，大家也可以在自己團隊內部做個分享啥的，看看能不能積累個最佳實踐之類。
本文為原創文章，歡迎分享，勿全文轉載，如果實在喜歡，可收藏，永不過期，且會及時更新知識點及修正錯誤，閱讀體驗也更好。