画面幅ごとに画像を出し分ける方法

レスポンシブデザインで、画面幅によって表示させる画像を変更したいときはありませんか？
そのような場合、下記のように<picture>要素を用いることで、CSS無しで画像の出し分けを実現することができます。
これにより、画面幅によるレイアウトの変更に対してより柔軟に対応できるようになります。

この場合、画面幅が
・860px以上：img_large.jpg
・400px～860px：img_mid.jpg
・400px以下もしくは<picture>要素がサポートされていない：img_small.jpgの画像が読み込まれます。

■注意点
・<picture>要素内の<img>要素は必須です。これを記述しないと画像が表示されません。
・ブラウザが<picture>要素をサポートしていない場合、もしくは<source>要素の条件を満たさない場合は<img>要素が表示されます。
・<img>要素は一番最後に記述しましょう。<img>要素の後に<source>要素が書かれた場合、無視されます。

以上が、画面幅ごとに画像を出し分ける方法になります。
最後までご覧いただきありがとうございます。