画像の用意は２枚まで
とにかくシンプルにしたい（sizesとかvwとか嫌だ）
レスポンシブでスマホもPCも全部対応したい
スマホの横持ちは無視！というより軽さ重視
タブレットはいろんなサイズあるがiPad基準に
iPadはPC側としよう（スマホ／PC＆タブレット）

画像幅1600pxと800pxの２枚を用意。
width="800"は紛らわしいので省いてあります。
レスポンシブ対応のCSS設定してあります。img { max-width: 100%; height: auto;}

srcsetに画像指定１枚

iPadの幅は768pxだから767px未満にして767wでOK？

ダメだね、どの幅でも800.jpgのままだ。

<img src="1600.jpg" srcset="800.jpg 767w">

srcsetこうやって(,)カンマで２枚に

これで768px以上は1600.jpgになるんだ〜

<img src="1600.jpg" srcset="800.jpg 767w, 1600.jpg">

src側は小さい画像で良くね？

srcset効かない古いブラウザはRetinaディスプレイじゃない確率高いし、普通のsrcは小さい画像でいっか〜

これで完成！

<img src="800.jpg" srcset="800.jpg 767w, 1600.jpg">

要は、こんな感じかな
<img src="スマホ画像.jpg" srcset="スマホ画像.jpg 767w, PC＆タブレット.jpg">