WordPress 6.5以降は、サーバー側の画像処理ライブラリも対応していればAVIFを扱えます。公式の対応条件を確認してください。AVIFの生成、配信する画像の選択、MIMEタイプの設定は別の処理です。下のプラグイン画面は過去の記録です。無料クレジットと消費単位は2026年10月21日に公式資料を照合しましたが、有料プランの価格や契約条件の全項目は確認していません。
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など別の構成では利用できる配信方式を選び、画面名だけで同じ設定を適用しないでください。
2026年10月21日の確認では、ShortPixel公式の案内は無料枠を毎月100クレジットとしています。これは元画像100枚をすべてAVIF化できるという意味ではありません。
Image Optimizerでは、元画像と各サムネイルの最適化を別々に数え、WebP・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の公式対応説明と画像形式の対応資料も参照してください。
よくある質問：WordPressで画像をAVIF形式で表示する方法
WordPressは、AVIF画像に対応していますか？
記事では、WordPress 6.5以降は、サーバー側の画像処理ライブラリも対応していればAVIFを扱えます。公式の対応条件を確認してください。AVIFの生成、配信する画像の選択、MIMEタイプの設定は別の処理です。
AVIFは、WebPより必ず小さくなりますか？
記事では、AVIFは写真などの容量を減らせる画像形式です。同じ画像でも形式・画質設定・内容により容量が変わるため、WebPより一定の割合で小さくなるとは限りません。元画像を残して比較し、利用者のブラウザーで表示できることを確かめて採用します。
AVIFは、すべてのブラウザーで表示できますか？
記事では、対応はブラウザとOSの版に依存します。形式比較の表だけで、すべての端末の表示を保証するものではありません。対象端末で確認し、必要ならJPEGやWebPの代替画像を用意します。
AVIF画像は、どうやって作りますか？
記事では、プラグインShortPixelを使ってavif画像を生成します。上級者向け設定で「Create AVIF versions of the images」にチェックし、「Deliver the next generation versions of the images in the front-end」の配信設定も確認します。掲載画面の.htaccess経由はApache向けで、Nginxなど別の構成では利用できる配信方式を選んでください。記事では、512×512pxのPNG画像（319KB）が49KBのAVIF画像（約84.6%軽量化）になりました。2026年10月21日に確認した公式案内の無料枠は毎月100クレジットですが、元画像・サムネイル・追加形式の生成で別々に消費します。元画像100枚のAVIF化を保証する枚数ではありません。有料プランの価格・契約条件の全項目は未確認です。
AVIFのMIMEタイプの設定は、必要ですか？
記事では、まずAVIFファイルの応答ヘッダーを確認します。Content-Typeがimage/avifでない場合は、Apacheでmod_mimeと.htaccessのFileInfo設定が使えることを確認し、バックアップした.htaccessへAddTypeを追記します。すでにimage/avifで配信されていれば、この設定の追加は不要です。AddTypeは既存のAVIFファイルを返すときのMIMEタイプを指定する設定で、JPEGやPNGの変換や、AVIFへの自動切り替えは行いません。
最初に、どう試せばよいですか？
記事では、管理画面の「ツール → サイトヘルス → 情報 → メディア処理」で、使用中の画像処理ライブラリーでAVIFが対応形式に含まれるかを確認します。対応していない場合は拡張子だけを変更せず、ホスティング側の対応確認を先に行います。対応していれば、元のJPEGやPNGを保持したまま1枚を書き出してアップロードし、画像ブロックで選んで、PCとスマートフォンで表示し、開発者ツールで実際の取得URL・Content-Type・表示寸法を記録します。WordPressがAVIFのアップロードに対応していても、過去のJPEGが自動で置き換わるわけではありません。
設定を戻したいときや、検証の範囲は？
記事では、問題が出た場合は追記した設定だけを原本へ戻し、元画像を保持して確認します。検証はApache 2.4.69の所有する環境で、AddTypeを追加しても返される画像ファイルの内容は変わらないことを確認したもので、利用者の本番サーバーやShortPixelの一括変換・復元を試した結果ではありません。Nginxなどの構成ではApacheの.htaccessを使えません。最新は公式で確認してください。
