パソコンでブラウザ幅を大きくしたり小さくしたりして動作を確認してください。

imgタグで出力する画像を最適化する

何も指定してない場合

高さ固定

img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

縦横比を維持

img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}

backgroundで出力する画像を最適化する

高さ固定

.bk-img {
  width: 100%;
  height: 150px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

縦横比を維持

.bk-img {
  width: 100%;
  height: min(15vw, 150px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}