WordPressでWebP画像を使う方法｜変換・表示設定とおすすめプラグインを解説

はじめに

WordPressサイトでは、ページ容量の多くを画像が占めることがあります。高解像度のJPEGやPNGを大量に掲載すると、画像の読み込みに時間がかかり、ページの表示速度やユーザー体験に悪影響を与えかねません。

そこで活用したいのが、JPEGやPNGよりもファイルサイズを抑えやすい画像形式「WebP」です。WordPressはWebP画像に標準対応しているため、あらかじめ変換した画像をアップロードするほか、プラグインを使って既存画像を一括変換したり、閲覧環境に応じてWebPを自動配信したりできます。

ただし、WebP画像をメディアライブラリへアップロードするだけでは、既存画像の最適化や対応ブラウザへの出し分けまで自動化されるとは限りません。利用しているサーバー、テーマ、キャッシュプラグイン、CDNとの組み合わせも考慮する必要があります。

この記事では、WordPressでWebP画像を使う方法をはじめ、変換手順、表示・配信設定、おすすめプラグイン、表示されない場合の対処法まで詳しく解説します。

1. WordPressでWebP画像を使う前に知っておきたい基礎知識

1-1. WebPとは？JPEG・PNGとの違い

WebPは、Web上で画像を効率よく配信するために開発された画像形式です。拡張子は「.webp」で、写真に適した非可逆圧縮と、画質を維持する可逆圧縮の両方に対応しています。

JPEG、PNG、WebPの主な違いは次のとおりです。

画像形式	主な用途	透過	特徴
JPEG	写真、商品画像	非対応	写真を比較的小さく保存できる
PNG	ロゴ、図、透過画像	対応	高画質だが容量が大きくなりやすい
WebP	写真、図、透過画像	対応	JPEG・PNGより容量を抑えやすい
GIF	簡単なアニメーション	対応	色数が少なく、容量が増える場合がある

WebPは透過画像やアニメーションにも対応しており、JPEG、PNG、GIFが担ってきた用途を幅広くカバーできます。

GoogleのWebP公式資料では、同等の画質を想定した場合、非可逆WebPはJPEGより約25～34％、可逆WebPはPNGより約26％小さくなると説明されています。ただし、実際の削減率は画像の内容、解像度、圧縮品質によって異なります。Google for Developers+1

1-2. WordPressでWebPを使うメリット

WordPressでWebP画像を使う主なメリットは、画像のファイルサイズを削減しやすいことです。

画像容量が小さくなると、サーバーからブラウザへ送信するデータ量が減ります。その結果、次のような効果が期待できます。

ページの表示速度を改善しやすい
スマートフォン回線での通信量を抑えられる
画像が多い記事や商品ページを軽量化できる
サーバーやCDNの転送量を抑えられる
ユーザーの離脱防止につながる
バックアップデータの増加を抑えやすい

特に、ブログ記事のアイキャッチ画像、商品写真、施工事例、ポートフォリオなど、多数の画像を掲載するWordPressサイトでは効果を実感しやすくなります。

ただし、元画像の縦横サイズが必要以上に大きい場合は、WebPへ変換するだけでは十分ではありません。表示サイズに合わせたリサイズと圧縮を組み合わせることが重要です。

1-3. WebP化で期待できるSEO・表示速度への効果

WebP画像を使用してページ容量を削減すると、画像の読み込み時間が短くなり、表示速度の改善につながる可能性があります。

特に、ファーストビュー内の大きな画像がLargest Contentful Paint、いわゆるLCPの対象になっているページでは、画像の軽量化が有効です。LCPは、ページ内の主要コンテンツが表示されるまでの時間を測定するCore Web Vitalsの指標です。Googleは良好なLCPの目安を2.5秒以内としています。Google for Developers

ただし、「WebPに変換すれば検索順位が必ず上がる」というわけではありません。Googleは、Core Web Vitalsを含むページ体験をランキングシステムで考慮する一方、コンテンツの関連性や有用性など、さまざまな要素を総合的に評価しています。WebP化はSEOの直接的な順位保証ではなく、表示速度とユーザー体験を改善する施策の一つとして考えましょう。Google for Developers+1

1-4. WordPressはWebP画像に標準対応している？

