レスポンシブでの画像の切り替えはpictureとsrcsetで

レスポンシブイメージとは

ざっくり言うと「JSやCSSを使わなくとも、デバイス（ブラウザの幅）ごとに画像を指定出来る」方法。
なのでPCサイズの大きな画像を、狭い幅のスマホで縮小表示するデータ量の無駄や、デバイス幅で画像を変えたい時などHTMLだけで簡潔出来ると言う便利な代物。

ただしieには使えないのでポリフィル「Picturefill.js」を使う必要がある。
読み込むだけでOK。（ieって何？と言う人には不要）

Picturefill

アートディレクション

とりあえず何にも考えず画像を設置するとこんな感じだろう。

/* HTML */
<img src="images/original.jpg" alt="元の画像">

状態に応じて画像を変えることをアートディレクションって言うらしい。それに準じて書いてみる。

small.jpg・・・スマホ用サイズ
medium.jpg・・・タブレット用サイズ
large.jpg・・・PC用サイズ

/* HTML */
<picture>
  <source media="(min-width: 960px)" srcset="images/large.jpg">
  <source media="(min-width: 640px)" srcset="images/medium.jpg">
  <source media="(min-width: 320px)" srcset="images/small.jpg">
  <img src="images/original.jpg" alt="元の画像">
</picture>

mediaの指定は適宜変更。ただし一番最後にある「imgタグ」は必須。
これはすべてのsourceタグに該当しない場合表示される。
例では「original」としてあるが、PC用の画像だとすべてカバー出来るから無駄がないと思う。
他にもRetinaに対応させたり、source内に複数画像を指定したり盛り沢山に出来るが「Simple is best」。
必要以上に盛り込みすぎると煩雑になり、本末転倒なので個人的にはオススメしない。
より突っ込んだ内容は以下参照。

MDN