モダンな主要ブラウザが次世代画像フォーマットAVIFをサポート

Microsoft EdgeがVer.121（2024/1/22週にリリース予定。）で次世代画像フォーマットAVIFをサポートするようなので、これでモダンな主要ブラウザは全てAVIFをサポートすることになりますね。

JPEG、GIF、PNGは90年代生まれ

現在のインターネットで使われている主な画像はJPEG、GIF、PNG（あとはSVG辺り。）といったフォーマットになりますが、これらはかなり古いフォーマットでいずれも90年代のものです。

これらに対し、次世代と言われているフォーマットがWebPやAVIFになります。

モダンな画像フォーマットとしては他にiPhone等がサポートしているHEIF（2013年）がありますが、現時点ではSafari以外は対応していません。
（caniuse.comでも説明されているように、ライセンス費用が掛かるため普及の可能性は低いかなと。）

WebPやAVIFの利点

写真はJPEG、シンプルなイラストのような色数の少ない画像はGIF、アルファチャンネル（透過度）が必要ならPNG、といったフォーマットの使い分けもWebPやAVIFなら不要となり、また、ファイルサイズもかなり圧縮できるのがメリットですね。PageSpeed InsightsでWebページの表示速度を測定すると、WebPやAVIFを使った方が良いと勧められます。

WebPやAVIFを使う方法

WebPはPhotoshopがサポートしているので普通に保存できますが、AVIFは未サポートなので現状ではPhotoshopにプラグインを入れる必要があります。今後は、プラグインを入れなくても良いようにAVIFをデフォルトでサポートして欲しいのと、WebPも「書き出し」や「Web用に保存（従来）」で保存できるようにして欲しいというのはありますね。

フロントエンド側でビルド時に画像を変換するのは処理時間の問題や、無駄に複数形式の画像ファイルを管理しないといけないのが嫌なので、最初からPhotoshop等で画像作成時にWebPやAVIFで書き出したいというのはあります。

オンライン変換で問題なければ、Googleが提供しているSquooshを使うのが一番簡単でしょうか。