UPDATE：2024.5.17
- CATEGORY
【メリット有！】デバイスに合わせて画像の表示を切り替えるpictureタグについて
Contents
pictureタグとは
<picture> は HTML の要素で、0 個以上の <source> 要素と 1 つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。
引用：picture 画像要素：MDN Web Docs
pictureタグを使うとCSSではなくHTMLでデバイスに応じた画像の表示を行うことができます。
使い方
srcsetに画像のパスを、mediaには画像を表示する条件を指定します。
mediaの指定は通常のCSSと同様のブラウザ幅で切り替える書き方でOK!
画像の表示の優先順位は最初のsourceタグが最も優先されます。
例の場合の優先度は「画像URL1」「画像URL2」となります。
また、sourceタグは複数記述しても問題ありません。
記述されたsourceタグのどれも表示できない場合、imgタグの画像が表示されます。
メリット
デバイスによって画像を切り替える方法はCSSでも可能です。しかしCSSでの切り替えでは、不要な画像も一度読み込まれるため表示速度に影響することがあります。
pictureタグを使用するとデバイスの対象ではない画像は読み込まれないのでCSSより表示速度が早くなるようです。
参考：picture要素を使うとレスポンシブイメージの表示速度が速くなる？
<source srcset=”画像URL1″ alt=”” media=”(max-width: 767px)”>
<img src=”画像URL2″ alt=””>
</picture>