WordPressは、バージョン5.8からWebP画像のアップロードと利用に標準対応しています。WordPress 5.8以降であれば、JPEGやPNGと同じように、WebP画像をメディアライブラリへアップロードして投稿内やアイキャッチ画像に使用できます。WordPress.org+1

ただし、WebP画像のサムネイル生成や編集には、サーバー側のGDまたはImageMagickなどがWebPを処理できる必要があります。WordPressが対応していても、サーバーの画像処理環境がWebPに対応していなければ、アップロード時にエラーが表示されたり、サムネイルを生成できなかったりすることがあります。WordPress Developer Resources+1

古いWordPressを利用している場合は、WebP対応だけでなくセキュリティの観点からも、事前にバックアップを取ったうえで更新を検討してください。

2. WordPressでWebP画像を使う主な方法

2-1. WebP画像をそのままアップロードして使う方法

最も簡単なのは、パソコン上でWebP画像を用意し、WordPressのメディアライブラリへ直接アップロードする方法です。

投稿数が少ないサイトや、新規記事の画像だけをWebPにしたい場合に向いています。プラグインを追加する必要がなく、WordPressの構成を複雑にしにくい点がメリットです。

一方で、画像をアップロードするたびに手動で変換しなければなりません。また、すでにメディアライブラリへ登録されているJPEG・PNGは、そのまま残ります。

2-2. JPEG・PNG画像をWebPに変換して使う方法

JPEG・PNGをオンラインツールや画像編集ソフトでWebPに変換し、変換後のファイルをWordPressへアップロードする方法です。

圧縮品質や画像サイズを自分で細かく調整できるため、画質を確認しながら最適化したい場合に適しています。商品写真やポートフォリオなど、画像品質を重視するサイトでも使いやすい方法です。

ただし、元のJPEG・PNGと変換後のWebPを別々にアップロードすると、メディアライブラリ内に似た画像が増えます。ファイル名や管理ルールを決めておきましょう。

2-3. プラグインで自動的にWebP変換・配信する方法

画像最適化プラグインを利用すると、アップロードしたJPEG・PNGを自動的にWebPへ変換できます。プラグインによっては、すでに登録されている画像の一括変換や、WebP対応ブラウザへの自動配信にも対応しています。

継続的に記事や商品画像を追加するサイトには、プラグインを使う方法が適しています。

ただし、プラグインごとに次の点が異なります。

サーバー内で変換するか、外部APIで変換するか
無料版の変換枚数や容量に制限があるか
WebPだけでなくAVIFにも対応しているか
元画像を残すか削除するか
pictureタグ、リライト、CDNのどれで配信するか
キャッシュプラグインと併用できるか

機能が重複する画像最適化プラグインを複数有効化すると、変換処理やHTMLの書き換えが競合する可能性があります。基本的には一つに絞りましょう。

2-4. サーバーやCDN側でWebP配信する方法

レンタルサーバーやCDNの画像最適化機能を使い、JPEG・PNGからWebPを自動生成して配信する方法もあります。

この方式では、WordPress本体の画像URLを大きく変更せず、アクセスしたブラウザに応じて適切な形式を返せる場合があります。大量の画像を扱うサイトや、複数のWebサイトを運営している場合に便利です。

一方、サービスの仕様変更や解約によって配信方法が変わる可能性があります。また、WordPressプラグイン側でもWebP変換を有効にすると二重処理になるため、どの仕組みで変換・配信するのかを明確にしてください。

3. WebP画像をWordPressにアップロードする手順

3-1. WebP画像を事前に用意する

最初に、使用する画像をWebP形式へ変換します。

変換時には、ファイル形式だけでなく画像の縦横サイズも確認しましょう。本文の表示幅が800ピクセル程度であるにもかかわらず、横幅4,000ピクセルの画像をアップロードすると、WebPであっても容量が大きくなります。

必要な表示サイズに応じてリサイズし、画質を確認しながら圧縮品質を調整します。ファイル名には、次のように画像の内容が分かる半角英数字を使うと管理しやすくなります。


wordpress-webp-setting.webp
webp-plugin-comparison.webp

日本語ファイル名や意味のない連番でも画像は表示できますが、サーバー移転や外部サービスとの連携時に扱いにくくなることがあります。

3-2. メディアライブラリにWebP画像をアップロードする

WordPressの管理画面にログインし、次の手順でアップロードします。

