WordPress6.5からAVIFに対応しているが
圧縮率が高いAVIF形式にWordPress6.5から対応しています(WordPressのサポート記事)。
AVIFの普及状況を確認すると、主要ブラウザー(Chrome、Safari、Firefox、Edge)がサポートを開始してから1年以上経過しているため、WordPressで利用してもあまり問題はなさそうです。
では、当ブログでも早速利用を・・・と思いましたが、以下のようにエラーが発生し、AVIF形式の画像をアップロードすることができませんでした。
「この画像はサーバーで処理できません。JPEG または PNG に変換してからアップロードしてください。」

当方のWordPressバージョンは6.7.×のためAVIF形式に対応しているはずですが、このエラーはなぜ発生する?
WordPressのサポートページに以下の記述がありました。
Using AVIF images in WordPress
AVIF in WordPress depends on support in your web server’s image processing library (WordPress has built-in support for both Imagick and LibGD for image processing).
https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/
要するに、利用しているサーバーの画像処理ライブラリがAVIF形式に対応している必要とあります。
また、WordPressの構築言語であるPHPのマニュアルによると、AVIFはPHP8.1以降で対応可能とあります。
AVIF形式をWordPressで利用するためにはこれらの条件を充たしたサーバーを利用する必要があります。
XserverはSV16001〜のPHP8.1以降でAVIF形式に対応済み
このブログはXserverでホストされており、XserverではSV16001以降かつPHP8.1と発表されていました。
念のため当方の利用サーバーを確認するとSV15000番台のため、AVIF形式が利用できないサーバーでした。

しかしXserverは新環境にサーバー引越の形で簡単に移行できることが多いです。
今回も申し込みを行い、SV16001以降に簡単に移行することができました。

SV16001番台に移行完了後、AVIF形式が利用できるようになりました。
AVIF形式はWebP形式と比較してどのくらい縮むのか
各形式の設定によって縮小幅が変わると思うので、あくまで目安です。
品質設定を
- WebP 80
- AVIF 70
に設定して試してみました(AVIF形式のはWebPより品質設定を落としても同程度のきれいさらしいので若干AVIF形式の品質を落としています。)。
使用ソフトはMac版のImagetool+です。
以下の設定をしています。

例1 以下の画像

WebP | AVIF |
---|---|
67KB | 63KB |
AVIF形式はWebP形式に比べて約5%程度縮みました。
例2 以下の画像

WebP | AVIF |
---|---|
118KB | 63KB |
AVIF形式はWebP形式の約半分に縮みました。
例3 以下の画像

WebP | AVIF |
---|---|
125KB | 149KB |
※記載ミスではありません。AVIF形式の方が約20%サイズが大きくなりました。
まとめ
AVIF形式の方がWebP形式よりファイルサイズが小さくなることが多いですが、苦手なパターンがあるのかWebP形式よりもファイルサイズが大きくなることもありました(本記事にAVIF形式とWebP形式の画像が混在しているのはファイルサイズが小さい方を利用しているためです。)。
pngファイルからの変換で試しましたが、変換に要する時間は体感でWebP形式の2倍から3倍と遅いです。
多少のデメリットがありますが、ファイルサイズを小さくすることを優先したいので今後は積極的にAVIF形式を利用していこうと思います。