こんにちは、阿久梨絵です！
Webサイトの軽量化で欠かせない存在になった WebP。
JPEGより軽く、PNGのように透過もでき、アニメーションまで扱える便利な画像形式です。
ただし、
「WebPが表示されない」＝ブラウザが非対応
というケースはいまでも起こり得ます。
この記事では、2026年時点での WebP 対応状況を、初心者にもわかりやすくまとめます。
WebPはほとんどの主要ブラウザで対応済み
まず安心してほしいのは、主要ブラウザはすべてWebP対応済みということ。
・Chrome
・Firefox
・Safari（14以降）
・Edge
これらはすべて WebP を表示できます。
「非対応ブラウザ」はどれ？
結論から言うと、古いブラウザや特殊環境のブラウザが該当します。
1. Internet Explorer（IE）
・完全非対応
・2022年にサポート終了したため、今後も対応することはありません
2. 古いSafari（バージョン14未満）
・iOS・macOS ともに、古い端末では WebP が表示できません
・Safari 14（2020年）以降は対応済み
3. 古いAndroidブラウザ・古いモバイルブラウザ
・標準ブラウザ時代の Android（Chrome登場前）
・一部の古いモバイルブラウザ
（古い環境ではWebPがサポートされていないケースが残っています）
4. 企業内のレガシー環境
・独自ブラウザ
・IEモードを強制している環境
・古い端末を使い続けているケース
WebPが表示されない相談の多くは、このパターンです。
WebPが表示されないときのチェックポイント
「非対応ブラウザかどうか」を見分けるために、次のポイントを確認するとスムーズです。
① ブラウザのバージョン
Safari 14未満、IE、古いAndroidブラウザは要注意。
② 企業PCかどうか
セキュリティポリシーで古いブラウザが固定されていることがあります。
③ 画像の壊れ・変換ミス
WebP非対応と見せかけて、実はファイル破損というケースもあります。
非対応ブラウザでも安心して表示させる方法
Web制作では、WebP非対応ブラウザ向けにフォールバックを用意するのが一般的です。
以下、表記で半角<は、全角＜を使用しています。
1. ＜picture> タグで複数形式を用意する
＜picture>
＜source srcset=”image.webp” type=”image/webp”>
＜img src=”image.jpg” alt=”画像の説明”>
＜/picture>
WebP対応ブラウザ → WebP
非対応ブラウザ → JPEG
という切り替えが自動で行われます。
2. JavaScriptで判定して出し分ける
確実に制御したい場合に使われる方法です。
まとめ
・主要ブラウザはすべてWebP対応済み
・非対応なのは IE・古いSafari・古いAndroidブラウザ
・企業PCなどレガシー環境では今も非対応が残る
・＜picture> タグでフォールバックを用意すれば安心
WebPは今や“標準”と言えるほど普及していますが、
「古い環境の読者もいる」という前提で運用すると、より優しいWebサイトになります。
阿久梨絵でした！
