幅記述子「w」を使う

<img>要素の「srcset属性」に、幅記述子「w」を使って複数の画像を指定します。
「sizes属性」で「メディア条件」やソースサイズ値を指定しておけば、ブラウザはそれに一番近い srcsetのリスト内の画像を読み込みます。

PCのかたはウィンドウサイズを小さくしてみてください。
（Chromeなどで表示が切り替わらない場合は、ブラウザのキャッシュをクリアして再読込してみてください）

img要素のHTMLはこちら。

<section>
  <img srcset="img/grape640.jpg 640w,
               img/grape750.jpg 750w,
               img/grape1200.jpg 1200w"
        sizes="(max-width: 640px) 100%,
               (max-width: 750px) 100%,
               100%"
          src="img/grape1200.jpg"
          alt="ぶどう園のぶどうの房のクローズアップ">
</section>

この img要素関連のCSSはこちら（要点のみ）

html {
	background-color:#eee}
body {
	width:100%;
	max-width:1200px; /*bodyが1200pxより大きくならないようにしています*/
	margin:auto;
	background: #fff;
	color: #666}
img {
	display:block;   /*ブロックレベルにしておきます*/
	max-width:100%}  /*親要素内の表示領域にピッタリ合わせられます*/
section {
	margin:20px auto;
	padding:20px;
	display:block}

画素密度記述子「x」を使う

<img>要素の「srcset属性」に、画素密度記述子「x」を使って複数の画像を指定します。

ブラウザはデバイスの解像度にあった画像をチョイスして表示します。
「srcset属性」に対応していないブラウザは src属性の画像を読み込みます。

<img>要素のHTMLはこちら。
「x」を使う指定の場合「sizes属性」は不要です。
1行目の「img/wine300.jpg」のあとの「1x」は省略しています。（記述子が省略されれば「1x」になるので）

<img srcset="img/wine300.jpg,
             img/wine600.jpg 2x,
             img/wine900.jpg 3x"
        src="img/wine300.jpg"
        alt="おすすめワイン"
        width="300" height="200"> <!--サイズを限定しています-->

<img>要素のサイズを確定しています（6行目）
（width・height属性ではなく、CSSで指定してもOK）