HTMLの<picture>ピクチャータグを使えば、CSSやJavaScriptを使わなくても、画像をレスポンシブに切り替えることができます。

このページの目次

• pictureタグでできること
• pictureタグの使い方
  • sourceとimgタグと使う
  • 条件に当てはまる画像1つだけが表示される
  • 表示する画像の選ばれ方
  • sourceタグの属性を指定する
• レスポンシブに別画像に切り替えるサンプル
  • 画像ごとにスタイルを変える
• 対応ブラウザでのみWebP画像を表示するサンプル

<picture>はHTML5で登場しましたが、すべての主要ブラウザで使用できます。

pictureタグでできること

<picture>により実現できることは次の2つです。

また、<picture>を使えば「WebP形式の画像に対応していないブラウザなら、PNG画像を表示する」といった出し分けも可能になります。

pictureタグの使い方

具体的な使い方を解説していきます。

sourceとimgタグと使う

<picture>タグは、複数の<source>と、1つの<img>を囲う形で使います。

<picture><sourcesrcset="候補1の画像URL"属性/><sourcesrcset="候補2の画像URL"属性/><imgsrc="候補4の画像URL"alt="~"/></picture>

👆それぞれに表示する画像候補のURLを指定します。この中からどれか1つの画像が表示されます。<img>は1つだけですが、<source>はいくつ入れてもOKです。

条件に当てはまる画像1つだけが表示される

ブラウザは以下のような流れで、<source>と<img>のうちから表示する画像を1つ選びます。

つまり👇このような優先順位で判定されます。

表示される優先順位

<picture><source.../><!-- 🥇優先順位1 --><source.../><!-- 🥈優先順位2 --><source.../><!-- 🥉優先順位3 --><img.../><!-- 😿どれも当てはまらなければimgを表示 --></picture>

sourceタグの属性を指定する

<source>タグの属性で「どの場合に、どの画像を表示するか」という条件を指示します。

画像URL（srcset）必須

<sourcesrcset="画像のURL"/>▼例<sourcesrcset="/learning/images/example.png"/>

👆srcsetには画像URLを指定します。<img src="○○">と同じようにURLを入れればOKです。条件に当てはまったときは、ここに指定した画像が表示されます。

メディアクエリ（media）

<sourcesrcset="画像のURL"media="メディアクエリ"/>▼例<picture><sourcesrcset="~"media="(min-width: 1000px)"/><!-- 幅1000px以上なら表示 --><sourcesrcset="~"media="(min-width: 700px)"/><!-- 幅700px以上なら表示 --><sourcesrcset="~"media="(min-width: 500px)"/><!-- 幅500px以上なら表示 --><img.../><!-- それ以外で表示 --><picture>

👆media属性には、メディアクエリ（画面幅に応じた条件）を指定します。(min-width: ○○px)と書けば「画面幅が○○px以上なら…」という意味になります。画面サイズに応じて画像を切り替えたいときに使用します。

画像の形式（type）

<sourcesrcset="画像のURL"type="画像の形式"/>▼例<picture><sourcesrcset="/sample.webp"type="image/webp"/><imgsrc="/sample.png"/><!-- ブラウザがwebpに対応していない場合に表示 --><picture>

👆type属性には、画像の形式を「MIMEタイプ」で指定します（例：type="image/webp"）。JPEG、PNG、GIFは全ブラウザで対応しているため、<source type="○○">に指定する意味はありません。WebPなど、未対応ブラウザがある画像を挿入したい場合に指定します。

レスポンシブに別画像に切り替えるサンプル

ここからは具体的なサンプルコードを紹介します。まずは<picture>タグを使って画面幅に応じて、別の画像を表示するサンプルです。

HTML

<pictureclass="sample"><sourcesrcset="画像1URL"media="(min-width: ○○px)"/><!-- ○○px以上で表示する画像 --><sourcesrcset="画像2URL"media="(min-width: △△px)"/><!-- △△px以上で表示する画像 --><imgsrc="画像3のURL"alt="サンプル画像"/><!-- それ以外の場合に表示する画像 --></picture>

👆このように書くことで、画面幅に応じて、別の画像が表示されます。<source>は、条件分岐に必要な数だけ増やしましょう。画像は必要になったときに読み込まれるため、パフォーマンス上の心配は不要です。

画像ごとにスタイルを変える

それぞれの画像ごとに、表示幅（width）や装飾を変えたい場合には、CSS側で合わせてメディアクエリを指定すればOKです。

CSS 画像ごとに幅などのスタイルを変える

.sample img{max-width: 100%;width: 200px;}/* 画面幅が800px以上のとき */@mediaonly screenand(min-width: 800px){.sample img{width: 400px;}}/* 画面幅が1200px以上のとき */@mediaonly screenand(min-width: 1200px){.sample img{width: 600px;border: solid 3px bold;/* 例：1200px以上でのみ線で囲む */}}

👆<source>の画像であっても、img { ~ }という書き方でスタイルを適用できます。逆にsource { ~ }というように<source>自体にCSSを適用しようとしても、うまく効きません。

対応ブラウザでのみWebP画像を表示するサンプル

HTML

<picture><sourcesrcset="WebP画像のURL"type="image/webp"/><imgsrc="WebP未対応のときに表示する画像のURL"/><picture>

👆WebP画像をページに貼りたい場合は、このように書きましょう。<img>に「WebP未対応だった場合用の画像」を指定しておくわけですね。

なお、<source>のWebP画像が表示される場合も、適用されるCSSは<img>に対するCSSと変わりません。つまり、表示される画像のスタイルは同じです。WebP画像用に別途CSSを指定する必要はありません。

関連リンク

関連するページを読む

imgタグの使い方 - HTML

関連するページを読む

videoタグの使い方 - HTML