「メディア」を開く
「新しいメディアファイルを追加」を選択する
WebP画像をドラッグ＆ドロップする
アップロード完了後に画像を開く
代替テキスト、タイトル、キャプションなどを設定する

代替テキストには、画像内の内容や役割を簡潔に記述します。SEOキーワードを不自然に詰め込むのではなく、画像を見られないユーザーにも内容が伝わる文章にしてください。

3-3. 投稿・固定ページにWebP画像を挿入する

投稿または固定ページの編集画面で「画像」ブロックを追加し、メディアライブラリからWebP画像を選択します。

挿入後は、画像の表示サイズやリンク設定を確認してください。元画像へのリンクが不要であれば、リンク先を「なし」にしておくと、意図せず大きな画像が別画面で開くのを防げます。

また、画像ブロックの幅だけを小さくしても、配信される画像ファイルが必ず小さくなるとは限りません。WordPressが生成した適切なサムネイルサイズが選択されているかも確認しましょう。

3-4. アイキャッチ画像にWebPを設定する

投稿編集画面の「アイキャッチ画像」からWebP画像を選択します。

WordPress側では設定できても、古いテーマや独自実装されたテーマでは、WebP画像を正しく取得できない場合があります。設定後は、次の場所で表示を確認してください。

記事ページ
投稿一覧ページ
トップページ
関連記事
人気記事ウィジェット
SNSシェア時の画像
OGP確認ツール

SNSや外部サービスが参照するOGP画像については、利用するサービスやプラグインの仕様も確認する必要があります。問題が発生する場合は、本文画像をWebPにしつつ、OGP画像だけJPEGを使用する方法もあります。

3-5. WebP画像がアップロードできない場合の確認ポイント

WebP画像をアップロードできない場合は、次の項目を確認します。

WordPressが古いバージョンになっていないか
WebPの拡張子が正しいか
ファイルが破損していないか
サーバーのGDまたはImageMagickがWebPに対応しているか
アップロード容量の上限を超えていないか
セキュリティプラグインがWebPを制限していないか
マルチサイトの許可ファイル形式にWebPが含まれているか

拡張子だけを「.jpg」から「.webp」に変更しても、画像形式は変換されません。必ず画像変換ツールや画像編集ソフトを使ってWebP形式として書き出してください。

4. JPEG・PNGをWebPに変換する方法

4-1. オンライン変換ツールを使う方法

オンライン変換ツールでは、ブラウザ上でJPEGやPNGをWebPに変換できます。

基本的な手順は次のとおりです。

オンライン変換ツールを開く
JPEG・PNG画像を選択する
必要に応じて画質や画像サイズを設定する
WebPへ変換する
変換後の画像をダウンロードする
WordPressへアップロードする

ソフトをインストールせずに利用できるため、数枚だけ変換したい場合に便利です。

ただし、画像を外部サーバーへ送信するタイプのサービスもあります。顧客情報、社内資料、公開前の商品画像など、機密性の高い画像には使用しないほうが安全です。利用規約や画像の保存期間も確認しましょう。

4-2. 画像編集ソフトでWebPに書き出す方法

WebP出力に対応した画像編集ソフトを使えば、画像を編集した後、そのままWebP形式で保存できます。

書き出す際は、次の項目を調整します。

画像の横幅と高さ
非可逆圧縮または可逆圧縮
圧縮品質
透過情報
メタデータの保持
カラープロファイル

写真は非可逆圧縮、ロゴや細い文字を含む図は可逆圧縮または高めの品質から試すと調整しやすくなります。

画像編集ソフトを使う方法は、見た目を比較しながら圧縮できることがメリットです。重要な商品画像や作品画像では、変換後の輪郭、グラデーション、文字のにじみを等倍表示で確認しましょう。

4-3. WordPressプラグインで一括変換する方法

大量の既存画像を変換する場合は、WebP対応プラグインの一括変換機能が便利です。

一般的な流れは次のとおりです。

WordPressとデータベースをバックアップする
WebP対応プラグインをインストールする
変換形式でWebPを選択する
画質や元画像の保存方法を設定する
新規アップロード画像の自動変換を有効にする
既存画像の一括最適化を実行する
キャッシュを削除する
ページ上で配信状況を確認する

一括変換はサーバーのCPUやメモリを消費します。画像数が多い場合は、アクセスの少ない時間帯に少しずつ実行してください。

