takato（@n8takato）です！
拡張子webpをブラウザごとに振り分ける方法を知りたい
この記事は上記の課題に向けて作成しています。
webpとは画像データ量を軽減することの出来る新たな拡張子です。
しかし拡張子webpが非対応なブラウザもあります。
非対応なブラウザでサイトを見ると画像部分が空白になってしまいます。
そうならないためにブラウザごとで振り分ける方法を紹介します。
この記事を読むメリット
- webpをブラウザごとに振り分ける方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
〜個人的にオススメなwebデザインスクール3選〜
今なら無料オンライン説明会実施中です！
興味のあるスクールに申し込んでみてください！
目次
webpをブラウザごとに振り分ける方法
webp非対応のブラウザでサイトを表示した場合他の拡張子の画像を表示させる必要があります。
この実装はHTMLのコードのみで行うことが可能です。
実際に必要となるコードは下記のものになります。
<picture>
<source type="images/sample.webp" srcset="images/sample.jpg.webp" />
<img src="images/sample.jpg" alt="">
</picture>
コード自体は4行のみとなります。
この実装をする際は同じ画像で拡張子の異なるものを2つ用意してください。
上記のコーディングの場合はwebpとjpgの2つの画像を用意しております。もちろんPNGでも大丈夫です。基本的にはwebpが表示されますが、webpが表示出来ない場合はもう一つの拡張子の画像が表示されるようになります。
上記の方法でwebpをブラウザごとに振り分けることが出来ます。
webpのブラウザ振り分けは簡単！
最後にまとめです。
- 拡張子の振り分けは上記のコードで実装可能
- 振り分ける際は同じ画像で異なる拡張子のものを2つ用意する
以上です。
とても簡単なので是非実装してみてください。