とりあえず3行で

srcsetはHTML5で策定された新属性
この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset)

srcset属性について詳しく

詳しく書いてあり、良い記事です。
srcset と sizes エリック・ポーティス文と絵鈴木丈訳

個人的には、印象に残ったのは グリンピースおいしい^q^ でした

メリット

Retinaディスプレイ用に画像を切り替える
ウィンドウサイズに合わせて画像を切り替える
ウィンドウサイズに合わせて動的に画像を切り替える

->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない）

引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう

デメリット

対応ブラウザが十分ではない(IE系は未対応/Can I Use...）
(LazyLoadと相性はよくない)

実際に使ってみる

srcset属性を使ったタグの例

srcset属性は　<img>, <picture>タグで利用できます

imgタグを使った例

<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w"
     sizes="50vw"
>

上記で使っている単位

320w, 640w ... w とは？

その画像を表示したい時のブラウザ幅px と捉えておけばOKです
(昔はViewportのサイズだったらしいです)

sizes="50vw” の　vw とは？

viewport widthの略称です
ビューポートの幅に対する割合(%)　を指します

ビューポート＝ブラウザ幅として扱ってOKです
（Retinaが入ってくるとややこしいので一旦おいておきます）

つまり、　900pxでブラウザを開いていたら以下のようになります

100vw = 900px * 100% = 900px　
50vw  = 900px * 50%  = 450px
30vw  = 900px * 30%  = 270px

単位がわかったところでタグの解説

imgタグを使ったタグの中身

<img src="%画像パス%"
     srcset="%画像A% %画像Aを表示したい時のブラウザ幅%w,
             %画像B% %画像Bを表示したい時のブラウザ幅%w"
     sizes="%ビューポートの幅に対する割合%vw"
>

つまり…srcset属性は

繰り返しになってしまいますが、

srcset="画像URL その画像を表示したい時の想定ブラウザ幅(px), ..."

と書いてしまえば良いです。

srcset="img/example-img-320.jpg 320w,..."
と書けば　ブラウザ幅が320pxの時は srcに設定しているURLではなく
img/example-img-320.jpg　が読み込まれます

sizesって何？

しれっと、上タグで書いているsizes属性。
srcset属性と組み合わせることで
デバイスピクセル比、ビューポート、画面サイズなどに応じた、複数のイメージソースを出し分けることが可能に

こんな風に書きます
sizes="[メディア・クエリ] [長さ], [メディア・クエリ] [長さ] ..."

補足:
メディア・クエリとペアになっていない長さは「デフォルトの長さ」
マッチするメディア・クエリがなかったとき、この長さが使われる

sizes属性の例

以下の記述を例にした場合

sizes="(max-width: 480px) 100vw, 480px

(max-width: 480px) 100vw
480px

の２つの条件を設定した状態になります。

この場合、

ブラウザ幅が 480px以下の場合は、viewportの幅に対して100パーセントの幅で計算してsrcsetから画像を選びなさい
そうでなければ、480pxのブラウザ幅として計算して画像を選びなさい

と指定しているはず。

Retinaの場合は…？

忘れているかもしれませんが
Retinaディスプレイの場合は、解像度が2倍です。

<img src="img/example-img.jpg"
     srcset="img/example-img-320.jpg 320w,
             img/example-img-640.jpg 640w" >

このようにタグを設定した場合、
Retinaで320pxのブラウザ幅でページを開くと、
img/example-img-640.jpg　の画像が読み込まれます。

srcset属性の他の設定方法

Retinaのとき

<img src="img/example-img.jpg"
     srcset="img/example-img.jpg 1x,
             img/example-img@2x.jpg 2x"
     alt="Example image">

1x で解像度1倍のとき
2x で解像度2倍のとき ※Retinaのとき

※2x記法とsizes属性によるメディアクエリーを混ぜてはダメ！

導入する上で気をつけること

size属性にメディアクエリーを書く必要がある

ブラウザがsrcsetを使って画像を選択する際の判断材料は　
表示したい画像の画像の表示幅ではなく
ブラウザ全体の表示幅＋解像度 です。

これを意識してコーディングするのは慣れないと結構面倒（でした）

LazyLoadと両立させる場合は一工夫を

LazyLoadをしたい場合は、src属性だけではなく　srcset属性も対応しましょう。

WordPress用ですが、data-srcset属性を作成して対応しているようです

http://celtislab.net/archives/20160315/lazy-load-srcset/

対応ブラウザにIEがない問題

（そこまでやるか、は別として…）
picturefill というjsライブラリを導入することでクリアできるはず

https://github.com/scottjehl/picturefill

参考リンク

srcset と sizes エリック・ポーティス文と絵鈴木丈訳
 srcset属性策定仕様
 pictureタグはまだ策定中
 解像度の高い画面にだけ高解像度の画像を表示する方法
 CSS には vw, vh, vmin, vmax という単位がある
 レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定

srcset属性について