[ レスポンシブに画像をRetina対応させる ] HTML srcset指定の書き方パターン

HTMLのsrcsetを使うとRetina対応のブラウザに高解像度な画像のみを読み込ませることができ、javascriptで低解像度な画像を差し替えたりするやり方と違って無意味な通信を避けることができるみたいです。
ちなみに未対応のブラウザにはpicturefill.jsを読み込ませることで対応させることも出来るみたいですね。
srcsetの指定の仕方にはいくつかパターンがあるようなのでまとめておきたいと思います。

基本

<img src="images/sample.jpg" //未対応のブラウザ用
     srcset="images/sample.jpg 1x,　//通常ディスプレイ向けの画像
             images/sample@2x.jpg 2x"//Retinaディスプレイ向けの画像
     alt="sample image" />

ウインドウサイズ別に指定する

①＜picture＞要素のsourceをつかうやり方
上記のやり方よりも更に詳細に指定することが可能になります。例では画面サイズ320px以下のブラウザと640以下でそれぞれ違う画像を表示させています。

<picture>
  <source media="(min-width: 320px)" srcset="sample_small.jpg 1x, sample_small@2x.jpg 2x">
  <source media="(min-width: 640px)" srcset="sample_big.jpg 1x, sample_big@2x.jpg 2x">
  <img src="sample_small.jpg" alt="Example image"> //未対応のブラウザ用
</picture>

②シンプルに書く方法
①はブラウザごとにそれぞれ通常ディスプレイ用とRetina用の画像を指定していましたが、こちらはそこまで細かく指定していません。

<img src="images/sample_1.jpg" //未対応のブラウザ用
     srcset="images/sample_2.jpg 320w,　//画面サイズ 320px以下向けの画像
             images/sample_3.jpg 640w" //画面サイズ 640px以下向けの画像
     alt="sample image" />