picture要素が便利

画面のサイズによって表示する画像を変えたいとき、どうしてますか?

たとえば、追従バーナーを表示するとき、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 要素は、0個以上の source 要素と1つの img 要素を含みます。

つまり、source 要素は任意で、img 要素は必須ということです。

ブラウザーは、media 属性で指定されたサイズが現在のビューポート(画面)幅と一致する source 要素を探し、srcset 属性で指定された画像を表示します。

一致する source 要素がない場合や、ブラウザーが picture 要素に対応していないときは、 img 要素で指定された画像が表示されます。

ブラウザーの画面幅を変えて、表示される画像が変わることを確認してみましょう。

picture 要素を使う場面は、この他にもあります。

  • 特定の画像形式に対応していないブラウザーに代替画像形式を提供する
  • 見る人の画面に最適な画像を読み込むことで通信帯域を節約しページの読み込みをより速くする。

詳しい使い方やブラウザーの互換性については、MDN を参考にしてください。

知っていると便利な要素や属性などを見つけたら、また紹介しますね。

コメントする