takato（@n8takato）です！
拡張子webpをブラウザごとに振り分ける方法を知りたい
この記事では上記の課題を解決します。
webpとは画像データ量を軽減することの出来る新たな拡張子です。
しかし、拡張子webpが非対応なブラウザもあります。
非対応なブラウザでサイトを開くと、画像が表示されず空白になってしまいます。
そのため、webpが非対応なブラウザには他の拡張子で表示させる設定をする必要があります。
この記事では、webp非対応なブラウザで確認した際に他の拡張子で画像を表示させる方法を紹介します。
-
この記事でわかること
- webpのブラウザ振り替え方法
WordPressで画像の拡張子をwebpに変換する方法について、他の記事でまとめています。
詳しくは「WordPressで画像の拡張子をwebpに変換する方法を紹介！」を読んでください。
TAKATO BLOG
WordPressで画像の拡張子をwebpに変換する方法を紹介！
WordPressにアップロードされている画像の拡張子をwebpに変換する方法を紹介します！webpに変換するには「EWWW Image Optimizer」というプラグインを使用します。
目次
webpをブラウザごとに振り分ける方法
webp非対応のブラウザで表示した場合、他の拡張子で画像を表示させる必要があります。
この実装は、HTMLのコードのみで行うことが可能です。
下記のコードを参考にしてください。
<picture>
<source type="images/sample.webp" srcset="images/sample.jpg.webp" />
<img src="images/sample.jpg" alt="">
</picture>
この実装をする際は、同じ画像で拡張子の異なるものを2つ用意してください。
上記のコーディングの場合は、webpとjpgの2つの画像を用意しております。もちろんPNGでも大丈夫です。
基本的には拡張子webpの画像が表示されますが、webp非対応のブラウザで表示した場合は、3行目のimgタグに入力されている拡張子の画像が表示される様になります。
最後に
この記事では拡張子webpのブラウザ振り替えの方法を紹介しました。
とても簡単に実装することが出来ます。ぜひ行ってみてください。