共有サーバーでは処理時間やCPU使用率に制限が設けられている場合があります。変換が途中で停止するときは、処理件数を減らすか、外部API型のプラグインを検討しましょう。

4-4. 既存画像をWebP化するときの注意点

既存画像をWebP化するときは、単純に画像ファイルを置き換えないように注意してください。

WordPressは、画像をアップロードした際に、添付ファイル情報と複数サイズのサムネイル情報をデータベースへ保存します。FTPなどで元のJPEGをWebPへ差し替えるだけでは、データベース上のURLやMIMEタイプと実ファイルが一致しなくなる可能性があります。

また、テーマによってはアイキャッチ画像、背景画像、CSS、カスタムフィールドなどに画像URLが直接保存されています。

既存画像を安全にWebP化するには、元URLを維持したままWebPを出し分けるプラグインやCDNを使う方法が適しています。

4-5. 画質とファイルサイズのバランスを調整するコツ

WebPは圧縮率を高くするほど容量を小さくできますが、圧縮しすぎると画像がぼやけたり、輪郭にノイズが出たりします。

最初は次のような基準で調整するとよいでしょう。

一般的な写真：品質75～85程度から確認する
商品写真：品質80～90程度から確認する
小さなサムネイル：品質70～80程度から確認する
ロゴや文字を含む画像：高品質または可逆圧縮を試す
透過画像：背景との境界部分を重点的に確認する

品質設定の数値はツールによって結果が異なるため、絶対的な基準ではありません。同じ画像を複数の品質で出力し、見た目と容量を比較して決めてください。

画像形式の変換だけでなく、不要なメタデータの削除や適切なリサイズを行うと、さらに容量を削減できます。

5. WordPressでWebPを表示・配信する設定方法

5-1. WebP画像を直接表示する場合の設定

WebP画像をメディアライブラリへ直接アップロードした場合、通常はJPEGやPNGと同じように画像URLがHTMLへ出力されます。

HTML
<img
  src="https://example.com/wp-content/uploads/wordpress-webp.webp"
  alt="WordPressのWebP設定画面"
  width="1200"
  height="800"
>

この方法は構造がシンプルですが、配信されるファイルはWebPのみです。現在の主要ブラウザはWebPをサポートしているため、多くの一般ユーザーは問題なく閲覧できます。Google for Developers

ただし、古いブラウザ、特殊なアプリ内ブラウザ、外部システムとの連携がある場合は、JPEG・PNGの代替画像も用意したほうが安全です。

5-2. JPEG・PNGとWebPを出し分ける仕組み

JPEG・PNGとWebPを出し分ける場合、元画像を残したままWebP版を生成します。

WebPに対応しているブラウザにはWebPを返し、対応していない環境には元のJPEG・PNGを返す仕組みです。

主な判定方法には、次のようなものがあります。

pictureタグで複数形式を指定する
ブラウザのAcceptヘッダーをサーバー側で判定する
JavaScriptで対応状況を判定する
CDNが自動判定する

WordPressのWebPプラグインでは、pictureタグまたはサーバーのリライトルールを使う方式が一般的です。

5-3. pictureタグ・リライト配信・CDN配信の違い

pictureタグを使う方法では、HTML内にWebPと元画像の両方を指定します。

HTML
<picture>
  <source
    srcset="wordpress-webp.webp"
    type="image/webp"
  >
  <img
    src="wordpress-webp.jpg"
    alt="WordPressでWebP画像を設定する方法"
    width="1200"
    height="800"
  >
</picture>

WebP対応ブラウザはsource要素のWebPを読み込み、それ以外の環境ではimg要素のJPEGを読み込みます。動作を理解しやすい一方、テーマやプラグインが出力するHTMLを書き換える必要があります。

リライト配信は、HTML上の画像URLを変更せず、サーバー側のルールでWebPを返す方法です。既存記事を修正せずに導入しやすい反面、ApacheやNginxなど、サーバー環境に合った設定が必要です。

CDN配信では、CDNがブラウザや端末を判定し、最適化した画像を返します。サーバー負荷を抑えやすい一方、料金、画像品質、キャッシュ、独自ドメイン、解約後の動作を確認する必要があります。

5-4. キャッシュプラグイン利用時の注意点

キャッシュプラグインを使用している場合、WebP設定を変更しても、古いHTMLや画像が配信され続けることがあります。

