imageSet.js

スクリプト

$(function() {
  // 処理の対象になる要素を取得。
  var $imageSet = $('.js-image-set');
  // ブレイクポイントを2箇所指定する。
  var tb = 768;
  var pc = 1000;

  function imageSet() {
    // 現在のウィンドウサイズを取得する。
    var windowWidth = parseInt(window.innerWidth);
    // 付与するsrc属性を初期化する。
    var setData = {};

    $imageSet.each(function() {
      var $this = $(this);
      // カスタムデータ属性から取得し、変数に格納する。
      var $data = $this.data('image-set');

      // 引数に空でない文字列があれば返す。
      function checkData(data1, data2, data3) {
        if(data1) {
          return data1;
        } else if(data2) {
            return data2;
        } else if(data3) {
          return data3;
        } else {
          return false;
        }
      }

      // 768px以上1000px未満ではtb、なければspかpc
      if(windowWidth >= tb && windowWidth < pc) {
        setData = checkData($data[1], $data[0], $data[2]);
        // 1000px以上ではpc、なければtbかsp
      } else if(windowWidth >= pc) {
        setData = checkData($data[2], $data[1], $data[0]);
        // 768px未満ではsp、なければtbかpc
      } else {
        setData = checkData($data[0], $data[1], $data[2]);
      }
      // 取得したパスでsrc属性を書き換える。
      $this.attr('src', setData);
    });
  }
  imageSet()

  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      imageSet();
    }, 200);
  });
});

カスタムデータ属性には画像ファイルのパスか、空文字を含めた文字列を3つ指定する。指定していない（空文字）のブレイクポイントは無視され小さいサイズの画像が表示される。src属性は指定しても、してなくても動作する。

<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "image_tb.jpg", "image_pc.jpg"]'>
<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "", "image_pc.jpg"]'>
<img src="" class="js-image-set" data-image-set='["image_sp.jpg", "image_tb.jpg", ""]'>