画面のサイズによって表示する画像を変えたいとき、どうしてますか？
たとえば、追従バーナーを表示するとき、PC 用のバナーをスマホでも使ってしまうと、大き過ぎて邪魔になってしまいますね。
そんなときは、CSS のメディアクエリーを使うという方が多いのではないでしょうか。
じつは picture 要素も画像を切り替えることができるんです！
簡単な例を見てみましょう。
<picture>
<!-- 画面幅が1024px以上の場合はlarge.jpgを表示 -->
<source media="(min-width:1024px)" srcset="large.jpg">
<!-- 画面幅が768px以上の場合はmedium.jpgを表示 -->
<source media="(min-width:768px)" srcset="medium.jpg">
<!-- それ以外はsmall.jpgを表示 -->
<img src="small.jpg">
</picture>picture 要素は、０個以上の source 要素と１つの img 要素を含みます。
つまり、source 要素は任意で、img 要素は必須ということです。
ブラウザーは、media 属性で指定されたサイズが現在のビューポート（画面）幅と一致する source 要素を探し、srcset 属性で指定された画像を表示します。
一致する source 要素がない場合や、ブラウザーが picture 要素に対応していないときは、 img 要素で指定された画像が表示されます。
ブラウザーの画面幅を変えて、表示される画像が変わることを確認してみましょう。
picture 要素を使う場面は、この他にもあります。
- 特定の画像形式に対応していないブラウザーに代替画像形式を提供する
- 見る人の画面に最適な画像を読み込むことで通信帯域を節約しページの読み込みをより速くする。
詳しい使い方やブラウザーの互換性については、MDN を参考にしてください。
知っていると便利な要素や属性などを見つけたら、また紹介しますね。
