WebPで解決

WEBで使う画像として最適だと言われたWebP。
私のサイトにある画像はすべてWebPに置き換えました。

このWebPは、つい先日出てきたばかりと記憶していますが、おじさんの時間感覚なんでしょうね。
Wikipediaには2010年に登場とありました。

🔗 WebP - Wikipedia

AVIF

颯爽と登場

今度は新たな規格としてAVIFというものが登場しました。
WebPを上回る画像圧縮率を誇り、その他にもアニメーション画像にも対応していたりします。

2019年に規格が定まったとWikipediaにありました。

🔗 AVIF - Wikipedia

2024年1月、AVIFが主要ブラウザで対応

大きなインパクトですね。
AVIFが主流になる道筋ができあがったように感じます。

うちのサイトもAVIFにしようかな・・・。

対応アプリ

Photoshopの標準機能ではAVIFの出力に対応していないのね。
Gimpで対処しましょうかね。
一括で変換するなら、ImageMagickとかのツールかな。

サンプル画像

画像は横400px、縦711pxのものです。
元画像のJPEG(表の左)を使って、GimpでWebPとAVIFに出力しました。

品質70

形式JPEGWebPAVIF
画像
JPEG
WebP70
AVIF70
品質1007070
サイズ205KB25KB24KB

品質50

形式JPEGWebPAVIF
画像
JPEG
WebP50
AVIF50
品質1005050
サイズ205KB20KB19KB

所感

WebPとAVIFの違いがわかりませんね。
見た目も容量ほぼ同じなので、どちらでも好きな方でって感じ。
画像の大きさが変わってくると、また違うのかな。

結論

まじめに検証されているサイトで確認しよう。