HTML <picture>要素
HTML<picture>要素を使用すると、デバイスや画面サイズに応じて様々な画像を表示できます。
HTML<picture>要素
HTML<picture>要素を使用すると、Web開発者は画像リソースをより柔軟に指定できます。
<picture>要素にはが1つ以上の<source>が含まれており、それぞれがsrcset属性を通じて異なる画像を参照します。このようにして、ブラウザは現在のビューやデバイスに最適な画像を選択できます。
各<source>要素には、media画像がいつ適しているかを定義するメディア属性があります。
例
画面サイズごとに異なる画像を表示する。
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
注：<img>要素は、<picture>要素の最後の子要素として常に指定して下さい。<img>要素は、<picture>要素をサポートしていないブラウザー、または一致する<source>タグがない場合に使用されます。
Picture Elementを使用する場合
<picture>要素には主に目的は2つあります。
1.帯域幅
画面やデバイスが小さい場合は、大きな画像ファイルを読み込む必要はありません。ブラウザは一致する属性値を持つ最初の<source>要素を使用し、次の要素を無視します。
2.フォーマットのサポート
一部のブラウザーまたはデバイスは、すべての画像形式をサポートしていない場合があります。<picture>要素を使用すると、すべての形式の画像を追加できます。ブラウザは、認識した最初の形式を使用し、次の要素を無視します。
例
ブラウザは、認識した最初の画像形式を使用します。
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
注：ブラウザは、一致する属性値を持つ最初の最初の<source>要素を使用します。それ以降の<source>要素は無視します。
HTML画像タグ
| タグ | 説明 |
|---|---|
| <img> | 画像を定義します |
| <map> | イメージマップを定義します |
| <area> | イメージマップ内のクリック可能な領域を定義します |
| <picture> | 複数の画像リソースのコンテナを定義します |
利用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。