WebP対応していないブラウザは？確認方法と表示対策を解説

2025-12-17

こんにちは。hakubi code 代表のてらだです。

最近はサイトの表示速度を上げるために、画像の軽量化フォーマットであるWebPウェッピーを採用するケースが当たり前になってきましたね。実際にGoogleの技術資料でも、WebPはJPEGと比較して25%〜34%小さくなると報告されており、その効果は絶大です。
（出典：Google Developers “An image format for the Web”）

でも、そこでどうしても気になってしまうのが「WebPに対応していないブラウザで見たらどうなるの？」という点ではないでしょうか。せっかく高速化しても、画像が表示されずに真っ白になってしまったら本末転倒です。
特にiPhoneの古い機種や、企業の社内システムで使われているIEなど、WebPが表示されない環境は意外と身近に残っています。

この記事では、WebP非対応ブラウザの具体的な境界線や、どのくらいのユーザーが影響を受けるのか、そしてSEO評価を落とさないための確実なフォールバック対策について、現場の視点からわかりやすく解説していきます。

WebPが表示できないブラウザやOSの具体的な条件と境界線
日本国内における非対応端末のシェアとビジネスへの影響度
画像が表示されないリスクを回避するためのフォールバック技術
WordPressやHTML記述による具体的なWebP対応の実装手順

【現状】非対応なのは「IE」と「古いOS」

まずは、敵を知ることから始めましょう。WebPはGoogleが開発しただけあってChromeとの相性は抜群ですが、それ以外の環境では「ブラウザの種類」だけでなく「OSのバージョン」まで見ないと正確な判断ができません。ここを曖昧にしていると、思わぬところで画像落ちが発生します。

主要ブラウザ（Safari・IE・Edge）の対応状況

結論から言うと、Internet Explorer（IE）は全バージョンでWebPに完全非対応です。IE11であっても表示できません。Microsoftのサポート終了に伴い一般ユーザーの利用は激減していますが、B2Bの案件や官公庁系のシステム案件なんかだと、まだIE互換モードでの表示確認を求められることがありますよね。ここに関しては「非対応である」と割り切って、後述する代替画像（JPEG/PNG）を用意する必要があります。

一方で、FirefoxやEdge（Chromium版）に関しては、現在はほぼ心配いりません。これらは自動更新が普及しているので、WebPに対応していない古いバージョンを使い続けているユーザーは極めて稀だからです。

Microsoft Edgeについて
現在のEdgeはChromeと同じエンジンを使っているのでWebPに完全対応していますが、昔の「レガシーEdge（EdgeHTMLエンジン）」はバージョン18未満だと非対応でした。ただ、Windows Updateで強制的に新しいEdgeに入れ替わっているので、今の実務では無視して大丈夫かなと思います。

iPhoneやMacのOSバージョン問題

ここが一番の落とし穴です。「Safariなら新しいから大丈夫でしょ？」と思っていると痛い目を見ます。Apple製品の場合、ブラウザのバージョンだけでなくOSそのものがWebPのデコード機能を持っているかが重要になってくるんです。

デバイス	OS要件	ブラウザ要件	WebP非対応となる条件
Mac (PC)	macOS 11 Big Sur 以降	Safari 14 以降	macOS 10.15 Catalina 以下の全てのMac
iPhone / iPad	iOS 14 以降	–	iOS 13 以下の全ての端末（iPhone 6など）

特に注意したいのがMacの「Catalina問題」です。macOS 10.15 Catalinaを使っているユーザーは、例えSafariを最新版にアップデートしていても、OSレベルでWebPに対応していないため画像が表示されません。デザイン業界やDTPの現場では、古いソフトを動かすためにOSのアプデを止めている方が結構いらっしゃるので、ターゲットによってはこの層を無視できないんです。

無視できない「日本のiPhoneシェア」の影響

「でも、そんな古いOS使ってる人なんてほとんどいないでしょ？」と思うかもしれません。世界全体で見ればAndroidのシェアが高いのでWebP対応率は非常に高いのですが、日本は世界屈指のiPhone大国です。ここがポイントなんですよね。

日本のスマホシェアの約6〜7割をiPhoneが占めていると言われています。そして、iPhoneは端末寿命が長いので、親のお下がりで古いiPhone 6などを子供が使っているケースや、検証用端末として古いiOSを残している企業も少なくありません。

iOS 13以下のシェアはわずか数パーセントかもしれませんが、母数が大きい日本市場においては、数万人、数十万人規模のユーザーが「WebPが見られない環境」にいる可能性があります。
（出典：公正取引委員会『モバイルOS等に関する実態調査報告書』）

画像が表示されないリスクとは

HTMLやCSSの新しい機能が動かない場合、大抵は「レイアウトが少し崩れる」程度で済みますが、画像フォーマットの非対応はもっと致命的です。「画像が全く表示されない」という状態になります。

