【HTML】pictureタグの使い方を紹介！レスポンシブもスマートに

今回はHTMLのpictureタグについて解説します。

この方法を知ることで、CSSを使わずに画面幅に応じて画像を出しわけできるようになります。

知識を深めて自由自在に画像を出しわけできるようにしましょう。

pictureタグとは
pictureタグの使い方
object-fit / object-position を使用することもできる
まとめ

pictureタグとは

pictureタグは、画面幅やディスプレイ等のさまざまな条件に応じた画像を表示するタグです。

使用例はこちらのデモをご覧ください。

デモに使用したコードはこちらです。

HTML

<body>
  <h1>pictureタブのデモ</h1>
  <p>画面幅を変更して、画像が切り替わるか試してみてください</p>
  <picture class="picture">
    <source media="(min-width: 1200px)" srcset="./images/cat.jpg">
    <source media="(min-width: 768px)" srcset="./images/dog.jpg">
    <source media="(max-width: 767px)" srcset="./images/rabbit.jpg">
    <img src="./images/test.jpg" alt="代替テキスト" class="picture-img">
  </picture>
</body>

CSS

h1,p {
  margin: 8px;
}

.picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

画面幅を変更すると下記の条件で画像が切り替わるようにpictureタグを使用して指定してあります。

〜767px：うさぎの画像
768px〜1199px：犬の画像
1200px〜：猫の画像
その他：花の画像

pictureタグを使用しない場合、このように画面幅で画像が変わるようにするにはCSSで「display: none;」や「display: block;」を使用しないといけません。

その場合、pictureタグを使用した場合よりもコードの記述量が増え、手間と予期せぬバグを生む可能性が高まります。

また、指定したすべての画像を一度読み込むことになるのでページ読み込み速度が遅れることも考えられます。

できるだけスマートに記述するために、pictureタグを使用することは良い方法だと言えるでしょう。

pictureタグの使い方

先ほどのデモのコードを参考にpictureタグの使い方を見ていきましょう。

HTML

<picture class="picture">
  <source media="(min-width: 1200px)" srcset="./images/cat.jpg">
  <source media="(min-width: 768px)" srcset="./images/dog.jpg">
  <source media="(max-width: 767px)" srcset="./images/rabbit.jpg">
  <img src="./images/test.jpg" alt="代替テキスト" class="picture-img">
</picture>

pictureタグの中にsourceタグとimgタグが使われていることがわかります。

また、sourceタグにはmedia属性・srcset属性が使われていますね。

それぞれどのように使用すれば良いのか、順番にみていきましょう。

sourceタグ

複数の画像を条件によって出し分けるためのタグで、pictureタグの中に0個以上記述できます。

sourceタグにはmedia属性・srcset属性・type属性を指定することができ、その条件に合った場合に指定された画像が表示されます(media属性・srcset属性・type属性については後述します)。

条件に当てはまらなかった場合、画像は読み込まれることなく次の要素へと進みます。

指定されたsourceタグ全てが読み込まれなかった場合、imgタグが読み込まれます。

<source media="(min-width: 1200px)" srcset="./images/cat.jpg">

imgタグ

pictureタグの中に必ず記述するタグです。

sourceタグがある場合、sourceタグの条件分岐が全て当てはまらなかったらimgタグが読み込まれます。

<img src="./images/test.jpg" alt="代替テキスト" class="picture-img">

media属性

メディアクエリと同じように画面幅を指定できます。

指定した条件に当てはまる場合、同じsourceタグ内に指定してある画像が読み込まれます。

<source media="(min-width: 1200px)" srcset="./images/cat.jpg">
<source media="(min-width: 768px)" srcset="./images/dog.jpg">
<source media="(max-width: 767px)" srcset="./images/rabbit.jpg">

srcset属性

解像度で画像を切り替える場合はsrcset属性を使用します。

身近なもので言うと、iPhoneやMacは高解像度ディスプレイ（Retinaディスプレイ等）で解像度は2倍です。

綺麗に映る反面、通常の画像を表示するとぼやけてしまう可能性があります。

この場合は2倍の大きさの画像を通常サイズまで縮小し、表示するように指定します。

同様に、3倍・4倍とディスプレイの解像度に合わせて指定することができます。

sourceタグ内で使用される場合、画像URLを指定する時に使用します。

<source media="(min-width: 1200px)" srcset="./images/cat.jpg, ./images/cat@2x.jpg 2x">

type属性

同じsourceタグの中にあるsrcset属性に指定してあるメディアの形式をMIMEタイプで指定します。

MIMEタイプは下のように指定された書き方があります。

image/jpeg
image/png
image/webp

srcset属性に指定するメディアの形式に合わせて指定しましょう。

表示するブラウザがメディアの形式に対応していない場合、そのsourceタグはスキップされます。

<source media="(min-width: 1200px)" srcset="./images/cat.jpg" type="image/jpeg">

object-fit / object-position を使用することもできる

pictureタグ内のimgタグにobject-fit / object-positionを使用することができます。

object-fit は枠内に対して画像をどのように配置するかを指定し、object-position は要素の枠内で画像の位置を調整することができます。

object-fit / object-positionプロパティについては下記の記事に詳しく使い方をまとめていますのでぜひご覧ください。

【CSS】トリミングできる！object-fitの使い方と配置について

今回はCSSのobject-fitの使い方について解説します。この方法を知ることで、画像やビデオをデ…

まとめ

今回はHTMLのpictureタグについて解説しました。

自由自在に画像を出しわけできるようになりましたでしょうか？

レスポンシブや高解像度のディスプレイにも対応した画像を出しわけできるpictureタグはとても便利なので、覚えておくと良いと思います。

この記事が少しでもお役に立てれば幸いです。

その他の記事

【HTML】チェックボックス・ラジオボタンの使い方を解説！for…

今回はお問い合わせフォームや資料請求ページでよく使用するチェックボックス・ラジオボタンの作成方法を解…

【HTML/CSS】グローバルナビの作り方を解説！実際のコードも…

今回はHTML/CSSを使ってグローバルナビの作り方を解説していきます。Webサイトを作る際に必ず実…

【HTML】ul・ol の使い方や違いは？使用例を含めて解説

今回はHTMLでマークアップする際に少し似ていて間違えやすい ul・ol について深掘りしていきます…