日本のwebサイトにおけるスマートフォン・タブレットユーザーのシェアは32%に達し(参照「StatCounter」)、今やレスポンシブなwebデザインなどのスマートフォンを意識した設計が必須です。しかし、レスポンシブなレイアウトにおいて画像を取り扱う場合、最適な画像サイズ、最適な画像の見せ方を実現するには、複雑なCSS・JavaScriptコードが必要でした。HTML 5.1では、このような課題を解決する新仕様「レスポンシブイメージ」が登場します。レスポンシブイメージを使えば、従来のようにCSSやJavaScriptを必要としません。本記事では、webページの作成を通してレスポンシブイメージの特徴と使い方について解説します。

160926_responsive_image_policy

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

レスポンシブイメージとは、レスポンシブなwebサイトにおける画像の取り扱い方を定めたHTMLの技術。今秋に正式勧告が予定されているHTML 5.1の新仕様です。主な特徴は次の通りです。

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

今回はwebページにおけるメインビジュアル画像の表示を通して、レスポンシブイメージの説明をします。

今回作成するデモについて

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

160926_responsive_image_demo

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

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

160926_responsive_image_imagesize

煩雑な画像出し分け処理

作成した画像を次の条件で出し分けるケースを考えます。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コードのみで画像出し分け処理が可能です。次のページで詳しく紹介します。