pictureタグの使い方 – レスポンシブに画像を切り替えるhtmlタグ

レスポンシブサイトを作成するときには、画像も画面サイズに合わせて変更することもあります。
画像を画面サイズによって変更する方法はいくつかありますが、ここでは picture タグを使ったレスポンシブ画像のメモを書いていきます。

pictureタグとは

pictureタグは画像の表示を切り替えるためのHTMLタグです。条件を設定し、その条件にあった画像を表示します。

画面サイズによって画像を切り替えたり、webp画像を対応のブラウザにのみ表示させる、といった画像フォーマットの表示分けをするときなどに使用します。

pictureタグ仕様 : picture 要素 | HTML Standard 日本語訳

pictureタグの使い方

pictureタグの中に、sourceタグとimgタグを記述します。

【pictureタグの記述例】

<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <img src="/wp-content/uploads/2023/03/sample_image_pc.png">
</picture>

記述順序に注意

「表示できる画像が見つかった時点でその画像を表示」するので、記述する順番によって自分の思った通りの表示にならないこともあります。

例えば640pxの画面サイズまではスマホ用画像、960pxまではタブレット用、それ以降はPC用の画像を作成してそれぞれ表示を切り替えたい場合、以下のような記述をしてしまうとスマホ用の画像が表示されることはありません。

<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image.png" media="(max-width: 960px)">
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <img src="/wp-content/uploads/2023/03/sample_image_pc.png">
</picture>

上記コードの表示

ブラウザの画面幅を拡大・縮小させると画像が切り替わります。

この順序で書いてしまうと media="(max-width: 960px)" が先に適用されてしまうので、media="(max-width: 640px)" まで読み込まれません。

max-width なら数字が小さい順に、min-width なら数字が大きい順に記述します。

<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <source srcset="/wp-content/uploads/2023/03/sample_image.png" media="(max-width: 960px)">
  <img src="/wp-content/uploads/2023/03/sample_image_pc.png">
</picture>

上記コードの表示

ブラウザの画面幅を拡大・縮小させると画像が切り替わります。640px以下の画面幅で見ると、一つ前のコードとは別の画像が表示されていると思います。

imgタグは最後

imgタグは全てのsourceタグの後に記述します。
pictureタグ内の記載順通りに読み込まれ、sourceタグで指定する画像がなかったらimgタグの画像が適用されます。

imgタグの後にsourceタグがあっても無視されてしまうので最後に書くようクセ付けてしまいましょう。

sourceタグに付ける属性

表示分けする画像をsourceタグで指定します。画像のURLはsrcset属性に記述します。

sourceタグに設定する属性は以下のものです。

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

media属性 – 画面サイズによって画像切り替え

sourceタグ にmedia属性を追加することで画面サイズによって画像を出し分けることができます。CSSのメディアクエリのように min-width や max-width を使います。

<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image.png" media="(max-width: 420px)">
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <source srcset="/wp-content/uploads/2023/03/sample_image_pc.png" media="(min-width: 641px)">
  <img src="/wp-content/uploads/2023/03/sample_image.png" alt="">
</picture>

type属性 – 画像タイプを指定

sourceタグのtype属性には画像フォーマットをMINEタイプで設定します。設定したいフォーマットが未対応ブラウザがある場合にこちらに指定します。

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

<picture>
  <source srcset="img.webp" type="image/webp">
  <img src="img.png" alt="">
</picture>

jpg, png, gif などは元々全ブラウザで対応しており、主にwebp表示に使われていました。現在最新バージョンのブラウザではwebpも大体対応できているので必ずしもつける必要はないと思いますが、サイト表示の対応範囲によって記述していきましょう。

解像度の指定

現在では高解像度のディスプレイも多くなり、あるディスプレイでは問題ない場合も解像度の高いディスプレイではぼやけてしまう場合もあるので、それに合わせた画像を表示させる必要があります。

設定した画像で荒れてしまう場合は大きめの画像を用意して、srcset属性に解像度に応じた値を設定します。

