WebPと他の拡張子をブラウザごとに振り分ける方法を紹介!

WebPと他の拡張子をブラウザごとに振り分ける方法を紹介coding

webデザイナーのtakato@enjoying_freeです!

最近はwebpという画像拡張子が話題となり、使用している方が増えていると思います。webpは画質が綺麗な上に容量の少ない拡張子なので、サイト軽量化に繋がります。

しかしブラウザによってはwebp形式の画像が表示されないことがあります。web初心者なら一度は経験したことがあるのではないでしょうか。

今回はなぜ表示されないのかと、ブラウザごとに画像の拡張子を分ける方法を紹介したいと思います。

takato
takato

ブラウザごとに違う拡張子の画像を表示させる方法を紹介するよ!

この記事でわかること

・ブラウザごとに拡張子を振り分ける方法!


webp非対応のブラウザがある

拡張子webpは非対応とされているブラウザがあります。少し前まではSafariが非対応でしたが最近のアップデートでwebpが対応となりました。

しかしユーザーの中にはブラウザのアップデートをしていない人もいます。なのでアップデート前のSafariを使用している方はwebpの画像が表示されないのです。

このような現象に出くわすweb初心者は少なくはないと思います。


基本的にはブラウザを常にアップデートしていると想定してwebp形式のまま公開するwebサイトもあります。しかしwebpのままだと旧Safariを使用している人には画像が表示されないので、ブランドのイメージダウンに繋がります。

webpをjpeg等に戻して貼り付けるという手段もありますが、せっかく軽量化できた拡張子が使用できないのはもったいないです。

なのでブラウザごとに拡張子を振り分ける設定を行う必要があります。

非対応ブラウザにも画像を表示させる方法

上記のような問題に対して賢い対処法は、webp非対応ブラウザユーザーのみ他の拡張子で画像を表示させるという手段です。

HTMLのコーディングのみで、ユーザーの使用しているブラウザに応じて拡張子を変更することができます。

下記のコードを入力してください。


<picture>
 <source type="images/sample.webp" srcset="images/sample.jpg.webp" />
 <img src="images/sample.jpg" alt="">
</picture>

上記コードと共にwebpとjpg(又はpng)形式の画像を用意してください。

基本的にはwebpで表示され、webp非対応のブラウザには指定した拡張子の画像が表示されるようになります。

3行目のimgの部分にはwebp非対応の場合に表示する画像を入力してください。

最後に

以上がブラウザごとに表示する画像の拡張子を振り分ける方法でした。非常に簡単に振り分けることができますね!

本記事ではデザイン・コーディングに関する記事を書いております。下記の記事も合わせて読んでみてください。