設定後は、次のキャッシュを順番に削除してください。

WebPプラグインのキャッシュ
WordPressのページキャッシュ
サーバーキャッシュ
CDNキャッシュ
ブラウザキャッシュ

キャッシュプラグインにWebP対応機能がある場合は、画像最適化プラグインと機能が重複していないか確認します。

例えば、一方のプラグインがpictureタグへ書き換え、もう一方も同じHTMLを書き換えると、タグの重複や画像URLの不整合が発生する可能性があります。

5-5. WebPが正しく表示されているか確認する方法

ページ上で画像が見えているだけでは、実際にWebPが配信されているとは限りません。JPEG・PNGが表示されていても、見た目からは判別できないためです。

Google Chromeなどの開発者ツールを使い、次の手順で確認します。

確認したいページを開く
開発者ツールを開く
「Network」を選択する
ページを再読み込みする
「Img」で画像だけを絞り込む
対象画像を選択する
Content-Typeやファイル名を確認する

Content-Typeが「image/webp」になっていれば、WebPとして配信されています。

また、HTMLソース内にpictureタグがあるか、画像URLがWebPになっているかも確認しましょう。リライト方式ではURLが「.jpg」のままでも、中身がWebPとして返される場合があるため、拡張子だけで判断しないことが重要です。

6. WordPressのWebP対応におすすめのプラグイン

6-1. Converter for Media

Converter for Mediaは、JPEG、PNG、GIFなどの画像からWebPやAVIFを生成し、対応ブラウザへ配信できるプラグインです。WordPress.org 日本語+1

管理画面から設定しやすく、既存画像の一括変換にも対応しているため、初めてWebPを導入する人にも向いています。

主な特徴は次のとおりです。

WebP・AVIFへの変換
新規画像の自動変換
既存画像の一括変換
元のJPEG・PNGを残した配信
変換状況の確認
対象ディレクトリの設定

サーバー環境によって使用できる変換方法や配信方法が異なるため、導入後はプラグインの診断画面を確認してください。

6-2. EWWW Image Optimizer

EWWW Image Optimizerは、画像圧縮、リサイズ、WebP・AVIF変換、遅延読み込みなどをまとめて管理できる画像最適化プラグインです。

サーバー内の変換ツールを使う方法と、外部サービスを使う方法が用意されています。WebP・AVIFの変換や配信、端末に応じた画像サイズの最適化など、幅広い機能を備えています。WordPress.org 日本語+1

設定項目が多いため、細かく最適化したい中級者以上のユーザーに向いています。一方、すでにキャッシュプラグインや遅延読み込み機能を利用している場合は、重複する機能を無効化してください。

6-3. WebP Express

WebP Expressは、JPEG・PNGからWebPを生成し、WebP対応ブラウザへ自動配信することを目的としたプラグインです。

Imagick、cwebp、Vips、GDなど、複数のローカル変換方法に対応しています。サーバー内の方法を利用できない場合に備え、別の変換手段も用意されています。WordPress.org

主な特徴は次のとおりです。

複数のWebP変換方式
既存画像の変換
WebP対応ブラウザへの出し分け
pictureタグやリライト方式への対応
変換品質の調整

サーバーの種類や設定によって最適な配信モードが異なるため、テスト画面で動作を確認しながら設定する必要があります。

6-4. ShortPixel Image Optimizer

ShortPixel Image Optimizerは、画像の圧縮、リサイズ、WebP・AVIF変換などを行えるプラグインです。新規アップロード画像の自動最適化だけでなく、既存画像の一括処理にも対応しています。WordPress.org 日本語+1

外部サービスを使って画像を処理するため、サーバー側の画像変換機能に左右されにくいことが特徴です。

無料枠には処理量の制限があるため、画像数が多いサイトでは必要なクレジットや料金を確認しましょう。WooCommerceや大規模メディアなど、継続的に多数の画像を追加するサイトでは、月間の画像枚数を把握してから導入することが重要です。

6-5. Imagify

Imagifyは、画像の圧縮、リサイズ、WebP・AVIF変換を比較的シンプルな操作で設定できるプラグインです。

新規画像の自動最適化や既存画像の一括最適化に対応しており、複雑な設定を避けたい人に向いています。無料利用には月ごとの処理容量が設定されているため、高解像度画像が多い場合は上限に注意してください。WordPress.org 日本語

