@ HTML

picture 要素

picture 要素は、特定の img のための複数の source を含むことができるコンテナです。ブラウザは、現在のページレイアウト(画像が表示されるボックスの制約)と(通常やhiDPIデバイスのような)表示のためのデバイスに応じて最適な source を選択します。

media属性の使用

media 属性でユーザーエージェントが source 要素の選択をするためのメディアクエリを設定できます。メディアクエリが false と評価した場合、その source 要素はスキップされます。

elements_picture_01

<picture>
 <source srcset="images/example-img-HD.png" media="(min-width: 600px)">
 <img src="images/example-img.png" alt="example image">
</picture>

type属性の使用

type 属性は、source 要素の srcset 属性で与えられるリソースの MIME タイプを指定します。ユーザーエージェントが与えられた type をサポートしてない場合、その source 要素はスキップされます

elements_picture_02

<picture>
  <source srcset="images/example-img.svg" type="image/svg+xml">
  <img src="images/example-img.png" alt="example image">
</picture> 

4.7.4. The source element when used with the picture element – HTML 5.1 – W3C