閲覧している環境

スクリーン：

ビューポート：

デバイスピクセル比：

ビューポートサイズと解像度で判断して出し分け(srcset)

Demo01

画像の表示サイズは0~1000px→100%、1000px以上→1000px固定(CSSで指定)

画像は横幅200px~2000pxまで200px刻みで指定している。

sizes="(max-width: 1000px) 100vw, 1000px"にしている。

Demo02

画像を2つ横並びにしている。

画像の表示サイズは0~1000px→50%、1000px以上→500px固定(CSSで指定)

画像は横幅200px~2000pxまで200px刻みで指定している。

sizes="(max-width: 1000px) 100vw, 1000px"にしている。

Demo03

画像を2つ横並びにしている。

画像の表示サイズは0~1000px→50%、1000px以上→500px固定(CSSで指定)

画像は横幅200px~2000pxまで200px刻みで指定している。

sizes="(max-width: 1000px) 50vw, 500px"にしている。

Demo02との違いはsizes属性の指定のみ。