WordPress 6.5以降は、サーバー側の画像処理ライブラリも対応していればAVIFを扱えます。公式の対応条件を確認してください。AVIFの生成、配信する画像の選択、MIMEタイプの設定は別の処理です。下のプラグイン画面・費用条件は過去の記録で、今回料金は更新していません。
AVIFは写真などの容量を減らせる画像形式です。同じ画像でも形式・画質設定・内容により容量が変わるため、WebPより一定の割合で小さくなるとは限りません。元画像を残して比較し、利用者のブラウザーで表示できることを確かめて採用します。
本記事では画像をAVIF形式で表示する方法を紹介します。
AVIFの基本情報
WebPは知っているけど、AVIFは知らないという方もいらっしゃると思うので、簡単にまとめておきました。
各画像圧縮形式の比較表
画像形式は写真・文字・透過の必要性と、変換後の画質・容量を比較して選びます。
| 特徴 | AVIF | JPG | PNG | WebP |
|---|---|---|---|---|
| 圧縮率 | 非常に高い ※画像内容・画質設定による | 高い | 低い（可逆圧縮） | 高い |
| 画質 | 優れた画質を保持 | 良い（高圧縮時は画質劣化） | 高画質（劣化なし） | 良好 |
| 透過サポート | 対応 | 対応していない | 対応 | 対応 |
| アニメーション | 対応 | 対応していない | APNGで対応 | 対応 |
| ファイルサイズ | 画質設定・内容による | 中程度 | 大きい | 小さい |
| ブラウザサポート | ほとんどのモダンブラウザで対応 | ほぼすべてのブラウザで対応 | ほぼすべてのブラウザで対応 | ほとんどのモダンブラウザで対応 |
| 用途 | 次世代の高画質画像の提供 | 一般的な写真の圧縮 | 高画質が求められるグラフィック | Web向けで軽量かつ高画質 |
AVIF形式のブラウザの対応状況
対応はブラウザとOSの版に依存します。下表は過去の記録で、全環境での表示保証ではありません。対象端末で確認し、必要ならJPEGやWebPの代替画像を用意します。
主要ブラウザーの対応状況はMDNのAVIFの説明から確認できます。ブラウザー名だけでなく版・OS・アプリ内ブラウザーを含め、実際に使われる環境で画像を開いてください。対象環境で表示できない場合は、元のJPEGやWebPを使える配信構成にします。
WordPressで画像をAVIF形式で表示する方法
既にAVIF形式で書き出した画像を使う方法と、JPEG・PNGから変換する方法を分けます。
WordPressとサーバーの画像処理が対応していれば、AVIFをメディアライブラリーへアップロードして画像ブロックに選べます。既存画像を変換して自動配信する場合は、プラグイン側の生成と配信方式も確認します。
プラグインShortPixelでAVIFを生成する
プラグインShortPixelを使ってavif画像を生成します。
上級者向け設定から、下記を設定します。
Create AVIF versions of the images. Each image/thumbnail will use an additional credit.（画像のAVIFバージョンを作成します。各画像/サムネイルには追加のクレジットが必要です。」）にチェック
Deliver the next generation versions of the images in the front-end:（フロントエンドで次世代バージョンの画像を提供します）の配信設定も確認します。掲載画面の.htaccess経由はApache向けです。Nginxなど別の構成では利用できる配信方式を選び、画面名だけで同じ設定を適用しないでください。
ちなみにShortPixelは毎月100クレジットは無料で生成できます。
画像を大量にAVIFに変換するには有償になります。
.htaccessでAVIFのMIMEタイプを指定する
まずAVIFファイルの応答ヘッダーを確認します。
Content-Typeがimage/avifでない場合は、Apacheでmod_mimeと.htaccessのFileInfo設定が使えることを確認し、バックアップした.htaccessへ下記の設定を追記します。
すでにimage/avifで配信されていれば、この設定の追加は不要です。
AddTypeは既存のAVIFファイルを返すときのMIMEタイプを指定する設定です。JPEGやPNGの変換や、AVIFへの自動切り替えは行いません。Apacheでmod_mimeと該当の.htaccess設定が使える場合に限ります。すでに正しく配信されていれば追記は不要です。
<IfModule mod_mime.c>
AddType image/avif .avif
AddType image/avif-sequence .avifs
</IfModule>設定は以上です。
最後に確認しましょう。
Chromeの検証からネットワーク、画像を選択して実際に使われた画像URL、HTTPステータス、Content-Typeがimage/avifであること、画像が正常に表示されることを確認します。
設定変更前にバックアップし、1枚で生成・表示を確認してから対象を増やします。問題が出た場合は追加した配信ルールを戻し、元画像を保持した状態でキャッシュを更新します。下の表示例は書き出したAVIFのアップロードで確認したもので、ShortPixelの一括変換やApache設定変更は行っていません。
AVIFを1枚掲載した表示例
| 確認項目 | 2026年10月2日の結果 |
|---|---|
| 元画像 | WAZAの実画面を撮影したPNG：1265×889px、105,715バイト |
| 書き出したAVIF | 同じ1265×889px、100,086バイト。Pillow 12.3.0で画質90を指定 |
| アップロード後の元ファイル | HTTP 200、Content-Typeはimage/avif。取得したファイルは書き出したファイルと一致 |
| WordPressの派生画像 | 382×268px、768×540px、812×571pxのAVIFを生成 |
この1枚では容量差は約5.3%でした。以前のShortPixelの例と画像・変換条件が異なるので、同じ削減率にはなりません。形式名だけで判断せず、元画像と寸法・容量・文字の読みやすさを比較してください。
下の画像はAVIFファイルを画像ブロックとして掲載した例です。Networkで調べるときは、この画像の実際の取得URLを選びます。画像内に写っている過去の検証画面と、今回のファイルの応答を混同しないでください。
AddTypeの前後で配信ヘッダーを確認する
| 検証用Apacheの条件 | 同じAVIFファイルの応答 |
|---|---|
| AVIFの登録がない最小のMIME設定 | 200で取得できるが、Content-Typeはimage/avifではない |
| 掲載しているAddTypeを.htaccessへ追加 | HTTPSとHTTPの両方でContent-Typeがimage/avifになる |
| 追加した.htaccessを取り除く | 元のヘッダーへ戻り、ファイルのバイト列は変わらない |
| Apache付属のmime.typesにAVIFが登録されている構成 | すでに適切なContent-Typeを返せるため、重ねて追加する必要がない |
Apache 2.4.69の所有する検証環境で、同じAVIFファイルを使って設定の追加前・追加後・取り除いた後を比較しました。
HTTPSでは証明書も検証しています。
AddTypeを追加しても、返される画像ファイルの内容は変わりません。
生成や画質、ファイル容量を変える設定ではありません。
Apacheの標準MIME一覧にAVIFの登録があっても、実際に使われる一覧や上書き設定はサーバー構成によって異なります。
設置先のAVIF URLを取得してContent-Typeを確認してから判断してください。
ApacheのAddType公式資料では、.htaccessで使用する場合のAllowOverride区分はFileInfoです。
この試験は所有するApache環境の設定確認です。
利用者の本番サーバーやShortPixelの一括変換・復元を試した結果ではありません。
問題が出た場合は追記した設定だけを原本へ戻し、元画像を保持して確認します。
Nginxなどの構成ではApacheの.htaccessを使えません。
最初に1枚で試す手順
管理画面の「ツール → サイトヘルス → 情報 → メディア処理」を開き、使用中の画像処理ライブラリーでAVIFが対応形式に含まれるかを確認します。対応していない場合は拡張子だけを変更せず、ホスティング側の対応確認を先に行います。
対応していれば、元のJPEGやPNGを保持したまま1枚を書き出してアップロードします。画像ブロックで選び、PCとスマートフォンで表示し、開発者ツールで実際の取得URL・Content-Type・表示寸法を記録してください。容量が減っても文字や輪郭が崩れていれば、画質設定を上げるか元の形式を使います。
WordPressがAVIFのアップロードに対応していても、過去のJPEGが自動で置き換わるわけではありません。表示が変わらない場合は、選択画像・生成されたファイル・配信方式・ページやCDNのキャッシュを順番に確認します。WordPressの公式対応説明と画像形式の対応資料も参照してください。
