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

形式 JPEG WebP AVIF
画像 JPEG WebP70 AVIF70
品質 100 70 70
サイズ 205KB 25KB 24KB

品質50

形式 JPEG WebP AVIF
画像 JPEG WebP50 AVIF50
品質 100 50 50
サイズ 205KB 20KB 19KB

所感

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

結論

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