閲覧している環境

スクリーン：

ビューポート：

デバイスピクセル比：

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

imgタグ

...

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

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

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

背景画像(background-image)

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

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

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