WordPressでWebPとAVIFのどちらを使うか迷ったら、まずWebPを標準候補にし、写真中心で容量をさらに減らしたい場面だけAVIFを実画像で試すのが安全です。 WordPressはWebPを扱えますが、AVIFはWordPress本体の対応だけでなく、サーバー側のGDまたはImagick、PHP環境、画像処理ライブラリが対応している必要があります。
この記事では、形式の名前だけで決めず、サイトヘルスで対応状況を確かめ、同じ写真をWebP・AVIFで比較し、アップロードからサムネイル生成、公開画面まで成功を判断する手順を説明します。
WebPとAVIFの違いを先に整理する
| 形式 | WordPressでの扱い | 向く場面 | 注意点 |
|---|---|---|---|
| JPEG | 長く使われる標準形式 | 写真全般 | 同等画質なら新形式より大きくなりやすい |
| WebP | WordPress 5.8以降でアップロード対応 | 写真・図版を広く軽量化 | アニメーションや変換方法は環境確認が必要 |
| AVIF | WordPress 6.5以降で対応 | 写真をさらに小さくできる可能性 | サーバーの画像処理ライブラリ対応が必要 |
| PNG | 標準対応 | 透過、ロゴ、線画 | 写真では容量が大きくなりやすい |
WordPressが形式を受け付けても、アップロード時に複数サイズを生成できなければ、テーマが使うサムネイルだけ欠ける場合があります。「原寸画像が開いた」だけでは成功ではありません。
WordPressのバージョンが新しければ、それだけでAVIFを使えると思っていました。サーバーの画像処理まで関係するなんて、少し意外です。
そこに気づけたのは大きいね。
WordPress本体は入口で、実際に縮小画像を作るのはサーバー側のGDやImagickだから、両方そろって初めて安心なんだよ。
原寸が見えても、記事一覧の小さい画像だけ真っ白になることがあるんですね。それなら一枚だけ見て喜ばない方がよさそうです。
そうだね。
メディア画面、記事本文、記事一覧の三か所を確認してから、残りの画像へ広げようか。
サイトヘルスでAVIF・WebP対応を確認する
- WordPress管理画面の「ツール → サイトヘルス」を開く。
- 「情報」タブを選ぶ。
- 「メディア処理」または画像処理に関する項目を開く。
- GDまたはImagickの情報と、対応ファイル形式を確認する。
- WebP・AVIFが読み書き可能か分からない時は、PHP情報を推測せずサーバー会社へ確認する。
表示名は環境で異なります。確認したいのは「PHPが新しいか」だけではなく、画像処理ライブラリが目的の形式を扱えるかです。サーバー会社の機能表にWebPやAVIFの語がなくても、WordPress上のサイトヘルスで実環境を確認できます。
同じ写真で安全に比較する手順
- 横幅1600px程度の同じ元写真を用意し、JPEG・WebP・AVIFを書き出す。
-
ファイル名を
sample-jpg.jpg、sample-webp.webp、sample-avif.avifのように分ける。 - 「メディア → 新規追加」で一枚ずつアップロードする。
- エラー文を記録し、失敗した形式を繰り返し大量投入しない。
- メディアの詳細で寸法と容量を確認する。
- テスト投稿へ三枚を同じ表示幅で配置し、プレビューする。
- 記事一覧・スマートフォン・主要ブラウザでも表示を見る。
アップロードが完了し、メディア詳細に寸法が出る。本文用とサムネイル用の画像が生成され、PCとスマートフォンで欠けず、開発者向け画面のエラーに画像404が出ない状態です。
AVIFを一枚入れたら、メディアでは見えるのに記事一覧の画像が出ませんでした。元画像を消してやり直したくなったんですけど、そこで止めた方がいいですか？
止まれてえらいよ。
原寸は残したまま、生成されたサムネイルのURLと寸法を確認しよう。失敗の場所が分かる前に元画像を消すと、比較できなくなるからね。
WebPの方は本文も一覧も見えています。AVIFだけ直そうとして設定を増やすより、今回はWebPへ戻す方が安心でしょうか？
今すぐ全画像を軽くしたいなら、それが安全だよ。
AVIFはサーバー対応を確認できた後に別の一枚で再試験すれば、公開記事を巻き込まずに済むね。
容量だけでなく画質と生成時間を比べる
小さい方が必ず優秀とは限りません。文字入り図版では輪郭のにじみ、人物写真では肌や空の階調、商品写真では細部を100%表示で見ます。また、AVIFは圧縮率が高くても生成に時間がかかる場合があります。アップロードが頻繁なサイトでは、編集作業の待ち時間も判断材料です。
- 容量差が小さいなら、安定して扱えるWebPを選ぶ
- 写真が数百KB単位で小さくなり、全表示が正常ならAVIFを検討
- ロゴやスクリーンショットはPNG/WebPを個別判断
- 元画像は編集用として手元へ保管する
変換プラグインを入れる前の確認
自動変換プラグインは便利ですが、すでにサーバーやCDNが変換していると二重処理になることがあります。既存画像の一括変換はURL、キャッシュ、ストレージ容量へ影響するため、最初は一枚だけでテストします。プラグインを止めた時に元形式へ戻せるかも重要です。
サーバー選びでは、画像形式の単語だけでなく、PHP切替、画像処理、ストレージの余裕、サポートへの問い合わせやすさを見ます。写真中心で処理速度と余裕を求める人はシンレンタルサーバー、管理の分かりやすさと安定した運用情報を重視する人はエックスサーバーが候補です。
シンレンタルサーバー
大量画像の変換や生成時間も含め、処理性能と容量の余裕を重視する人向けの候補です。
向いている人： 写真中心のWordPressを速度重視で運営したい人
利点： 高速化機能と大きなストレージを比較しやすい
注意点： AVIF対応は契約時点の実環境で確認が必要です。形式対応だけを理由に契約しないでください。
料金： ベーシック 1,078円〜、キャンペーン実質539円〜 / 36ヶ月契約時
シンレンタルサーバーの画像運用条件を見る
エックスサーバー
サイトヘルスやサーバーパネルを見ながら、画像処理環境を安定して管理したい人の候補です。
向いている人： 変換形式だけでなくサポートと運用の分かりやすさも重視する人
利点： WordPress運用情報が探しやすく、環境確認を進めやすい
注意点： 最新のGD・Imagick対応形式は実環境または公式サポートで確認してください。
料金： スタンダード月額693円〜目安（キャンペーン・契約期間で変動）
エックスサーバーの最新環境と料金を見る広告・PRを含みます。料金・提供条件は公式ページで最新情報をご確認ください。
よくある失敗と戻し方
| 失敗 | 原因候補 | 戻し方 |
|---|---|---|
| アップロードできない | WordPressまたはライブラリ未対応 | WebP/JPEGへ戻し、サイトヘルスを確認 |
| 一覧だけ欠ける | サムネイル生成失敗 | 元画像を残して生成サイズを調査 |
| 容量が減らない | 品質設定が高すぎる、二重変換 | 同じ寸法・品質で比較し直す |
| 色が変わる | カラープロファイル | 公開前に実ブラウザで比較し、元形式へ戻す |
まとめ：一枚の成功を確認してから広げる
新しい形式へ全部変えることが高速化だと思っていました。私はまずWebPを基準にして、AVIFは同じ写真で一覧まで出るか試す方が安心できそうです。
軽さと表示の両方を自分で確かめられたね。
一枚で成功条件を通してから広げるなら、大切な記事を実験台にせずに済むよ。
容量が小さい数字を見ると、またAVIFへ急ぎたくなるかもしれません。サムネイルとスマホまで見ることを忘れないようにします。
その慎重さで十分だよ。
形式の名前より、全サイズが生成され、読者の画面で欠けず、元へ戻せることをいちばん大事にしようね。
WebPかAVIFかは一律に決めません。サーバーの処理対応を確認し、同じ写真を同じ寸法で比較し、メディア・本文・一覧・スマートフォンまで表示できた形式を採用します。