【メリット有！】デバイスに合わせて画像の表示を切り替えるpictureタグについて

pictureタグとは

pictureタグを使うとCSSではなくHTMLでデバイスに応じた画像の表示を行うことができます。

使い方

sourceタグには画像のパスと画像を表示する条件を指定することができます。

srcsetに画像のパスを、mediaには画像を表示する条件を指定します。
mediaの指定は通常のCSSと同様のブラウザ幅で切り替える書き方でOK!

画像の表示の優先順位は最初のsourceタグが最も優先されます。
例の場合の優先度は「画像URL1」「画像URL2」となります。
また、sourceタグは複数記述しても問題ありません。

記述されたsourceタグのどれも表示できない場合、imgタグの画像が表示されます。

メリット

デバイスによって画像を切り替える方法はCSSでも可能です。
しかしCSSでの切り替えでは、不要な画像も一度読み込まれるため表示速度に影響することがあります。
pictureタグを使用するとデバイスの対象ではない画像は読み込まれないのでCSSより表示速度が早くなるようです。

参考：picture要素を使うとレスポンシブイメージの表示速度が速くなる？