リソース部分には複数の画像を指定することができます。
画像パスの間に半角スペースを開けて、「1x」や「2x」といったテキストを追加します。「○x」は端末のデバイスピクセル比に応じた画像を読み込ませるためのものです。

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

全てに不必要なまでに高解像度の画像を設定するというのは、画像の最適化という点において正しいとは言えません。設定できるようになっているのでうまく活用していきましょう。

srcset属性内で画面幅を指定して画像を切り替える

media属性で画面幅の切り替えも可能ですが、解像度の指定と同様にsrcset属性の画像パスの後ろに数値を入力することで画像表示の指定ができます。

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

「1000w」のように数字にwを付けると「1000px」の画面幅という指定になります。

picture タグに設定した画像が表示されない?!

picturetタグを書いているのに表示されない場合はimgタグが含まれているか確認してください。

pictureタグというのはimgタグを制御するためのもので、このタグ自体は何かを表示させる働きはありません。そのため、pictureタグを使用する際はimgタグの記述は必須です
pictureタグの中にsourceタグだけしか記載がない場合、画像は表示されません。

<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
</picture>

sourceタグを上から順に確認し、表示できる画像が見つかった時点でその画像を表示、それ以降に書かれているものは無視されます。
またpictureタグをサポートしていないブラウザはimgタグの画像が表示されます。

画像は表示されるものの、思い通りの画像ではない場合は記述順序を見直してみてください。上から順に読み込み当てはまったものが適用されるため、それぞれ適用させたい画面で切り替わるように調整しましょう。
「記述順序に注意」の項目へ

ブラウザによって画像切り替えが異なる

閲覧するブラウザによって、画像が切り替わらないことがあります。これはブラウザのキャッシュの取り方の問題。確認するときはこの違いも覚えておきましょう。

  • Chrome
    一番大きなサイズの画像ファイルをキャッシュしたら、それ以下の小さい画像は読み込まれない。
  • Firefox
    画面サイズが変わるたびに最適な画像を読み込む。
  • Safari
    最初に開いた画面サイズの画像をキャッシュし、画面サイズが変わってもその画像以外読み込まない。

pictureタグ未対応ブラウザにはpolyfill

pictureタグはブラウザの最新バージョンであればほぼ対応しています。
【ブラウザ対応状況確認】 caniuse.com

IEはサポートも終了したので以前ほど気にする必要は無くなったと思いますが、もし対応していないブラウザでも表示させる必要がある場合には、polyfillを使ってみてください。
参照サイト : 【Polyfill.io】を使用してJavascriptのブラウザ互換を解決する

pictureタグにCSSは効かない

pictureタグはそれ自身がレンダリングされるものではないため、CSSでスタイルを指定してもそのスタイルになりません。表示される画像にスタイルを適用させたい場合はimgタグの方で指定します。

<!-- pictureタグにsytle属性を追加 -->
<picture style="width: 100px;">
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <img src="/wp-content/uploads/2023/03/sample_image_pc.png">
</picture>

<!-- imgタグにsytle属性を追加 -->
<picture>
  <source srcset="/wp-content/uploads/2023/03/sample_image_sp.png" media="(max-width: 640px)">
  <img src="/wp-content/uploads/2023/03/sample_image_pc.png" style="width: 100px;">
</picture>

上記コードの表示

pictureタグにsytle属性を追加

imgタグにsytle属性を追加

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

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

レスポンシブで画像を切り替える時は以下のことが考えられます。

  • 画像サイズ・解像度を変更したい
  • 画像の内容を変えたい
  • 画像は同じでもトリミングして表示させたい

同じ画像で対応できるかどうかが使い分けるポイントです。

画像の内容を別のものにする場合はpictureタグを使用する必要がありますが、画像内容は同じでサイズや解像度を変えたい場合にはimgタグでも切り替えが可能です。

【参考】なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点

カテゴリー : HTML-CSS

タグ :

TOPへ