最初に理由から言うと
webpと比較すると画像変換にかなり時間がかかるためです
まずは各ブラウザの対応状況
https://caniuse.com/avif
iOS16からsafariもavifに対応したことによって、ほとんどのブラウザでavifが使えるようになりました
実際の比較
比較に使った画像はこれです
1920x1280のjpegで315kbあります
オンデマンドで画像変換及びリサイズしている環境は以下です
AWSのCloudFront+Lambda@Edge
nodejsのsharpで変換
変換時の引数は基本デフォルトです
sharpのバージョン:0.29.3
Lambdaのメモリ:1536kb
サイズによる比較
sharpのqualityはデフォルトなのでwebpは80、avifは50です
やはりavifはファイルサイズはかなり小さくなっています
しかし画像変換にかかる時間がかなり伸びています
画像のレスポンスで7秒かかるのはちょっと厳しいです
クオリティによる変移
デフォルト値から10まで下げて比較しています
クオリティが高いほど差が広がることがわかります
【おまけ】クオリティによるファイルサイズの変移
クオリティが高くなるほど差が少なくなっていくことがわかります
最後に
sharpのバージョンアップや、別のライブラリだとまたちょっと変わるのかもしれませんが
自分はavifの対応は一旦様子見かなと思いました
もしくはオンデマンドではなくバッチ等で変換するのであれば有りかなとは思いました