pictureタグでレスポンシブ画像切り替え

更新2021/11/06

レスポンシブサイトで画像を切り替えに使うpictureタグのメモ。

pictureタグは画像の表示を切り替えてくれるタグ。条件を設定することで最適な画像を表示することができます。

pictureタグとは

pictureタグは、複数用意された画像の中から、条件にあった画像を表示します。
画面サイズによって画像を切り替えたり、webp画像を対応のブラウザにのみ表示させる、といった画像フォーマットの表示分けをするときなどに使用します。

pictureタグとimgタグの使い分け

レスポンシブで切り替えたい画像の違いによって、pictureタグとimgタグを使い分けます。

レスポンシブで画像を変える時は、

  • サイズが違う
  • 内容が違う
  • トリミングが違う

といったようなことが考えられます。

画像を別のものに変えたい場合はpictureタグ、
画像内容は同じで、サイズや解像度を変えたい場合にはimgタグを使います。

pictureタグ仕様 : The picture Element 仕様

pictureタグの使い方

<picture>の中に<source><img>を入れる。

表示分けする画像を<source>で指定。URLはsrcset属性に。

デフォルトで表示する画像は<img>に設定(source要素に適合する画像がない場合に適用される)

【記述例】

<picture>
  <source srcset="img_01.png" media="(min-width: 768px)">
  <img src="img.png">
</picture>

<picture><source>は何も表示されないエレメント(要素)。<img>を制御する役割を持っている。
なのでimgタグは必須です。
またpictureタグをサポートしていないブラウザはimgタグの画像が表示されます。

sourceタグを上から順に確認し、表示できる画像が見つかった時点でその画像を表示、それ以降に書かれているものは無視されます。

imgタグは最後

<img>は全ての<source>の後に記述します。imgタグの後にsourceタグがあっても無視されます。

sourceタグに付けられる属性

sourceタグに主に設定する属性は以下。

  • srcset属性(リソースを指定)
  • media属性(メディアクエリの指定)
  • sizes属性(画像のサイズを指定)
  • type属性(画像フォーマットの指定)

media属性で画像タイプを振り分け

sourceタグ に media属性を追加することで画面サイズによって画像を出し分けることができます。

<picture>
  <source srcset="img_01.png" media="(min-width: 768px)">
  <source srcset="img_02.png" media="(min-width: 321px)">
  <img src="img.png" alt="image">
</picture>

CSSのメディアクエリのように min-width や max-width を使います。

type属性で画像タイプを振り分け

そのフォーマットに対応しているかどうかを確認するために、sourceタグ の type属性に画像タイプを設定します。

これは主にwebp表示に使います。
※jpg, png, gif などは全ブラウザで対応しているので書かなくていい。

webp画像に対応しているブラウザならwebp、対応していなければその他の画像を表示する。といった場合に使います。

<source srcset="img.webp" type="image/webp">

解像度の指定

高解像度のディスプレイに合わせて全ての画像を解像度の高いものにするのは、「画像最適化」という点においては正しくない。srcset属性を活用して最適化をはかりましょう。

srcset属性に解像度に応じた値を設定します。

<picture>
  <source srcset="img_01.png 1x, img_01@2x.png 2x" media="(min-width: 768px)">
  <img src="img_01.png">
</picture>

未対応ブラウザにはpolyfill

pictureタグはIEには対応していません。

【ブラウザ対応状況】 https://caniuse.com/?search=picture

対応していないブラウザでも表示させる場合には、polyfillを使う。

polyfill.io がおすすめです。
参照サイト : 【Polyfill.io】を使用してJavascriptのブラウザ互換を解決する

カテゴリー : HTML-CSS

タグ :

TOPへ