表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時はpictureタグでうまく切り替えます。
コード
とりあえずコードです。|
1 2 3 4 5 |
<picture> <source srcset="sample.webp" media="(min-width: 767px)" type="image/webp"> <source srcset="sample_sp.jpg" media="(max-width: 768px)"/> <img src="sample.jpg" alt="画像の切り替え"/> </picture> |
DEMO
第1候補で『sample.webp』を表示させます。画面を縮めた時にはほかの画像を表示させたいので、メディアクエリでmin-widthを設定します（次で設定するmax-widthの1つ前の数字）。
第2候補で画面を768px以下に縮めた時の画像を『sample_sp.jpg』表示します。基本的にはタブレット・スマートフォンの時の表示になりますね。
ここでwebPを指定したい…ところですが2020年8月現在safariがwebP形式に対応していないので、jpgやpngなどお馴染みのものにしておいた方が無難です。管理の面でも楽なので…。
ちなみにsafari14でwebP対応する かも しれないみたいです。
第3候補で、どれにも当てはまらないときは通常のjpg画像『sample.jpg』を表示させます。
そもそもpictureタグをデフォルトで対応していないIE以外はsafariの時の表示くらいかと思います。
これで表示速度にも配慮した形になりました。
現状だと修正漏れなどがあったらいけないので、『第1候補』として挙げた画像あたりは画像の差し替えがないことが確定してから書いた方がいいかもしれません。
webpに限らずいろんな画像形式がどのブラウザでも同じ見えるようになると助かりますね…。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/dHlVH5SfTf0
