TECH I.S.

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タグリファレンスを参照してください。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細