レスポンシブサイトで画像の切り替えに便利な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要素

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

<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: noneとblockを切り替えるclassを付与する必要もなくなります。