pictureタグで画像形式(webpなど)とレスポンシブ切り替え対応をしよう

  • このエントリーをはてなブックマークに追加

表示速度などの問題でwebp形式を使いたいけれど対応していないブラウザもあるし、レスポンシブの問題もあるしなーという時は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に限らずいろんな画像形式がどのブラウザでも同じ見えるようになると助かりますね…。

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。