pictureタグとは?|レスポンシブイメージを文書内に埋め込む

pictureタグとは?|レスポンシブイメージを文書内に埋め込む
博士
今回は、<picture>タグでレスポンシブイメージを設定する方法を解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<picture>タグとは

 

<picture>

対応ブラウザFirefox / Google Chrome
分類フロー・コンテンツ / フレージング・コンテンツ / エンベディッド・コンテンツ
利用場所エンベディッド・コンテンツが期待される場所
内容source要素を0個以上、その後にimg要素 / スクリプトサポート要素


 
 
<picture>タグは、レスポンシブイメージを文書内に埋め込む際に使用するタグです。

レスポンシブイメージとは画像内容の最適化を意味していて、PC用の画像、スマホ用の画像というようにサイズや内容の違う複数の画像候補を用意しておくことで、ユーザーの閲覧環境に適した画像が表示される仕組みです。

picture要素は、画像候補のコンテナとして使用されます。
レスポンシブイメージの設定は、picture要素内に配置するsource要素img要素で行います。

メモ
picture要素内には、必ずimg要素を配置しなければいけません。
 
 

レスポンシブイメージの設定

レスポンシブイメージは、img要素またはpicture要素で設定することができます。
 
 

img要素による設定

内容は同じで、サイズが違う画像をセットしたい場合に使用します。
条件設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。
 
 

picture要素による設定

サイズだけでなく、内容の異なる画像をセットしたい場合に使用します。
picture要素による設定では、指定した条件下で強制的に画像が切り替わります。
 
 

博士
2種類の設定を組み合わせることで、より詳細な設定をすることが可能じゃ。
 
 

スポンサーリンク

source要素について

picture要素内に配置したsource要素には、以下の属性を指定することができます。
 
 

srcset属性

使用される画像候補を指定します。
srcset属性はpicture要素内でのみ使用することができ、これは省略することができません。
指定方法は以下の通りです。

  • URL
    画像ファイルのURL
  • URL 横幅w
    画像ファイルのURL、画像ファイルの横幅(ピクセル数)、記述子(w)
  • URL 比率x
    画像ファイルのURL、デバイスピクセル比を示す数値、記述子(x)

 
画像候補には、画像ファイルの横幅(w)またはデバイスピクセル比(x)のどちらかを指定することができます。
srcset属性で画像の横幅(w)を指定する場合は、sizes属性の指定も必要となります。

また、srcset属性の値には、サイズの異なる複数の画像候補をセットすることができます。
2つ以上の画像をセットする場合はカンマ(,)で区切って記述します。
 

  • ブラウザの表示領域(ビューポート)の幅に応じて画像を切り替える指定
  •  

  • デバイスピクセル比に応じて画像を切り替える指定

 
 
srcset属性を指定する際は、以下の点に注意しましょう。

  • 幅の指定と比率の指定を混在させない。
  • 幅を指定する場合は全ての画像候補に指定する。
  • 同一の幅を複数の画像候補に指定しない。
  • 同一の比率を複数の画像候補に指定しない。

 
 

sizes属性

  • メディアクエリ 表示サイズ(vw)
    画像の表示サイズ(横幅)を指定します。
    sizes属性を指定する場合は、srcset属性に指定する全ての画像候補に画像ファイルの幅を指定しなければいけません。
メモ
デバイスピクセル比を指定した場合はsizes属性は無効となります。
 
 
割合で指定する場合は「%」ではなく「vw」を使います。
割合の指定は、親要素の幅に対するものではなく、ブラウザの表示領域(ビューポート)の幅に対するものです。

 
 
上記の場合、ビューポートの幅に対して50%の幅を指定しているので、ビューポートの幅が1000pxなら、画像の表示幅は500pxになります。

また、メディアクエリを指定することで、画像の切り替え点(ブレイクポイント)を設定することもできます。
ブレイクポイントを複数設定する場合は、カンマ(,)で区切って記述します。

 
 
上記の場合、ビューポートの幅が400pxまでは100%の幅、401〜800pxなら70%の幅、それ以上の場合は50%の幅で画像が表示されるようになります。

sizes属性を省略した場合、画像サイズの割合は100vw(100%)が適用されます。
 
 

博士
srcset属性とsizes属性に対応していないブラウザでは、src属性で指定した画像が表示されるぞ。
 
 

type属性

画像のMIMEタイプを指定します。

 
 

media属性

画像の埋め込み対象とするメディアを指定します。

 
 
メモ
これらの属性は、picture要素内に配置したsource要素に指定できるものです。video要素やaudio要素内に配置する場合とは異なりますので注意してください。
 
 

使用例

 
 

スポンサーリンク

まとめ

レスポンシブイメージを文書内に埋め込む際は、<picture>タグを使用します。
 
 

博士
各ブラウザでの実装も進んできておるぞ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








pictureタグとは?|レスポンシブイメージを文書内に埋め込む