pictureタグとは

pictureタグは、HTML上で画像をレスポンシブに切り替えができる、非常に便利なタグです。

pictureタグの使用方法

使い方はシンプルで、pictureタグの中にsourceタグとimgタグを入れるだけです。
sourceタグは複数入れることが可能です。

ソース例

ソース例はこちらです。

<picture>
  <source srcset="(画像のパス)" media="(max-width: 768px)">
  <img src="(画像のパス)" alt="(代替テキスト)">
</picture>

pictureタグ読み込みの流れ

pictureタグは以下の流れに沿って読み込まれます。

  1. ブラウザは最初にsourceタグを読み込む。
  2. 読み込んだ際、sourceタグのmediaの条件を満たしていたら、sourceタグのsrcset属性で指定した画像が表示される。
  3. sourceタグが複数ある場合、sourceタグは上から順に読み込まれ、条件を満たしてるsourceタグの画像が表示される。
  4. もしsourceタグのmediaの条件を満たしていない場合は、imgタグの画像が表示される。

sourceタグの解説

sourceタグには主に３つの属性（srcset属性、media属性、type属性）を指定することができます。

srcset属性

srcset属性には、src属性と同様の方法で画像のパスを指定します。
media属性の条件を満たしている場合、同じsourceタグ内のsrcset属性で指定した画像が表示されます。

media属性

media属性には表示するブラウザ幅の条件を記述します。
例えば、media属性にmax-width: 768px;を指定した場合、ブラウザ幅が768px以下の時に条件が適用されます。

type属性

type属性は画像の形式(jpg/png/svg/webp)を記述する属性です。
画像形式がjpgであれば、type=”image/jpg”と記述します。
webp以外の主要な画像形式はほぼ全てのブラウザで対応しているため、記述する必要はありません。
webpのみ、一部対応していないブラウザがあるのでtype属性の指定を忘れずに行いましょう。