レスポンシブ画像切り替え

画像によっては、1枚の画像でＰＣでの表示とスマホでの表示を両方ともいい感じで表示するのが難しい場合がある。その時にＰＣ版とスマホ版で画像を切り替える必要がある。
すぐに思いつくのはその２つの画像にクラスつけて、CSSでdisplay:none と　display:blockでそれぞれ切り替える
のが一般的だが、HTMLのみで簡単に画面幅により画像を切り替える方法がある。

 <picture>
   <source media="(max-width: 768px)" srcset="images/kyoto-sp.jpg">
   <img src="images/kyoto-pc.jpg" alt="紅葉">
  <picture>

一行目のsource　mediaでSP版の画像を指定し、２行目でPC版の画像を指定している。