【2026年版】WebPが表示されない原因と解決策｜サーバー設定・CDN対応完全ガイド

WebP画像が表示されない問題は、ほぼサーバー設定と配信方法で決まります。

特に、

• Safariで画像が表示されない
• iPhoneでWebPが壊れる
• CDN導入後に画像が表示されなくなった

といったトラブルは、MIMEタイプ・User-Agent判定・キャッシュ制御のミスが原因です。

この記事では、Web制作者向けに、WebPが表示されない原因を技術的に整理し、サーバー設定・CDN対応・フォールバック設計まで含めた解決策を解説します。

WebPが表示されない主な原因（開発者視点）

WebPの非表示は、以下の3レイヤーで発生します。

• ブラウザ対応（クライアント）
• サーバー設定（MIME・レスポンス）
• 配信制御（CDN・キャッシュ・分岐）

特に重要なのは後者2つです。
現代のブラウザはほぼ対応しているため、“配信のミス”が原因の9割です。

サーバー設定：MIMEタイプの不備

よくある問題

WebP画像が正しく表示されない最大の原因は、MIMEタイプの設定ミスです。

本来は以下で配信される必要があります：

Content-Type: image/webp

しかし実際には：

• image/jpeg として配信されている
• application/octet-stream になっている
• 未設定（サーバーが自動判定失敗）

この状態だと、Safariなどで表示に失敗します

対処法（Apache / Nginx）

Apache（.htaccess）

AddType image/webp .webp

Nginx

types {
    image/webp webp;
}

まずはここを疑うのが最優先です

CDN・画像配信の落とし穴

よくある事故パターン

CDNを使うと、WebP問題は一気に増えます。

• SafariにもWebPを配信している
• User-Agent判定が壊れている
• キャッシュが古い形式を保持している
• 自動最適化機能が誤動作

典型的なミス

❌ NGパターン

すべてのブラウザにWebP配信

Safari（古い環境）で崩壊します

正しい対応

方法①：Acceptヘッダで分岐

Accept: image/webp

対応ブラウザだけWebP配信

方法②：CDN設定を見直す

代表的なCDN：

• Cloudflare
• AWS CloudFront

設定ポイント：

• WebP自動変換のON/OFF確認
• キャッシュキーにAcceptヘッダを含める
• 画像フォーマットごとにキャッシュ分離

方法③：キャッシュクリア

Safari / iPhone対策（2026年版）

現在のSafariはWebP対応済みですが、以下は例外です：

• 古いiOS（特にiOS13以前）
• アプリ内WebView
• キャッシュ不整合

つまり「完全対応」ではありません

ベストプラクティス

pictureタグでフォールバックを実装

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="">
</picture>

WebP配信の正しい設計（重要）

最も安全で推奨される構成

① WebPを用意
② PNG/JPEGも用意（フォールバック）
③ pictureタグで分岐
④ CDNはAcceptヘッダで制御

この4点で“表示されない問題”はほぼ消えます

「とりあえず直したい」場合の現実解

開発コストを抑えるなら👇

• WebPをやめてPNG/JPEGに戻す
• 重要画像だけフォールバック対応

完璧を目指さないのも戦略です

変換で即解決するケース

WebPの問題は、形式変換だけで解決するケースが多いです。

特に：

• 外部配信で制御できない
• 環境依存を避けたい
• とにかく確実に表示したい

この場合はPNG/JPEGに変換が最速です

無料で使えるWebP変換ツール

PixBirdでは、

• 無料
• 登録不要
• ブラウザ完結

でWebP → PNG / JPEG変換が可能です。

開発中の検証やトラブル対応でもすぐ使えます。