レスポンシブデザインでコーディングする場合に、
画面のサイズやに応じた画像を読み込むためにはsrcsetやsizes属性の設定が必要です💡
ただ、srcsetやsizesの使い方がすごくややこしい・・・😢
なので、ここにまとめておこうと思います。

まずは、画像配置の基本の形

<img src="./img-150w.jpg" alt="150pxの正方形">
<img src="./img-300w.jpg" alt="300pxの正方形">
<img src="./img-600w.jpg" alt="600pxの正方形">

alt属性は必ず入れましょう💡

3つの画像を特に何も指定せずに配置したので、それぞれの画像サイズのまま表示されました👌
表示サイズ自体の調整はCSSで行えるので、
srcsetを使う目的は、最適なサイズの画像のみを読み込んで、余分な通信量を減らそう！ということになります。

srcset属性で、画面のサイズや解像度に応じて読み込む方法は3通り。
他にもあるかもしれないけど・・・

• srcset属性で画面の解像度のみに応じて画像を読み込む場合
• srcset属性で画面の幅と解像度に応じて画像を読み込む場合
• PCとスマホで読み込む画像のサイズを変更しつつ、画面の幅と解像度に応じて画像を読み込む場合

srcset属性で画面の解像度のみに応じて画像を読み込む場合

解像度のみに応じて適切なサイズの画像を読み込む場合は、srcset属性に画像のパスと適用したい画面の密度（デバイスピクセル比）をx記述子で「,」区切りで記載してゆく。

<img
  src="./img.jpg"
  srcset="./img-150w.jpg,
          ./img-300w.jpg 2x,
          ./img-600w.jpg 3x"
  alt="">

デバイスピクセル比が1の画面で見た場合には、img-150w.jpg、
デバイスピクセル比が2の画面で見た場合には、img-300w.jpg、
デバイスピクセル比が3の画面で見た場合には、img-600w.jpgが読み込まれて表示されます。
画面の幅には関係なく、解像度のみで判断されます🙅‍♀️

demo

ディベロッパーツールでデバイスピクセル比を変更して確認してみてください💡

srcset属性で画面の幅と解像度に応じて画像読み込む場合

画面の幅に応じて適切なサイズの画像を読み込む場合は、srcset属性に画像のパスと、画像の横幅（ピクセル数）をw記述子で「,」区切りで記載してゆく。
さらに、この場合にはsizes属性が必須です。
表示したい画像のサイズを記載します💡

<img
  src="./img.jpg"
  srcset="./img-150w.jpg 150w,
          ./img-300w.jpg 300w,
          ./img-600w.jpg 600w"
  sizes="150px"
  alt="">

見ているPCやスマホのデバイスピクセル比と表示したいサイズを計算して一番最適な画像を読み込んで表示します。
デバイスピクセル比が2のPCで見た場合には、img-300w.jpgの画像が読み込まれて150pxの幅で表示されます。（CSSで特に指定がない場合）

demo

ディベロッパーツールを使えば、ブラウザ上で横幅とデバイスピクセル比を変えて表示を確認することができます🙆‍♀️

PCとスマホで表示する画像のサイズを変えつつ読み込む

画面のサイズに応じて表示したい画像を変更したい場合、、
スマホの時は1カラム表示で300px幅で画像を表示したい、
PCの時は4カラムにして150px幅で画像を表示したい的なとき、、
あると思います🙋‍♀️

sizes属性に、画面幅の条件を追加します💡
max-width、min-widthを使って、画面の幅の条件と、表示したい画像のサイズを「,」区切りで設定していく。

<img
  src="./img.jpg"
  srcset="./img-150w.jpg 150w,
          ./img-300w.jpg 300w,
          ./img-600w.jpg 600w"
  sizes="(max-width:375px) 300px,
         (max-width:768px) 100px,
         150px"
  alt="">

上記の場合は375px以下の画面幅で見た場合は、
srcset属性に書いている画像のうち、デバイスピクセル比を加味した上で300pxで表示するのに一番最適な画像を読み込み、300pxで表示します。

demo

画面の幅が500px、デバイスピクセル比が2の画面で見た場合には、
（max-width:768px）100pxが採用され、
必要な横幅のピクセル数は200になります。
結果、横幅200pxを超える一番小さいサイズのimg-300w.jpgが読み込まれます👌

こうかくとややこしい感じがしますが、きれいに表示される最低容量の画像のみを読み込んでくれる、ということになります🙆‍♀️

にしても、、<img>がものすごく長くなる〜
軽量で美しいサイトを作ろうと思うと、大変だな😇

<picture>についてはまた今度にします。