- レスポンシブサイトを作るときは、パフォーマンスの観点から必要な画像サイズに必要十分な画像をDLするようにするため、複数のサイズバリエーションを用意するのが定石。さじ加減にルールはないが、だいたい3種類が一般的。
- 解像度が高いRetinaなどのディスプレイには表示サイズの２倍の画像を用意して対応することが多い。
- imgのsrcsetを使うことで表示デバイスやその解像度に応じたフォールバックができるようになる。
- 例えば
<img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">だと横幅に応じて画像が変わる - srcset対応してないときはsrcの画像が適用される(それはそう)
参考リンク - Serve Responsive Images - picture要素やsrcset属性による画像のレスポンシブ、高解像度対応
