Posted at

レスポンシブサイトで画像の切り替えに便利なpicture要素

レスポンシブサイト開発で必ず対応するであろうPC,Tablet,Smartphoneでの画像・図の切り替え。

皆さんはどのような方法で対応しているでしょうか。

<img class="display-pc" src="hoge_pc.png" alt="ほげ">

<img class="display-sp" src="hoge_sp.png" alt="ほげ">

上記のようにclassを付与してCSSのメディアクエリによって出し分ける方法が一般的でしょうか?

上記の方法以外にも画像をメディアによって出し分けられるpicture要素を紹介します。


picture要素

videoaudioと同じ埋め込みコンテンツの要素で、書き方も同じです。

<picture>

<source srcset="hoge_pc.png" media="(min-width: 980px)">
<source srcset="hoge_tb.png" media="(min-width: 375px)">
<img src="hoge_sp.png" alt="ほげ">
</picture>

source要素のsrcset属性に画像を指定し、media属性にメディアクエリと同じようにメディア条件を指定します。

ユーザーエージェントがメディア条件を判定し、falseと判定された場合に次のsourceを判定することになります。

pictureを使えばマークアップ的にも見やすく、display: noneblockを切り替えるclassを付与する必要もなくなります。