日本のwebサイトにおけるスマートフォン・タブレットユーザーのシェアは32%に達し（参照「StatCounter」)、今やレスポンシブなwebデザインなどのスマートフォンを意識した設計が必須です。しかし、レスポンシブなレイアウトにおいて画像を取り扱う場合、最適な画像サイズ、最適な画像の見せ方を実現するには、複雑なCSS・JavaScriptコードが必要でした。HTML 5.1では、このような課題を解決する新仕様「レスポンシブイメージ」が登場します。レスポンシブイメージを使えば、従来のようにCSSやJavaScriptを必要としません。本記事では、webページの作成を通してレスポンシブイメージの特徴と使い方について解説します。
レスポンシブイメージとは一体何か？
レスポンシブイメージとは、レスポンシブなwebサイトにおける画像の取り扱い方を定めたHTMLの技術。今秋に正式勧告が予定されているHTML 5.1の新仕様です。主な特徴は次の通りです。
- CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り扱える
- デバイスに応じた最適な「大きさ」の画像を表示できる
- デバイスに応じた最適な「見た目」の画像を出し分けできる
今回はwebページにおけるメインビジュアル画像の表示を通して、レスポンシブイメージの説明をします。
今回作成するデモについて
まずは完成形のページをご覧ください。うさぎの画像がレスポンシブイメージで表示されています。520px以上の画面幅のときは、大きさの違うmedium.jpg、large.jpgのうち最適な画像が、520px未満の画面幅のときは、四角にクロップ（切り抜き）された画像がそれぞれ表示されます。
異なる大きさの画像表示の問題点
レスポンシブなwebサイトで画像を表示する場合、スマートフォン、タブレット、ノートパソコン、デスクトップパソコン等、あらゆるデバイス幅・解像度に適した画像を準備する必要があります。異なる大きさのsmall.jpg、medium.jpg、large.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コードのみで画像出し分け処理が可能です。次のページで詳しく紹介します。
