WordPressでWebP画像を使う方法！変換・配信・確認手順

WebPは、写真や図を比較的小さな容量で配信しやすい画像形式です。現在のWordPressではWebPファイルをメディアライブラリへアップロードして使えますが、JPEGやPNGをアップロードすれば自動的にWebPへ変わる、という標準仕様ではありません。

そのため、WordPressでWebPを使うときは「どこで変換するか」と「本当にWebPが配信されているか」を分けて確認することが重要です。この記事では、新規画像と既存画像の変換、プラグイン利用、picture要素の使い分け、トラブル時の確認まで順に整理します。

WebPとは

WebPはGoogleが開発した画像形式で、可逆圧縮と非可逆圧縮、透過、アニメーションなどに対応しています。JPEGやPNGと同じ用途を一部置き換えながら、画像内容と設定によってファイル容量を小さくできるのが特徴です。

ただし、「WebPにすれば必ず軽くなる」とは限りません。元画像の内容、画質設定、解像度、変換方法によって結果は変わります。変換前後で見た目と容量を比較してください。

画像のピクセル寸法、表示幅、圧縮など一般的な最適化はWordPressの画像サイズと圧縮の基本で詳しく扱っています。

現在のWordPressでWebPを使う方法

WordPressは5.8以降、WebP画像をメディアライブラリへアップロードし、投稿や固定ページでJPEG・PNGと同じように利用できます。アップロード時には環境に応じて中間サイズも生成され、通常の画像ブロックで挿入できます。

WebPファイルをそのままアップロードする

すでにWebPへ変換した画像がある場合は、次の流れです。

1. 「メディア→新規メディアファイルを追加」または画像ブロックを開く
2. WebPファイルをアップロードする
3. メディアライブラリで画像を確認する
4. 投稿・固定ページへ挿入する
5. 公開ページで画像URLと実際の配信形式を確認する

サーバーの画像処理ライブラリがWebPを扱えない場合などは、中間画像の生成や編集で問題が出ることがあります。アップロード時にエラーが出るなら、WordPressだけでなくサーバー環境も確認します。

JPEG・PNGが標準で一律WebP変換されるわけではない

WordPressコアには画像の出力形式を変更するための仕組みがありますが、現行の標準動作として、すべてのJPEG・PNGをWebPへ自動変換するわけではありません。

WebP化の方法は主に次の4つです。

• アップロード前に画像編集ツールでWebPへ変換する
• WordPressの画像最適化プラグインで変換する
• サーバーやCDNの画像最適化機能で変換・配信する
• 開発者向け設定で画像生成形式を変更する

どこで変換するかを一つ決め、同じ画像を複数の仕組みで重複変換しないようにします。

アップロード前にWebPへ変換する

最も仕組みを把握しやすいのは、WordPressへ入れる前にWebPへ変換する方法です。

1. 元画像を保管する
2. 用途に必要なピクセル寸法へリサイズする
3. WebPとして書き出す
4. 元画像と見比べて画質を確認する
5. ファイル容量を比較する
6. WordPressへアップロードして表示を確認する

この方法なら「どのファイルがWebPか」が明確です。一方、過去画像を大量に変換する用途には手間がかかるため、既存サイトではプラグインやサーバー側の変換を検討することがあります。

WebP対応プラグインを選ぶポイント

WebP対応をうたうプラグインでも、変換方法と配信方法は同じではありません。導入前に次の点を確認します。

確認項目	見るポイント
変換対象	新規画像だけか、既存画像も変換できるか
元画像	JPEG・PNGを残すか、置換するか
保存場所	WordPress内か、外部サービス・CDNか
配信方法	WebPファイルURL、HTML書き換え、サーバー判定、CDNなど
一括変換	枚数・時間・サーバー負荷を制御できるか
復元	プラグイン停止後に元画像へ戻せるか
料金・制限	月間処理量、容量、外部API等の条件
互換性	キャッシュ、CDN、テーマ、他の画像最適化との競合

WordPress.orgにはWebP変換・最適化を目的とする複数のプラグインがあります。機能や無料範囲は変わるため、導入時点の公式プラグインページと提供元の説明を確認してください。

「有効化するだけで必ずWebP配信になる」と考えず、導入後に公開ページの通信を確認することが大切です。

既存画像をWebP化する手順

すでに多くのJPEG・PNGがあるサイトでは、いきなり全画像を一括変換せず、少数で試してから広げます。

1. ファイルとデータベースをバックアップする
2. 変換方法と元画像を残すかどうかを決める
3. 代表的な写真・透過PNG・文字入り画像を数点選ぶ
4. WebPへ変換する
5. 投稿本文、アイキャッチ、背景画像などで表示確認する
6. PCとスマートフォンで画質を確認する
7. キャッシュ・CDN利用時は削除または更新する
8. 実際にWebPが配信されていることを確認する
9. 問題がなければ対象を広げる

特に背景画像やCSSから参照される画像は、本文のimg要素とは配信経路が異なる場合があります。サイト全体で同じ方法が効くとは限らないため、利用箇所ごとに確認します。

本当にWebPが配信されているか確認する

管理画面に「変換完了」と表示されても、公開ページでJPEG・PNGが配信されていることがあります。ブラウザーの開発者ツールで実際の通信を確認すると確実です。

