【HTML】picture タグでレスポンシブに画像を切り替える

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー HTML

picture タグについて調べたのでメモ。

【HTML】picture タグでレスポンシブに画像を切り替える

画面幅に応じて画像を切り替える方法、皆さんはどのように行っていましたか？

私はCSSの display の block もしくは none をメディアクエリで操作し、画面幅に応じて必要枚数の画像を出し分けしていました。

/* 例 */

/* 画面幅が768px以上のときに『.img-pc』を表示し、『.img-sp』を非表示 */
@media only screen and (min-width: 768px) {
  .img-pc {
    display: block;
  }
  .img-sp {
    display: none;
  }
}

/* 画面幅が767px以下のときに『.img-sp』を表示し、『.img-pc』を非表示 */
@media only screen and (max-width: 767px) {
  .img-pc {
    display: none;
  }
  .img-sp {
    display: block;
  }
}

ただこの方法、画面幅に関係なくPC用とSP用の両方の画像が読み込まれてしまうので、パフォーマンス上あまりよくないそうです。（display: none; は画面上で隠すだけなので画像自体は読み込まれている）。

ということで、画面幅に応じて必要な画像しか読み込まない picture タグについて調べました。

picture タグについて

<picture>: 画像要素 – HTML: HyperText Markup Language | MDN
<picture> は HTML の要素で、0 個以上の <source> 要素と 1 つの <img> 要素を含み、様々な画面や端末の条件に応じた画像を提供します。
developer.mozilla.org

ブラウザの対応状況はこちら↓

Picture element | Can I use… Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
caniuse.com

picture タグでできることは主に以下↓

  • 画面幅によって表示する画像を切り替える
  • ブラウザに対応していない形式の画像は別の画像を表示する

基本的な使い方は、複数の source と1つの img を picture で囲う形で使います。

<picture>
  <source srcset="候補1の画像URL" 属性>
  <source srcset="候補2の画像URL" 属性>
  <img src="候補3の画像URL" alt="">
</picture>

それぞれに表示する画像候補のURLを指定し、この中から条件に合ったどれか1つの画像が表示されます。

img タグは1つだけ使用できますが、source タグはいくつ入れても大丈夫です。

ブラウザが読み込む順番

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

  1. source タグを上から1つずつ順番に読む
  2. source タグの属性に指定された条件を読む
  3. 条件に当てはまればその画像を表示し、当てはまらなければ下のsource タグへと進む
  4. source タグのどれにも条件が当てはまらない場合、最後の img タグを表示する

といった流れです。

source タグの属性について

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

srcset

srcset（画像URL）は必須の属性です。

img タグの src=”〜” と同じようにURLを指定します。

後述する『条件』に当てはまったときは、ここにURL指定した画像が表示されます。

media

media 属性には、メディアクエリ（画面幅に応じた条件）を指定します。（メディアクエリの説明は割愛させていただきます）

<!-- 例 -->

<picture>
  <source srcset="../hoge01.jpg" media="(min-width: 1024px)"> <!-- 幅1024px以上なら表示 -->
  <source srcset="../hoge02.jpg" media="(min-width: 768px)"> <!-- 幅768px以上なら表示 -->
  <img src="../hoge03.jpg" alt="hoge"> <!-- それ以外の画面幅で表示 -->
<picture>

source は上から順番に読み込まれていくので配置する順番に注意しなければなりません。

条件に合った source が見つかった時点で画像は表示され、それ以外の画像は読み込まれません。

type

type 属性には画像の形式を「MIMEタイプ」で指定します。

MIME タイプ (IANA メディアタイプ) – HTTP | MDN
メディアタイプ (別名 Multipurpose Internet Mail Extensions または MIME タイプ) は、文書、ファイル、またはバイト列の性質や形式を示します。 MIME タイプは IETF …
developer.mozilla.org
<!-- 例 -->
<source srcset="../hoge01.jpg" type="image/webp">

JPEG、PNG、GIFは全ブラウザで対応しているため type 属性を指定する必要はありません。

WebPなどの未対応ブラウザがある画像を挿入したい場合に指定します。

まとめ

ということで、画面幅で画像を切り替えたい場合、今後は picture タグで表示させたいと思います。

レスポンシブ 画像関係