【HTML】pictureタグの使い方をわかりやすく解説

<picture>タグとは

HTMLの<picture>タグでは、画面のサイズや表示しているデバイスによって表示する画像を変更することができます。

最近のHTMLコーディングでは、レスポンシブコーディングが基本になっているため、パソコンでの表示とスマホでの表示で表示する画像を変えるといった場面が少なくありません。

<picture>タグを使うことで、CSSやJavaScriptを使うことなく、HTMLだけでレスポンシブに画像を切り替えることができるためとても便利です。

<picture>タグの使い方

<picture>タグの基本的な書き方

<picture>タグを使うときには、<img>タグと<source>タグを合わせて使います。

<picture>
  <source srcset="sample_1.png" media="">
  <source srcset="sample_2.png" media="">
  <img src="sample_3.png" alt="サンプル画像">
</picture>

<source>タグに対しては、srcset属性には表示する画像のURLを、media属性にはメディアクエリを記述します。<source>タグは、複数記述することができます。

<img>タグは、<picture>タグ内の一番下に1つだけ記述します。

<picture>タグの画像の表示順序

<picture>タグで画像を表示するときには、<picture>タグ内の<source>タグを上から順番に読み込みます。

<source>タグのmedia属性で指定したメディアクエリに該当する場合、その画像を表示します。

<picture>
  <!-- ↓1000px以上の時に表示する↓ -->
  <source srcset="sample_1.png" media="(min-width: 1000px)">
  <!-- ↓1000px未満かつ、600px以上の時に表示する↓ -->
  <source srcset="sample_2.png" media="(min-width: 600px)">
  <!-- ↓全ての<source>タグが該当しない場合に表示する↓ -->
  <img src="sample_3.png" alt="サンプル画像">
</picture>

<source>タグに該当するものがない場合、<img>タグの画像が表示されます。

<picture>タグの対応ブラウザ

<picture>タグの対応ブラウザを、Can I use… でみてみましょう。

<picture>タグは、主要なブラウザでは問題なく使うことができそうです。

まとめ

<picture>タグを使うことで、CSSやJavaScriptを使わずに、レスポンシブに画像を表示することができます。

<picture>タグは、現在主要ブラウザのほとんどで対応しているため、安心して使うことができます。