HTML <画像>要素
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>この要素には、主に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画像タグ
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。