レスポンシブでPC版とスマホ版で画像を分けたい

レスポンシブでPC版とスマホ版で画像を出し分けたいときってありますよね?

よくやりがちなのは

.pc-only{
  display: block;
}
.sp-only{
  display: none;
}
@media screen and (max-width: 768px){
  .pc-only{
    display: none;
  }
  .sp-only{
    display: block;
  }
}
<img class="pc-only" src="pc画像" alt="">
<img class="sp-only" src="スマホ画像" alt="">

みたいな感じで出し分ける方法。
これだと両方の画像をリクエストしてしまうので大量にあった場合、ページが重たくなります。
 
そこで自分がよくやる方法を紹介します。
まずは下記のような感じで画像を設置します。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" data-image-pc="pc画像" data-image-sp="スマホ画像">

srcに入っているのは1*1の透明な画像をBase64にエンコードしたものです。
初回表示でsrcが切り替わるまでのダミー画像となります。

そしてdata属性にpc画像のパス、スマホ画像のパスをそれぞれ設定。

次にjsの記述です。

deviceChangeImage();
$(window).on('deviceChange', deviceChangeImage);

function deviceChangeImage(){
  var _device = $('body').hasClass('pc') ? 'pc' : 'sp';
  $('[data-image-pc]').each(function(){
    $(this).attr('src', $(this).data('image-' + _device));
  });
}

jsでレスポンシブ対応
こちらの記事で設定した
$(window).trigger('deviceChange');
をつかってブレイクポイントでdata属性から値を取得し、srcを書き換えています。