画像を大量に処理する前に、圧縮レベルと元画像のバックアップ設定を確認しましょう。

6-6. WebPプラグインを選ぶときの比較ポイント

WebPプラグインは、機能の多さだけでなく、サイトの運用方法に合っているかで選ぶことが重要です。

比較項目	確認する内容
変換場所	自社サーバーか外部APIか
対応形式	WebPだけか、AVIFにも対応するか
既存画像	一括変換できるか
新規画像	アップロード時に自動変換されるか
配信方式	pictureタグ、リライト、CDNのどれか
元画像	JPEG・PNGを残せるか
料金	枚数、容量、通信量の制限があるか
サーバー負荷	一括変換時に負荷が集中しないか
復元機能	元画像へ戻せるか
互換性	キャッシュ、テーマ、CDNと競合しないか

設定の簡単さを重視するなら、初期設定が分かりやすいプラグインが適しています。細かく制御したい場合は、変換エンジンや配信方式を選べるプラグインを検討しましょう。

無料版だけで判断せず、将来的な画像数やサイト規模も考慮してください。

7. WebP化で失敗しないための注意点

7-1. 元画像を削除する前にバックアップを取る

WebP変換後も、元のJPEG・PNGはすぐに削除しないでください。

テーマ変更、プラグイン停止、CDN解約、SNS連携などにより、元画像が必要になる可能性があります。変換設定を誤って画質が大きく低下した場合も、元画像がなければ再変換できません。

最低でも、次のデータをバックアップします。

WordPressのデータベース
wp-content/uploadsフォルダ
テーマファイル
プラグイン設定
サーバーのリライトルール

元画像を削除して容量を減らす場合は、別のストレージに原本を保存し、復元手順を確認してから実施しましょう。

7-2. テーマ・プラグインとの相性を確認する

通常の画像ブロックでは問題がなくても、次の場所ではWebPが正しく処理されない場合があります。

テーマ独自のスライダー
ページビルダー
ギャラリープラグイン
ランキングプラグイン
広告管理プラグイン
OGP画像
構造化データ
メール配信システム
PDF生成機能

本番サイトへ一括導入する前に、ステージング環境または少数の画像でテストしてください。

7-3. WebP未対応環境への代替画像を用意する

主要ブラウザではWebPを利用できますが、古い端末や特殊な閲覧環境まで対象にする場合は、JPEG・PNGの代替画像を残しておくと安心です。

pictureタグ、リライト配信、CDNの自動変換などを使えば、閲覧環境に応じて適切な画像を出し分けられます。

アクセス解析で利用者のブラウザや端末を確認し、サイトの対象ユーザーに合わせて判断しましょう。

7-4. 画像URL変更による表示崩れに注意する

JPEG・PNGを削除してWebPへ置き換えると、画像URLが変わる場合があります。

例えば、次のURLは別のファイルとして扱われます。


https://example.com/uploads/sample.jpg
https://example.com/uploads/sample.webp

記事本文、CSS、ウィジェット、カスタムフィールドなどに古いURLが残ると、画像が表示されません。

URLを変更する場合は、データベース内の参照先を確認し、必要に応じて置換やリダイレクトを行います。手作業でのデータベース置換はシリアライズデータを壊す可能性があるため、対応ツールを使い、事前にバックアップしてください。

7-5. PageSpeed Insightsで効果を確認する

WebPを導入したら、変換しただけで作業を終えず、PageSpeed Insightsなどで効果を確認しましょう。

確認したい項目は次のとおりです。

ページ全体の転送サイズ
画像の転送サイズ
LCP
不適切なサイズの画像
次世代形式に関する指摘
画像の読み込み時間
モバイルとパソコンの差

WebP化しても速度が改善しない場合は、画像以外に原因がある可能性があります。JavaScript、Webフォント、サーバー応答時間、外部広告、キャッシュなども合わせて確認してください。

8. WordPressでWebP画像が表示されないときの原因と対処法

8-1. ブラウザやサーバーがWebPに対応していない

古いブラウザでは、WebP画像を表示できない場合があります。また、サーバーの画像処理ライブラリがWebPに対応していないと、アップロード後のサムネイル生成や変換処理に失敗します。

