imgタグのsrcset・sizes属性とpictureタグの使い方 - レスポンシブイメージで画像表示を最適化

imgタグのsrcset・sizes属性とpictureタグの使い方
レスポンシブイメージで画像表示を最適化

9月15日メンテナンス済み / 株式会社 ICS

HTML

日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約47%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。

HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。

本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。

この記事で学べること

img要素のsrcset属性とsizes属性の使い方
遅延読み込み画像でのsizes="auto"の使い方
picture要素の使い方

レスポンシブイメージとは一体何か？

レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。主な特徴は次の通りです。

画像候補の選択をHTMLで指定できる
デバイスに応じた最適な「大きさ」の画像を表示できる
デバイスに応じた最適な「見た目」の画像を出し分けできる

今回作成するサンプルについて

まずは完成形のページをご覧ください。うさぎの画像がレスポンシブイメージで表示されています。520pxより大きい画面幅のときは、大きさの違うmedium.jpg、large.jpgのうち最適な画像が、520px以下の画面幅のときは、四角にクロップ（切り抜き）された画像がそれぞれ表示されます。

完成版サンプル

異なる大きさの画像表示の問題点

レスポンシブなウェブサイトで画像を表示する場合、スマートフォン、タブレット、ノートパソコン、デスクトップパソコン等、あらゆるデバイス幅・解像度に適した画像を準備する必要があります。異なる大きさのsmall.jpg、medium.jpg、large.jpgを作成し、画像を出し分けるにはどうすればよいのでしょうか？

レスポンシブイメージにおける画像出し分け

レスポンシブイメージにおいて前述の画像出し分け処理を行うには、HTMLのimgタグに3つの情報を記述します。

画像ファイルのパス
画像ファイルの横幅
画像候補を選ぶための、想定する表示幅

HTMLコードは下記となります。注目すべきはimgタグに指定されたsrcset属性とsizes属性です。

<img class="responsive-image"
     srcset="images/small.jpg 320w,
          images/medium.jpg 640w,
          images/large.jpg 1280w"
     src="images/large.jpg"
     sizes="(width <= 1280px) 100vw, 1280px"
     width="1280" height="512">

画像ファイルのパスと横幅は`srcset`属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」ではないことに注意してください。

srcset="images/small.jpg 320w,
      images/medium.jpg 640w,
      images/large.jpg 1280w"

パスと横幅の間には半角スペースを挿入します。横幅の単位はpxでなくw（幅記述子）を用います。small.jpgは320pxの画像、medium.jpgは640pxの画像、large.jpgは1280pxの画像である、という情報をブラウザに伝えています。

画像候補を選ぶための表示幅を伝える`sizes`属性

sizes属性は、ブラウザーが画像候補を選ぶために、想定する表示幅を伝える情報です。ページ上のレイアウトは、CSSなどで指定します。メディアクエリーと組み合わせて複数の幅を指定可能です。ビューポート幅が1280px以下のときは画面幅、それ以外では1280pxで画像を表示するレイアウトなら、次のように記述します。

sizes="(width <= 1280px) 100vw, 1280px"

CSSも、sizes属性で伝えた幅にあわせます。次の例ではページの左右の余白をなくし、画像を画面幅いっぱい、最大1280pxで表示します。

body {
  margin: 0;
}

.responsive-image {
  display: block;
  width: 100%;
  max-width: 1280px;
  height: auto;
}

▲ sizes属性で、画像候補の選択に使う想定表示幅を伝えます。

※ vwとはビューポートの幅に対する割合を示します。100vwは、ビューポート幅に対して100%の割合という意味です。

なお、CSSなどで寸法を指定しない場合は、sizes属性の値が画像の既定の表示寸法に関わることもあります。sizes属性だけにレイアウトを任せず、表示幅を決めるCSSとあわせて指定しましょう。

遅延読み込み画像では`sizes="auto"`を使える

loading="lazy"を指定した画像では、sizes属性の先頭にautoを指定できます。ブラウザーは、レイアウトから求めた画像の表示幅を画像候補の選択に使います。

ページ下方の写真など、遅延読み込みに適した画像で使ってみましょう。先ほどのCSSと、同じ縦横比の3枚の画像を再利用します。

<img class="responsive-image"
     srcset="images/small.jpg 320w,
             images/medium.jpg 640w,
             images/large.jpg 1280w"
     src="images/large.jpg"
     loading="lazy"
     sizes="auto, (width <= 1280px) 100vw, 1280px"
     width="1280" height="512">

autoは必ず先頭に置きます。後ろにメディア条件と幅を続けることで、autoに未対応の環境でも画像候補を選べます。この例では、フォールバックの幅もCSSのレイアウトと一致させています。

autoを指定しても、CSSや画像の寸法指定は必要です。元画像は小さい順に320×128px、640×256px、1280×512pxです。width・height属性には最大画像の寸法を指定し、CSSのheight: autoで縦横比を保ちます。寸法を省略すると意図しない大きさになる場合があるため、画像の縦横比にあった寸法を指定しましょう。

