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

レスポンシブなレイアウトにおいて画像を取り扱う場合、従来は複雑なCSS・JavaScriptコードが必要でした。HTML 5.1からは、課題を解決する新仕様「レスポンシブイメージ」が登場します。レスポンシブイメージを使えば、手間のかかるCSSやJavaScriptを必要としません。

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

この記事で学べること
・img要素のsrcset属性とsizes属性の使い方
・picture要素の使い方
・未対応ブラウザへの対策(IE11で利用するための方法)

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

レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年11月に勧告されたHTML 5.1の新仕様です。主な特徴は次の通りです。

  1. CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
  2. デバイスに応じた最適な「大きさ」の画像を表示できる
  3. デバイスに応じた最適な「見た目」の画像を出し分けできる

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

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

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

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

煩雑な画像出し分け処理

作成した画像を次の条件で出し分けるケースを考えます。HTML5のimg要素は画像出し分けには対応していないので、CSSやJavaScriptを使って出し分け処理をする必要があります。

  • 画面幅 1280px以上 : large.jpg
  • 画面幅 640px以上1280px未満、デバイスピクセル比2以上 : medium.jpg
  • それ以外 : small.jpg

HTMLとCSSコードの一例です。表示するべき出し分ける画像の数が増えるほど、CSSコードが煩雑になります。

<div id="mainVisual"></div>

▲ HTMLコード

#mainVisual {
  background-image: url("images/large.jpg");
}

@media (max-width: 1279px) {
  #mainVisual {
    background-image: url("images/medium.jpg");
  }
}

@media (max-width: 639px) {
  #mainVisual {
    background-image: url("images/small.jpg");
  }
}

▲ CSSコード

HTML 5.1に実装されるレスポンシブイメージでは、CSSやJavaScriptを一切用いること無く、HTMLコードのみで画像出し分け処理が可能です

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

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

  1. 画像ファイルのパス
  2. 画像ファイルの横幅
  3. 画像をウェブページ上で表示する際の横幅

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

<img srcset="images/small.jpg 320w,
          images/medium.jpg 640w,
          images/large.jpg 1280w"
     src="images/large.jpg"
     sizes="(max-width:1280px) 100vw, 1280px">

画像ファイルのパスと横幅は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属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。ディスプレイ1280px以下の時は画面幅、それ以外では1280pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"

vwとはビューポートの幅に対する割合を示します。100vwは、ビューポート幅に対して100%の割合という意味です。
sizes属性に100vwを指定した場合、普通はウインドウ幅の変更に応じて画像サイズが変わります。しかし、Safariだけ100vwを指定しても、ウインドウ幅に連動して変化しません。Safariを含む全ブラウザ共通でウインドウ幅に応じて画像サイズを変えたい場合は、CSSでwidthプロパティに%を指定するとよいでしょう。

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

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

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

注意しなければならないのは、「環境に応じた最適な画像決定」の仕組みはブラウザによって異なることです。例えば次のような挙動があります。

  • Chrome : 大きなサイズの画像ファイルをキャッシュした場合、画面幅を狭めても小さい画像は読み込まれない
  • Firefox : 画面幅を変える度に、画面幅に適したサイズの画像を読み込む
  • Safari : 最初に開いた画面幅に応じた画像ファイルがキャッシュされ、画面幅を変えても画像は再読み込みされない

この手法では、単にサイズの異なる画像を場合は特に問題ありませんが、例えばスマートフォン向けにはトリミングをした異なる画像を出し分けたいといった場合に対応ができません。次のページでは、画像の最適な見せ方を実現する「アートディレクション」とpicture要素について紹介します。