まずは別の最新ブラウザで確認し、次にWordPressの「サイトヘルス」やプラグインの診断画面でサーバー環境を確認してください。

サーバーが対応していない場合は、次の方法を検討します。

レンタルサーバーへ問い合わせる
PHPや画像処理ライブラリを更新する
外部API型の変換プラグインを使う
CDN側でWebPを生成する
WebPを直接アップロードせず、JPEG・PNGを残す

8-2. プラグイン設定が反映されていない

WebPプラグインを有効化しただけでは、変換や配信が開始されない場合があります。

次の設定を確認しましょう。

WebP変換が有効になっているか
新規画像の自動変換が有効か
既存画像の一括変換を実行したか
対象フォルダが正しいか
配信方式を選択したか
サーバールールの書き込みに成功しているか
テスト画像の変換に成功しているか

複数の画像最適化プラグインを有効にしている場合は、競合を調べるため、一時的に一つずつ停止して確認します。

8-3. キャッシュが残っている

WebP画像が生成されていても、キャッシュに古いJPEG・PNGのHTMLやレスポンスが残っていると、設定変更が反映されません。

WordPress、サーバー、CDN、ブラウザのキャッシュをすべて削除し、シークレットウィンドウで再確認してください。

リライト方式では、ブラウザのAcceptヘッダーによって配信内容が変わります。CDNのキャッシュキーにヘッダー情報が適切に反映されていないと、WebP未対応環境へWebPを返すなどの問題が起こる可能性があります。

8-4. 画像パスや拡張子が間違っている

HTMLやCSSに記述された画像パスが間違っていると、WebP画像は表示されません。

次の点を確認します。

ファイル名の大文字と小文字
「.webp」のスペル
uploadsフォルダの年月
相対パスと絶対パス
HTTPとHTTPSの混在
ファイルが実際に生成されているか
画像URLへ直接アクセスできるか

Linuxサーバーでは、ファイル名の大文字と小文字が区別されます。「Image.webp」と「image.webp」は別のファイルです。

8-5. CDN・セキュリティ設定が影響している

CDNやセキュリティサービスが、WebPのMIMEタイプ、Acceptヘッダー、キャッシュルール、画像URLの書き換えに影響することがあります。

対処する際は、次の順番で原因を切り分けます。

CDNを一時的に迂回して表示を確認する
セキュリティプラグインを一時停止する
WebPプラグインの配信方式を変更する
サーバーログを確認する
CDNのキャッシュと画像最適化設定を確認する

すべての機能を一度に変更すると原因が分からなくなるため、一項目ずつ変更して検証してください。

9. WordPressのWebP画像に関するよくある質問

9-1. WebPにすると画質は劣化する？

非可逆圧縮でWebPへ変換した場合、圧縮設定によっては画質が劣化します。ただし、適切な品質に設定すれば、見た目の差を抑えながらファイルサイズを削減できます。

可逆圧縮を選べば画素情報を維持できますが、非可逆圧縮より容量が大きくなる傾向があります。

画像の用途に合わせて使い分けましょう。

一般的な写真：非可逆圧縮
商品の細部を見せる画像：高品質の非可逆圧縮
ロゴや文字入り画像：可逆圧縮または高品質
透過画像：背景との境界を確認して調整

9-2. すべての画像をWebPに変換すべき？

すべての画像を無条件にWebPへ変換する必要はありません。

すでに十分小さい画像は、変換しても削減効果がほとんどない場合があります。また、外部サービスとの互換性が必要な画像や、編集用の原本として保存する画像はJPEG・PNGのまま残したほうがよいこともあります。

優先的にWebP化したいのは、次のような画像です。

ファーストビューの大きな画像
アイキャッチ画像
商品写真
記事内の高解像度写真
アクセス数の多いページの画像
容量が大きいPNG画像

まずは画像容量の大きいページから対応すると、作業量を抑えながら効果を確認できます。

9-3. WebP化するとSEO順位は上がる？

WebP化しただけで検索順位が上がるとは限りません。

WebPは画像容量を削減し、表示速度やLCPを改善する手段の一つです。表示速度とページ体験の改善はSEOにおいて重要ですが、検索順位はコンテンツの品質、検索意図との一致、内部リンク、被リンク、モバイル対応など、複数の要素によって決まります。

WebP化は、ユーザーが快適に閲覧できるサイトを作るための技術的な改善施策として実施しましょう。

