WebP画像が表示されない原因と対策｜WordPressサイトで確認したいこと

WebP（ウェッピー）は、JPEGやPNGよりファイルサイズを抑えやすい画像形式です。表示速度やデータ転送量を考えて、WordPressサイトでもWebPを使う場面が増えています。

一方で、「WebP画像に変えたら、一部の環境で画像が表示されなくなった」「WebPに対応していないブラウザが残っているのではないか」と不安になることもあります。

先に結論を言うと、現在の主要ブラウザではWebPは広く利用できます。ただし、古いブラウザやOSが残る環境では、JPEGやPNGを代替画像として用意する設計が必要です。また、画像が表示されない原因は、ブラウザの非対応だけとは限りません。

• WebPの対応状況は、ブラウザだけでなくOSや利用環境も含めて確認する
• 表示されないときは、画像形式以外にURL、MIMEタイプ、キャッシュ、変換処理も切り分ける
• 重要な画像では、WebPとJPEG・PNGを出し分けるフォールバックを検討する

WebPが表示されないとき、最初に切り分けること

「WebPだから表示できない」と決めつける前に、次の順番で確認すると原因を絞り込みやすくなります。

1. 同じページを、別のブラウザや別の端末で開く
2. 画像のURLを直接開き、404や403などのエラーが出ていないか確認する
3. 元のJPEG・PNGでは表示できるかを確認する
4. キャッシュやCDNを経由している場合は、キャッシュ削除後に再確認する
5. WordPressの画像変換プラグインやサーバー設定を確認する

複数の環境で同じ画像だけが表示されないなら、ブラウザよりも、ファイルの生成・アップロード・配信設定に原因がある可能性が高まります。

WebPに対応していないブラウザや環境は？

WebPは現在のChrome、Edge、Firefox、Safariなどで広く対応しています。ただし、対応状況にはブラウザのバージョンやOSが関係します。特に、更新が止まった古いブラウザや古いOSでは、現在の標準的な環境と同じように扱えない場合があります。

Internet ExplorerはWebPに対応していないため、IEを対象に含める必要があるサイトでは代替画像を用意しなければなりません。ただし、IEはサポートが終了しているため、すべてのサイトで対応を続けるべきという意味ではありません。社内システム、古い端末、特定の取引先環境など、実際の利用者に必要かどうかで判断します。

Safariについても、ブラウザ名だけで判断するのは安全ではありません。古いmacOSやiOSでは、Safariを更新できない場合があります。対応バージョンは変化するため、記事や制作時点で公式資料を確認し、対象ユーザーの端末状況と照らし合わせることが大切です。

最新の対応状況は、MDNの画像形式ガイドなどで確認できます。WebPは主要ブラウザで広く使える一方、歴史的な互換性ではJPEGやPNGの方が広い、という整理が実務上わかりやすいでしょう。

MDN「画像ファイル形式ガイド」

非対応ではないのに画像が表示されない主な原因

画像のURLやファイル名が正しくない

WebPへの変換後に、HTMLやCSSが古いファイル名を参照していることがあります。画像のURLを直接開いて、ファイルが存在するか確認してください。ファイル名の大文字・小文字、相対パスと絶対パス、アップロード先の変更も確認対象です。

サーバーがWebPを正しく配信していない

WebPファイルが存在していても、サーバーが適切なMIMEタイプで配信できていなければ、環境によって読み込みに失敗することがあります。レンタルサーバー、CDN、セキュリティ設定などが関係するため、.htaccessを自己判断で追加する前に、現在の配信設定を確認した方が安全です。

キャッシュやCDNに古い情報が残っている

変換前の画像や、別の環境向けに生成された画像がキャッシュされていると、設定を直しても表示が変わらないことがあります。ブラウザキャッシュ、WordPressのキャッシュ、サーバーキャッシュ、CDNキャッシュを分けて確認しましょう。

srcsetや画像変換処理の組み合わせに問題がある

WordPressでは、画面幅に応じて複数の画像を切り替えるsrcsetが使われます。元画像だけWebPになっていても、別サイズの画像が生成されていない、あるいは参照先が壊れていると、特定の画面幅だけ画像が欠けることがあります。

WordPressでの現実的な対策

元画像をすぐに削除しない

WebPへ変換した後も、元のJPEGやPNGをすぐに削除しない方が安全です。元画像を残しておけば、変換を停止したときや、別の配信方法へ切り替えるときに戻しやすくなります。

picture要素で代替画像を用意する

HTMLを直接管理できる部分では、picture要素を使ってWebPと従来形式を出し分けられます。WebPを利用できる環境にはWebPを、利用できない環境にはimg要素のJPEGやPNGを表示する方法です。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像の説明" width="800" height="600">
</picture>

ただし、サイト全体の画像を手作業で書き換える必要があるとは限りません。WordPressのテーマ、画像最適化プラグイン、サーバーやCDNの構成によって適した方法は変わります。

プラグインやサーバーの仕組みを確認する

画像最適化プラグインには、WebPの生成だけでなく、対応環境への出し分けまで行うものがあります。導入時は、元画像を保持するか、HTMLを書き換えるか、キャッシュと併用できるか、停止後に表示が戻るかを確認してください。

複数の仕組みを重ねると、画像が二重変換されたり、キャッシュが古いファイルを返したりすることもあります。プラグインを追加する前に、現在どの仕組みで画像を配信しているかを整理することが先です。

サイト運営者が確認しておきたい項目

• WebPに変換した後、元画像を残しているか
• パソコン、スマートフォン、タブレットで主要画像を確認したか
• 画像URLを直接開いたときにエラーが出ていないか
• 画像最適化プラグインとキャッシュ・CDNの役割が重複していないか
• LPのメインビジュアルや商品画像に代替画像があるか
• 画像が表示されない環境を、実際の訪問者層が使っているか

最後の項目は特に重要です。対応範囲を広げればよいとは限りません。アクセス解析や問い合わせ状況から、どの端末やブラウザを優先すべきかを判断します。

WebPとSEOの関係

WebPを使っただけで検索順位が上がるわけではありません。WebPの主な利点は、画質を保ちながら画像の容量を抑え、表示速度や通信量を改善しやすいことです。

一方で、画像が欠けていたり、メインビジュアルや商品画像が表示されなかったりすれば、訪問者の理解や問い合わせに影響します。SEOだけでなく、ページの目的を達成できる状態かという視点で確認するべきです。

代替テキストについても、画像形式とは別に判断します。画像にしかない情報を伝える画像には内容を補うaltを設定し、装飾目的の画像や周囲の文章で意味が伝わる画像は、空のaltにする場合があります。

まとめ

WebPは、現在のWebサイトで有力な画像形式です。ただし、「WebPに変換すれば終わり」ではありません。対象ユーザーの環境、元画像の保持、フォールバック、サーバーやキャッシュの設定まで含めて、サイト全体で表示を確認する必要があります。

画像が表示されないときは、まずブラウザの非対応だけを疑わず、URL、配信設定、キャッシュ、WordPressの変換処理を順番に切り分けてください。

既存サイトの画像表示や画像最適化に不安がある場合は、現在の構成を確認したうえで、必要な範囲だけ改善する方法もあります。Webサイトの表示や運用について、何から確認すればよいかわからない段階でもご相談ください。