もしそれがECサイトの商品画像だったり、LPのメインビジュアルだったりしたらどうでしょう？ユーザーは何が起きているかわからず、単に「壊れているサイト」と判断して離脱してしまいます。これはコンバージョン率（CVR）の低下に直結しますし、直帰率が上がればSEOの評価にも悪影響を及ぼしかねません。「たかが数パーセント」と切り捨てるには、リスクが大きすぎるかなと思います。

非対応環境の確認方法と調べ方

自分のサイトが非対応ブラウザでどう見えるかを確認するには、実機があればベストですが、なかなかそうもいきませんよね。簡易的な確認方法として、Chromeのデベロッパーツールを使う手があります。

簡易確認の手順

Chromeで検証ツールを開く（F12キー）
「ネットワーク状態」タブを開く（なければ三点リーダーから”その他のツール”で探す）
「ユーザーエージェント」のチェックを外し、Customで古いSafari（例: Safari on iOS 13など）の文字列を入力する

ただし、これはあくまでサーバー側が「ユーザーエージェントを見て画像を出し分けている場合」に有効な確認方法です。ブラウザ自身の描画能力をテストするわけではないので、確実な検証には「BrowserStack」などのクロスブラウザテストツールを使うか、実際に古い端末を用意することをおすすめします。

【対策】画像落ちを防ぐ「フォールバック」実装

さて、ここからが本題の技術的な対策です。WebPの恩恵を受けつつ、非対応ブラウザには従来のJPEGやPNGを表示させる仕組みを「フォールバック」と呼びます。これを実装しない手はありません。

基本：JPEGを「予備」として表示する仕組み

基本的な考え方はシンプルです。「ブラウザさん、WebPを表示できますか？」と聞いて、「できます！」ならWebPを、「できません…」ならJPEGを渡す。これを自動でやる仕組みを作ればいいわけです。

アプローチとしては大きく分けて2つあります。

クライアントサイド（HTML）：ブラウザに判断させる（推奨）
サーバーサイド（.htaccess/Nginx）：サーバーが判断してファイルを送り分ける

htaccessでの振り分け設定手順

既存のHTMLコード（imgタグの拡張子など）を書き換えたくない場合は、サーバー側で制御する方法が便利です。Apacheサーバー（多くのレンタルサーバー）なら、.htaccessファイルに記述を追加します。

ブラウザはリクエストを送るときに「Acceptヘッダー」というものの中に「image/webp」を含めることで、自分がWebPに対応していることをサーバーに伝えます。サーバーはこのヘッダーを見て、WebPファイルを返すかどうかを判断するわけです。

Varyヘッダーを忘れずに！
サーバー側で出し分けをする場合、必ず Header append Vary Accept を設定してください。これを忘れると、CDNやキャッシュサーバーが「Chrome用のWebP画像」をキャッシュしてしまい、次にアクセスしてきたIEユーザーにもWebPを返してしまう「キャッシュ汚染」事故が起きます。

プラグインで「WebP変換・出し分け」を自動化

WordPressを使っているなら、プラグインに任せるのが一番手っ取り早いですし、ミスも少ないです。私も案件ではよく以下のプラグインを使います。

EWWW Image Optimizer

老舗の画像圧縮プラグインです。画像のWebP変換だけでなく、HTMLの書き換え（次項で解説するpictureタグへの置換）や、Apacheのリライト設定まで自動でやってくれます。設定画面で「WebP変換」にチェックを入れるだけでほぼ完了するので非常に楽ですね。

Converter for Media

こちらは元々「WebP Converter for Media」という名前でした。サーバーの構成を変えずに、アップロードディレクトリ内の別フォルダにWebPを生成し、対応ブラウザにだけそちらを見せる方式をとっています。万が一プラグインを停止しても元の画像には影響がないので、安全性が高いのが特徴です。

HTMLのpictureタグ活用法

私がマークアップエンジニアとして最も推奨するのが、HTML5の<picture>タグを使った実装です。これはブラウザの標準機能を使うので、サーバーの設定に依存せず、最も確実です。

<picture>
  <!-- WebP対応ブラウザならこれを読み込む -->
  <source srcset="image.webp" type="image/webp">

  <!-- 非対応ブラウザはここ（従来のimgタグ）を読み込む -->
  <img src="image.jpg" alt="画像の説明" width="800" height="600">
</picture>

この記述の素晴らしいところは、上から順にブラウザが「自分が表示できるか」をチェックしてくれる点です。Safari 13やIEは<source>タグのtype="image/webp"を見て「あ、自分これ無理だわ」と判断し、無視して下の<img>タグを読みに行きます。これならGoogleのクローラーにもちゃんと画像情報を伝えられるので、SEO的にもバッチリです。