サンプルではページ下方に画像を配置しています。先に表示したいメインビジュアルまで一律に遅延読み込みにする必要はありません。

ブラウザが最適な画像を選定してくれる

従来の画像のレスポンシブ対応では、画面幅1280px以上のときはlarge.jpg、画面幅1280px未満でデバイスピクセル比2の時はmedium.jpgというように、環境に応じてどの画像を表示するのかを開発者が決定する必要がありました。レスポンシブイメージでは、表示すべき画像を判断するのはブラウザです。

「画像ファイルのパス・横幅、表示したい画像幅」の情報を元に、クライアントの環境に応じて最適な画像が表示されます。開発者はどの画面幅でどの画像を表示するべきか、について思い悩む必要はありません。

選択する画像には、表示幅やデバイスピクセル比に加えて、ブラウザーの判断やキャッシュなども関わります。ウインドウ幅を狭めても、必ず小さいファイルへ切り替わるとは限りません。初回表示と、キャッシュがある状態でのリサイズは分けて確認しましょう。実際に選択された画像のURLは、img要素のcurrentSrcプロパティで調べられます。

この手法では、単にサイズの異なる画像を出し分ける場合はとくに問題ありませんが、たとえばスマートフォン向けにはトリミングをした異なる画像を出し分けたいといった場合に対応ができません。

画像の見せ方をコントロールするアートディレクション

ここまで作成したコンテンツを再確認してみましょう。ディスプレイに充分な広さがある場合には最適な見え方と言えますが、狭いディスプレイの場合はそうは言えません。

今回のようなメインビジュアルでは、主題はうさぎの顔です。狭いディスプレイの場合は顔の部分だけがクロップされた画像を表示するのが理想的です。

デバイス毎に見た目の異なる画像を出し分け、最適な画像の見せ方を選択する手法を「アートディレクション」といいます。前述の通り、srcset属性とsizes属性だけでは、デバイス幅毎に強制的に画像を出し分けられません。特定の条件で画像を強制的に切り替え、アートディレクションを実現するための方法として、picture要素が利用できます。

sizes="auto"は画像候補を選ぶための表示幅を求める機能であり、picture要素によるアートディレクションを置き換えるものではありません。

アートディレクションを実現する`picture`要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。

picture要素の書き方を紹介します。

<picture>
  <source media="(width <= 400px)" srcset="sp.jpg 400w" sizes="100vw">
  <source media="(width <= 600px)" srcset="tab.jpg 600w" sizes="100vw">
  <img src="pc.jpg">
</picture>

pictureタグは複数のsourceタグと1つのimgタグで構成されます。sourceタグには3つの属性を指定します。

media属性（メディアクエリ）
srcset属性
sizes属性

ブラウザは各sourceタグのmedia属性を評価し、マッチするものがあればsrcset属性で指定された画像を表示します。マッチするものがなかったり、ブラウザがpicture要素に対応していない場合は、imgタグの画像が表示されます。imgタグの指定は必須です。

`picture`要素のサンプル

ここまで作成したサンプルをアートディレクションに対応させます。画面幅520px以下の時にクロップされた画像（cropped.jpg）を表示します。画面幅520pxより大のときは、これまでの処理を流用しつつsourceタグに書き換えます。

<picture>
  <source media="(width <= 520px)"
          srcset="images/cropped.jpg 640w"
          sizes="100vw">
  <source srcset="images/medium.jpg 640w,
                  images/large.jpg 1280w"
          sizes="(width <= 1280px) 100vw,
                    1280px">
  <img src="images/large.jpg"
       alt="">
</picture>

コラム：picture要素でHDR写真等を表示する方法

最新のブラウザーは color-gamut（色域）と dynamic-range（表示可能なダイナミックレンジ）というメディア特性を実装しています。写真等の画像をより美しく配信する際に、HDR画像やDisplay-P3（iPhone等で対応）の写真を配信することも検討できるでしょう。その場合でも本記事で説明した<picture>要素と<source>が役立ちます。

例：HDRの写真を配信する場合

<picture>
  <!-- HDR 環境（HDR PQ）向け -->
  <source
    type="image/avif"
    srcset="hero-hdr.avif"
    media="(dynamic-range: high)" />

  <!-- フォールバック：sRGB／SDR 環境 -->
  <img src="hero-srgb.jpg" alt="メインビジュアル" />
</picture>

例：Display-P3の写真を配信する場合

<picture>

  <!-- 広色域環境（Display-P3）向け -->
  <source
    srcset="hero-p3.jpg"
    media="(color-gamut: p3)" />

  <!-- フォールバック：sRGB／SDR 環境 -->
  <img src="hero-srgb.jpg" alt="メインビジュアル" />
</picture>

HDRやDisplay-P3はウェブで普及しているとは言いづらいですが、もし使う場合は、未対応環境のためにimgタグでSDR・sRGB画像にフォールバックできるようにしておきましょう。ここでお伝えしたいのは、pictureタグは画面幅のレスポンシブイメージのみならず、メディア特性に応じてさまざまな使い方ができるということです。