<picture>要素の 子要素<source> で「sizes属性」を使う
<img>要素の「sizes属性」の使い方と同じように、<picture>要素の 子要素<source> で「sizes属性」を使うことができます。
この場合、「srcset属性」には「幅記述子 w」を使って複数の画像の候補をリストにしておきます。
PCの方はウィンドウサイズを広げたり狭めたりしてみてください。画像がウィンドウ幅に合わせて切り替わります。（Chromeなどで表示が切り替わらない場合は、ブラウザのキャッシュをクリアして再読込してみてください）
スマートフォンの方は、4インチディスプレイ（iPhone SE, 5cなど）だと幅640px、4.7インチ（iPhone7, 8など）あたりで幅750pxのの画像が表示されます。
HTMLはこちら。
<section>
<picture>
<source srcset="img/berries640.jpg 640w,
img/berries750.jpg 750w,
img/berries1200.jpg 1200w"
sizes="(max-width: 640px) 100%,
(max-width: 750px) 100%,
100%">
<img src="img/berries1200.jpg" alt="黄色いベリー">
</picture>
</section>
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}