Chromeなどでは次の手順で確認できます。

1. 公開ページを開く
2. 開発者ツールを開く
3. 「Network」を選ぶ
4. ページを再読み込みする
5. 「Img」などで画像リクエストを絞り込む
6. 対象画像を選び、URLやContent-Typeを確認する

image/webpが返っていれば、少なくともそのリクエストではWebPが配信されています。拡張子が.jpgのURLでも、CDN等が内容をWebPへ変換して返す構成があるため、ファイル名だけで判断しないでください。

反対に、メディアライブラリにWebPが存在しても、ページが元JPEGを参照したままならWebP配信にはなりません。

picture要素とフォールバックが必要なケース

picture要素は、ブラウザー条件に応じて複数の画像候補を提示し、最後にimgをフォールバックとして置けるHTML要素です。

たとえば、WebPとJPEGの両方を明示的に用意する場合は次のように書けます。

<picture>
  <source srcset="/images/sample.webp" type="image/webp">
  <img src="/images/sample.jpg" alt="サンプル画像">
</picture>

ただし、WordPressでWebPを使うためにpictureタグが必須というわけではありません。現在の主要ブラウザーではWebP対応が広がっているため、WebPを通常のimgとして配信するだけで要件を満たすサイトもあります。

picture要素を検討しやすいのは、次のようなケースです。

• 古いブラウザーや特殊なWebViewまで対応範囲に含める
• WebP非対応時にJPEG・PNGへ明示的に切り替えたい
• 画像形式だけでなく画面条件に応じて別画像を選びたい
• 利用中の最適化システムがpicture方式を採用している

対応ブラウザーの要件を決めてから選びましょう。

WebPが表示されない・変換されない場合

問題は「アップロード」「変換」「HTMLへの反映」「配信」のどこで起きているかを分けると見つけやすくなります。

WebPをアップロードできない

まず、ファイルが本当にWebP形式か、破損していないかを確認します。そのうえで、WordPressのサイトヘルスやサーバーのPHP画像ライブラリがWebPを扱えるかを確認してください。

拡張子だけを.webpへ変更しても画像形式は変わりません。対応する変換ツールで実際にエンコードする必要があります。

管理画面では見えるのに公開ページで表示されない

公開ページの画像URLが404になっていないか、HTMLが正しいURLを参照しているかを確認します。CDNやキャッシュを使っている場合は、古いHTMLや画像URLが残っていないかも確認します。

セキュリティ設定、ホットリンク防止、外部ストレージ連携などがあるサイトでは、WordPress本体以外の配信経路も切り分けます。

プラグインでWebPへ変換されない

対象形式、画像サイズ、変換上限、サーバー要件、API利用条件を確認します。変換ログやエラー表示があれば、画像単体で再実行して原因を絞ります。

複数の画像最適化プラグインやCDN変換を同時に使っている場合は、一時的に役割を整理し、どの仕組みが変換と配信を担当しているか明確にしてください。

WebPは作成されたのにJPEGが配信される

変換と配信は別処理です。WebPファイルが生成されても、HTML、サーバー設定、CDN、キャッシュのいずれかが元画像を参照していればJPEGのままです。

ブラウザーのNetwork欄で実際の画像リクエストを確認し、HTMLのsrc・srcset、CDNの応答、キャッシュを順に見ます。

WebP運用で注意したいこと

元画像とバックアップをどう残すか決める

WebP化後に元JPEG・PNGを削除すると、別形式へ戻したいときや再編集時に困る場合があります。プラグインが元画像を保持するのか、削除するのかを確認し、バックアップ方針と合わせて決めてください。

既存画像を一括変換する前には、ファイルとデータベースのバックアップを取ります。

画質は変換後の実画像で確認する

WebPも圧縮率を上げすぎれば画質が落ちます。人物写真、商品写真、細い文字を含む図など、サイトで重要な画像を使って設定を調整してください。

「WebPだから高画質」「WebPだから必ず軽い」と形式名だけで判断しないことが重要です。

高速化は画像だけで決まらない

画像形式は表示速度に関係しますが、サーバー応答、CSS・JavaScript、キャッシュなど他の要素も影響します。サイト全体の高速化はWordPressのキャッシュ・高速化方法と分けて考えてください。

WebP導入後も、実際のページで転送量や表示を測り、改善しているか確認します。

最適化処理を重ねすぎない

画像圧縮プラグイン、WebP変換プラグイン、サーバーの画像最適化、CDNの自動変換を同時に有効化すると、二重変換やURL書き換えの競合が起きることがあります。

どの仕組みが「変換」「保存」「配信」を担当するかを決め、不要な重複処理を減らしてください。

よくある質問

まとめ

WordPressはWebPを標準でアップロード・利用できますが、JPEGやPNGが自動的に一律WebPへ変換されるわけではありません。新規画像なら事前変換、既存サイトならプラグイン・サーバー・CDN等の方法から、管理しやすい仕組みを一つ選びます。

導入後は「WebPファイルが作られたか」だけで終わらせず、ブラウザーのNetwork欄で実際の配信形式を確認してください。picture要素は必要な互換性や出し分けがある場合に使い、バックアップ、画質、キャッシュ、他の最適化機能との重複まで含めて運用することが重要です。