モバイルデバイスでは正方形に近い画像が合いやすいが、そのままの縦横比だと横幅の広い PC 画面では巨大な画像になってしまう。 適切な画像を用意して出し分けることができれば便利である。

HTML 5.1 で追加された picture 要素を使うと、画面の横幅に応じてメディアクエリによって画像を出し分けることができる。

<picture>
  <source media="(min-width: 768px)" srcset="a.png">
  <source media="(min-width: 576px)" srcset="b.png">
  <source srcset="c.png">
  <img src="c.png" alt="">
</picture>

従来の img も必ず指定する。これは picture 要素に対応していないブラウザのためである。

参考サイト: https://qiita.com/tonkotsuboy_com/items/8c7c7b5f4794c95db805