日本語苦手だから。。解説サイト読むのも苦手です。（英語に至っては量に圧倒されて卒倒しますYO!）

今までで一番わかりやすかったかも。

HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

ほうほう。。
で。
いったん結論。

まえは最少画角が・・・とかviewportが・・・とかウンウン考えてたけど、これでえんじゃね。

まえに偉いっぽいひとの英語の記事で、単純にx1 x2で分岐するのもこれから解像度変わったときに柔軟性がないから大変といったのを読んだ気がするのでそれに感化されている私は結局何も考えず下記でいきます

<picture>
    <source media="(max-width:736px)" srcset="/assets/images/teaser/text1_sp.png">
    <source media="(min-width:737px)" srcset="/assets/images/teaser/text1_pc.png 930w,/gaiden/assets/images/teaser/text1_pc@2x.png 1860w">
    <img srcset="/assets/images/teaser/text1_sp.png" alt="">
</picture>

SP・PC切り分けはmediaで。
PC用レイアウトでの出し分けは単純に画像幅をwに入れている。
レイアウトのサイズはsizesを使わずcssで（vwだと最大幅以上とか分岐増えて考えるのめんどい）

ホントはSPもwによって出しわけを入れたほうがええんやろけど、PCでSP画角で見ている人2割に満たないという統計を見たので
それならいったんいっかなって。他にリソースをさきたい。