WordPressのWebP・AVIF設定方法【2026年】画像を次世代形式に変換する手順
※本記事にはアフィリエイト広告を含みます。
WordPressの画像をWebP・AVIFへ変換すると、見た目の品質を保ちながら画像の転送量を抑えられる場合があります。ただし、設定では「次世代形式を生成すること」と「訪問者へ配信すること」を分けて考えなければなりません。
この記事では、ShortPixel Image Optimizerを使い、WebP・AVIFの選び方から新規・既存画像の変換、CDNまたはローカルでの配信、表示確認、不具合時の戻し方まで順番に解説します。
WordPressとShortPixelの仕様は2026年8月20日時点の公式情報をもとに確認しています。
- 迷ったら、まずWebPを少数画像で試す
- AVIFは表示環境を確認してから追加する
- 「生成」と「配信」の両方を設定する
- 変更前にサイトと元画像をバックアップする
WebPとAVIFの違い
WebPとAVIFは、JPEGやPNGより小さなファイルサイズを目指して設計された画像形式です。どちらも写真やイラストに利用でき、透過にも対応します。一方で、圧縮効率、変換時間、利用環境との相性が異なります。
WebPとAVIFの違い
導入しやすさと検証条件を比較します。
← 表は横にスクロールできます →
| 比較項目 | WebP | AVIF |
|---|---|---|
| 特徴 | 対応環境が広く導入しやすい | 高い圧縮効率を期待できる |
| 向いている人 | 互換性を優先したい人 | 容量削減を重視する人 |
| 注意点 | 容量差が小さい画像もある | サーバーや周辺機能の検証が必要 |
| 最初の選択 | 第一候補 | WebPの次に検討 |
※画像によって変換後の容量と見た目は異なります。代表的な写真・図版・透過PNGで比較してください。
POINT
生成と配信は別の設定
WebPとAVIFを同時に生成しても、すべての訪問者へ両方が配信されるわけではありません。配信方法とブラウザの対応状況に応じて、利用可能な形式または元画像が選ばれます。
WordPressではWebPとAVIFをそのまま使える？
WordPressは5.8からWebP、6.5からAVIFのアップロードと画像処理に対応しています。ただし、AVIFの処理にはサーバー側の画像ライブラリがAVIFをサポートしている必要があります。次世代形式を手動でアップロードする方法と、JPEG・PNGを残したままプラグインで変換・配信する方法では運用が異なります。
画像数が少なく、アップロード前に毎回変換できるなら手動運用も可能です。記事を継続的に追加するサイトや、すでにメディアライブラリへ多くの画像があるサイトでは、自動変換と一括処理に対応したプラグインのほうが管理しやすくなります。
WARNING
変換しただけでは配信されません
WebP・AVIFへ変換しただけでは、サイト上でその形式が配信されているとは限りません。「ファイルの生成」と「フロント側への配信」の両方を設定し、最後にブラウザで確認してください。
ShortPixelでWebP・AVIFを設定する前の準備
1. サイト全体をバックアップする
画像ファイルだけでなく、データベースを含むサイト全体のバックアップを取得します。キャッシュ、CDN、画像置換系プラグインを併用している場合は、設定内容も控えておくと戻しやすくなります。
2. ShortPixelの画像バックアップを確認する
ShortPixel Image Optimizerでは、Backupが有効なら最適化前の画像を保存し、管理画面から復元できます。設定画面でBackupが有効になっていることを確認してから作業してください。バックアップを無効にすると、ShortPixelから元画像へ戻せない場合があります。
3. まず数枚で試す
いきなりメディアライブラリ全体を処理せず、アイキャッチ、本文画像、透過PNGなど種類の異なる画像を数枚選びます。PCとスマートフォンの表示、画像の鮮明さ、容量、レイアウト崩れを確認してから対象を広げます。
CHECK
設定前の確認項目
- サイト全体のバックアップを取得した
- ShortPixelのBackup設定を確認した
- キャッシュ・CDN・画像最適化プラグインの併用状況を確認した
- テスト用の代表画像を選んだ
ShortPixelでWebP・AVIFを生成する手順
STEP 1 プラグインを更新して設定画面を開く
ShortPixel Image Optimizerを最新版へ更新し、WordPress管理画面の「設定」→「ShortPixel」→「WebP/AVIF & CDN」を開きます。画面名はプラグインの更新で変わる場合があります。
STEP 2 生成する形式を選ぶ
「Create WebP Images」を有効にします。AVIFも試す場合は「Create AVIF Images」も有効にしてください。初めて設定するサイトではWebPから始め、問題がないことを確認してからAVIFを追加すると切り分けやすくなります。
STEP 3 新しくアップロードする画像をテストする
設定保存後にテスト画像をメディアライブラリへアップロードします。自動最適化が有効なら、元のJPEG・PNGの最適化とあわせてWebP・AVIFが生成されます。生成対象にはWordPressが作るサムネイルも含まれるため、元画像1枚だけを処理する場合より多くのクレジットを使うことがあります。
TIP
無料枠はサムネイル数も確認
ShortPixelでは、5％以上圧縮された元画像と各サムネイルにそれぞれ1クレジットを使い、WebPまたはAVIFを生成した画像・サムネイルにも形式ごとに追加の1クレジットが必要です。無料枠を試すときは、不要なサムネイルサイズを対象外にできないか確認すると消費量を把握しやすくなります。
既存画像をWebP・AVIFへ変換する方法
既存画像は、WebP・AVIFの生成設定を有効にしただけでは自動的に変換されません。次の手順で一括処理します。
- WordPress管理画面で「メディア」→「Bulk ShortPixel」を開く
- 「Start Optimization」を選ぶ
- 処理対象でMedia Libraryを有効にする
- オプションでWebPまたはAVIFの生成を選ぶ
- 最初は対象を限定し、処理結果を確認する
過去に最適化済みの画像も、現行版のShortPixel Image OptimizerではBulk ShortPixelから次世代形式を生成できます。古い解説にある「いったん全画像を復元して再圧縮する」手順をそのまま実行せず、先にプラグインを更新してください。
WARNING
一括処理の前に対象数を確認
一括処理前に、必要クレジット数とサーバーの空き容量を確認してください。WordPressは元画像から複数のサムネイルを生成するため、メディアライブラリの件数より処理数が多くなることがあります。
CDN配信とローカル配信はどちらを選ぶ？
生成したWebP・AVIFを表示するには配信方法を選びます。ShortPixelでは、主にShortPixel CDNを使う方法と、サーバー内に生成したファイルをローカル配信する方法があります。公式案内では、ShortPixel CDNは5MBの転送ごとに1クレジットを消費します。
次世代画像の配信方法
サーバー環境と運用方法に合わせて選びます。
← 表は横にスクロールできます →
| 配信方法 | 向いているケース | メリット | 注意点 |
|---|---|---|---|
| ShortPixel CDN | 設定を簡単に試したい | ホスティング環境を選びにくい | URL置換とCDNクレジットを確認 |
| ローカル（.htaccess） | Apache系環境で自サイトから配信 | HTMLを書き換えず出し分ける | サーバー・既存CDNとの相性確認 |
| ローカル（PICTURE） | .htaccess方式を使えない | 元画像の候補をHTMLに持てる | テーマやスライダーと干渉する場合がある |
迷ったときの選び方
- 設定の簡単さを優先：ShortPixel CDNを少数画像で試す
- 画像を自サーバーから配信：利用中のサーバーが対応するならローカルの.htaccess方式を検討する
- すでに別のCDN・キャッシュ機能を利用：画像変換・配信機能が重複しないよう、どれか一つを担当にする
CDN、キャッシュ、画像最適化の複数機能を同時に有効にすると、URLの二重書き換えや古いキャッシュが原因で表示を確認しにくくなります。ShortPixel以外の機能でWebP・AVIFを配信する場合は、ShortPixel側のCDN配信とローカル配信を無効にします。
WebP・AVIFが配信されているか確認する方法
ブラウザの開発者ツールで確認する
- 対象ページをGoogle Chromeなどで開く
- 開発者ツールを開き、「Network」を選ぶ
- 「Img」で画像だけに絞り込む
- ページを再読み込みし、遅延読み込みされる画像までスクロールする
- 対象画像の「Type」またはレスポンスヘッダーのContent-Typeを確認する
URLの末尾が「.jpg」のままでも、配信方式によっては実際のContent-Typeが「image/webp」または「image/avif」になっていることがあります。拡張子だけで判断せず、通信内容を確認してください。
CHECK
実際の配信形式を確認
- トップページと記事ページの両方で確認する
- アイキャッチ、本文画像、ロゴ、透過画像を確認する
- ログイン中だけでなく、シークレットウィンドウでも確認する
- PCとスマートフォンの実機で確認する
- キャッシュ削除後に再確認する
ShortPixel CDNでは、画像への初回アクセス直後に元画像が表示され、数秒から数分後に次世代形式が利用できる場合があります。設定直後に確認できないときは、少し待ってからキャッシュを避けて再読み込みしてください。
画像が表示されない・変換されないときの確認項目
一部の画像だけ変換されない
変換後のWebP・AVIFが最適化後のJPEG・PNGより5％を超えて大きくなる場合、ShortPixelはその次世代形式を保存しないことがあります。すべての画像がWebP・AVIFになること自体を目標にせず、実際に軽くなる画像へ適用できているかを見ます。
AVIF server test failedと表示される
サーバーがAVIFを正しく配信できない可能性があります。画像が消えるリスクを避けるため、AVIF配信をいったん無効にし、サーバー会社へAVIFのMIMEタイプと配信対応を確認してください。先にWebPだけで運用する選択もできます。
設定後もJPEG・PNGが配信される
- 次世代形式の「生成」だけでなく「配信」も有効か
- 既存画像をBulk ShortPixelで処理したか
- キャッシュやCDNに古い画像が残っていないか
- 別の画像最適化プラグインと機能が重複していないか
- 確認対象が背景画像や外部ドメインの画像ではないか
不具合が出たときの戻し方
- ShortPixelのCDN配信またはローカル配信を無効にする
- WordPress、キャッシュプラグイン、サーバー、外部CDNのキャッシュを削除する
- シークレットウィンドウと別端末で元画像が表示されるか確認する
- 画質劣化など元ファイル自体の問題がある場合は、メディアライブラリの一覧表示から個別に「Restore backup」を実行する
- 全体を戻す必要がある場合は「設定」→「ShortPixel」→「Tools」の「Bulk Restore」を検討する
WARNING
一括復元は最後の手段
ShortPixelの一括復元は取り消せず、使用済みクレジットも戻りません。まず配信設定とキャッシュを戻し、それでも元画像そのものに問題がある場合だけ復元を検討してください。
無料枠で試せる範囲と有料利用を考える条件
ShortPixel Image Optimizerは、公式案内では月100クレジットまで無料で試せます。ただし、1つの元画像からWordPressが複数のサムネイルを作ると、それぞれが処理対象になります。WebP・AVIFの生成にも追加クレジットが必要なため、単純に「100枚まで」とは限りません。
- 少数画像で動作を試したい小規模サイトは無料枠から
- 既存画像をまとめて処理したい場合は有料利用を検討
- 記事や商品画像を継続的に追加するサイト
- WebP・AVIFと多数のサムネイルを自動生成したいサイト
無料のオンライン圧縮で数枚だけ処理する場合は、無料ツールで十分です。一方、WordPressへ画像を継続的に追加する場合や、WebP・AVIFの生成、大量画像の一括最適化を自動化したい場合は、ShortPixelが候補になります。
プラグインの導入から圧縮方式、バックアップ、サムネイル設定まで一緒に確認したい場合は、ShortPixelの使い方と初期設定を参照してください。
WordPressのWebP・AVIF設定に関するよくある質問
両方の生成は可能です。ただし、生成ファイルとクレジット消費が増えるため、まずWebPで表示と運用を確認し、必要ならAVIFを追加すると切り分けやすくなります。
削除はおすすめしません。復元や互換性のため、サイト全体のバックアップと元画像を残してください。
必ず速くなるとは限りません。設定前後で画像の転送量と表示速度を比較してください。
失敗とは限りません。開発者ツールでContent-Typeがimage/webpまたはimage/avifになっているか確認してください。
2026年8月20日：WordPressのWebP・AVIF対応バージョン、ShortPixelの生成・配信方法、クレジット消費、CDNとローカル配信の注意点を再確認しました。
まとめ
WebP・AVIF設定では、画像の生成と配信を分けて考えることが大切です。
まずWebPを少数画像で試し、既存画像はBulk ShortPixelから生成します。配信後は拡張子だけで判断せず、NetworkのTypeまたはContent-Typeを確認してください。
サイトをバックアップし、代表画像を1枚選んでWebPの生成と表示確認から始めましょう。
WebP・AVIF設定は、一度に全画像へ適用するより、バックアップを用意して小さく試すほうが安全です。無料枠で代表画像を検証し、継続的な自動最適化や既存ライブラリの一括処理が必要になった段階で有料プランを比較してください。
