ウインドウ幅：px

ディスプレイ：

違う画像に切り替える pictureタグ + sourceタグ

画面幅が769px以上の時（パソコン～タブレット）
img01.jpg

画面幅が768px以下の時（スマホ）
img02.jpg

上記が当てはまらない時（source未対応のブラウザ等）
img03.jpg
画像

同じ画像で解像度を切り替える srcset属性

デバイスピクセル比（解像度の大きさ）にあわせて別々の画像を読み込む

img + srcsetの場合

通常のディスプレイ：1x.jpg
Retinaディスプレイ：2x.jpg
どれにも当てはまらない場合：other.jpg
画像
img + srcsetの場合、ブラウザの仕様によって最初に読み込んだ1種類の画像しか表示されない可能性があります。

picture + sourceの場合

画面幅769px以上（PC・タブレット）
通常のディスプレイ：1x.jpg
Retinaディスプレイ：2x.jpg

画面幅768px以下（スマホ）
通常のディスプレイ：1x-sp.jpg
Retinaディスプレイ：2x-sp.jpg

その他（source未対応のブラウザ）
img03.jpg
画像

画面幅（ビューポート）に応じて画像を切り替える

img + srcsetの場合

画面幅320px以上：img1x.jpg
画面幅640px以上：img2x.jpg
その他（source未対応のブラウザ）：other.jpg

画像
img + srcsetの場合、ブラウザの仕様によって最初に読み込んだ1種類の画像しか表示されない可能性があります。

picture + sourceの場合

画面幅769px以上
1x.jpg または 2x.jpg

画面幅768px以下
1x-sp.jpg または 2x-sp.jpg

その他（source未対応のブラウザ）
other.jpg
画像

sizes属性でサイズをコントロール

img + srcsetの場合

画面幅1400px以上：1x.jpg
画面幅半分の600pxで表示される

画面幅1200以上：2x.jpg
画面幅半分の700pxで表示される

その他（source未対応のブラウザ）
other.jpg
画像
img + srcsetの場合、ブラウザの仕様によって最初に読み込んだ1種類の画像しか表示されない可能性があります。

picture + sourceの場合

画面幅769px以上
1x.jpg または 2x.jpg が50vwで表示される

画面幅768px以下
1x-sp.jpg または 2x-sp.jpg が50vwで表示される

その他（source未対応のブラウザ）
other.jpg
画像

条件分岐によるsizes属性のコントロール

img + srcsetの場合

画面幅が360pxまで
img03.jpg が表示され、画面幅最大まで広がる

画面幅が361~800px
img02.jpg が表示され、画面幅75%ほどのサイズまで広がる

メディアクエリが無い50vwはどの条件にも当てはまらない場合に適用されます。
画像
img + srcsetの場合、ブラウザの仕様によって最初に読み込んだ1種類の画像しか表示されない可能性があります。

picture + sourceの場合

画面幅320px以下
2x-sp.jpg が表示され、画面幅最大まで広がる

画面幅640px以下
2x-sp.jpg が表示され、画面幅75%のサイズまで広がる

画面幅641~768px
2x-sp.jpg が画面幅50%まで広がる

画面幅800px以下
1x.jpg が表示され、画面幅最大まで広がる

画面幅1200px以下
2x.jpg が表示され、画面幅75%のサイズまで広がる

画面幅1201px以上
1x.jpg が画面幅50%まで広がる
画像