9-4. WebPとAVIFはどちらを使うべき？

WebPとAVIFは、どちらもWebサイトの画像軽量化に利用される形式です。

一般的に、AVIFは高い圧縮効率を期待できますが、画像によっては変換に時間がかかります。また、WordPressプラグイン、画像編集ソフト、外部サービスとの互換性も確認する必要があります。

運用の安定性と幅広い互換性を重視するならWebP、さらに容量を削減したい場合はAVIFも含めてテストするとよいでしょう。

対応プラグインを利用する場合は、次の順で配信する構成も考えられます。

AVIF対応環境にはAVIF
WebP対応環境にはWebP
それ以外にはJPEG・PNG

ただし、複数形式を生成すると保存容量が増えます。削減できる通信量とサーバー容量のバランスを確認してください。

9-5. WebP画像はスマホでも問題なく表示される？

現在の主要なスマートフォンブラウザでは、WebP画像を表示できます。Chrome、Safari、Firefox、Edgeなどの主要ブラウザはWebPをサポートしています。Google for Developers

ただし、古いOSや更新されていないアプリ内ブラウザでは、正しく表示されない可能性があります。

幅広い閲覧環境へ対応する必要があるサイトでは、元のJPEG・PNGを残し、pictureタグ、リライト、CDNなどで出し分けると安心です。

10. WordPressでWebP画像を使ってサイト表示速度を改善しよう

10-1. まずは既存画像の容量を確認する

WebPを導入する前に、どの画像がページを重くしているのか確認しましょう。

メディアライブラリ、ブラウザの開発者ツール、PageSpeed Insightsなどを使い、容量の大きい画像を特定します。

特に確認したいのは、次の画像です。

トップページのメイン画像
記事のアイキャッチ画像
商品一覧のサムネイル
背景画像
スライダー画像
人気記事や関連記事の画像

画像の容量だけでなく、実際の表示サイズに対して解像度が大きすぎないかも確認してください。

10-2. プラグインでWebP変換と配信を設定する

継続的に画像を追加するWordPressサイトでは、プラグインで自動変換と配信を設定すると効率的です。

導入は次の順番で進めます。

サイト全体をバックアップする
WebPプラグインを一つ選ぶ
少数の画像で変換を試す
パソコンとスマートフォンで表示を確認する
WebPが実際に配信されているか確認する
既存画像を少しずつ一括変換する
キャッシュを削除する
問題がなければ自動変換を継続する

最初から元画像を削除する設定にはせず、問題が起きたときに戻せる状態で運用を始めましょう。

10-3. 表示確認と速度計測まで行うことが重要

WebPの導入では、画像を変換すること自体が目的ではありません。ユーザーが問題なく画像を閲覧でき、実際にページが軽くなっていることが重要です。

導入後は、次の項目を確認してください。

画像が欠けずに表示されているか
アイキャッチ画像が表示されるか
スマートフォンでも表示されるか
WebPが実際に配信されているか
ページ容量が減っているか
LCPが改善しているか
管理画面の画像操作に問題がないか
SNSシェア画像が表示されるか

期待した効果が出ていない場合は、WebPの品質設定、画像サイズ、キャッシュ、遅延読み込み、サーバー応答時間などを見直しましょう。

まとめ

WordPressはバージョン5.8以降、WebP画像のアップロードと利用に標準対応しています。あらかじめWebPへ変換した画像を直接アップロードするだけでなく、プラグインやCDNを使ってJPEG・PNGを自動変換し、対応ブラウザへ配信することも可能です。

画像数が少ないサイトでは、オンラインツールや画像編集ソフトで変換してからアップロードする方法が手軽です。画像を継続的に追加するブログ、メディア、ECサイトでは、Converter for Media、EWWW Image Optimizer、WebP Express、ShortPixel Image Optimizer、Imagifyなどのプラグインを活用すると管理しやすくなります。

ただし、WebPへ変換しただけで検索順位が上がるわけではありません。元画像のリサイズ、圧縮品質、キャッシュ、遅延読み込みなども含め、総合的に表示速度を改善する必要があります。

まずは容量の大きい画像を確認し、元画像をバックアップしたうえで、少数の画像からWebP化を試しましょう。最後に実際の配信形式とページ速度を計測することで、安全かつ効果的にWordPressサイトを軽量化できます。