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タグリファレンスにアクセスしてください。