レスポンシブイメージを使う

※2017年1月17日修正

HTML 5.1が11月1日にW3Cによって勧告されました。
HTML 5.1で新たに導入されたレスポンシブイメージが結構よい感じです。
以前はPC、スマーフォン、タブレットで画像を切り替えるには画像をdisplay:noneやvisibility:hiddenなど設定しメディアクエリで振り分けるか、画像をjsで変えるかくらいしかありませんでした。
レスポンシブイメージを使うと、複雑なjsやcssなどは不要で画像を切り替えることができます。

デモページ

デモページではブラウザ幅が
0~409px
410px~639px
640px~979px
980px~
の4段階で画像が変化していきます。

※2017年1月17日HTML修正しました
HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js"></script>
<picture>
<source media="(min-width:980px)" srcset="img/demo/pc.jpg" sizes="100vw">
<source media="(min-width:640px)" srcset="img/demo/sp980.jpg" sizes="100vw">
<source media="(min-width:410px)" srcset="img/demo/sp640.jpg" sizes="100vw">
<img src="img/demo/sp410.jpg">
</picture>

CSS

.demo_post{ 
 picture { 
  display: block; 
  width: 100%; 
  text-align: center;
 }
}

＜picture＞内に記述していきます。
＜picture＞の中には＜source＞と＜img＞の要素を含むことができます。

下のソースで説明すると・・・
＜source media=”(min-width:410px)” srcset=”img/demo/sp640.jpg” sizes=”100vw”＞
media 画像を表示する横幅を指定します。(横幅410pxから)
srcset 画像のURL
sizes 画像を表示する横幅です　100vwはviewport width(ビューポートの幅に対する割合)のことです。

SCSS