ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

解像度の高い画面にだけ高解像度の画像を表示する方法(2ページ目)

Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法を解説。HTML5で追加されたsrcset属性を使うと、解像度の異なる複数の画像を表示候補として指定でき、表示環境に応じてブラウザ自身が適切な画像を選んで表示に使ってくれます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

画像の掲載候補を条件と一緒に列挙するsrcset属性

それでは、HTML5で追加されたsrcset属性を使って、複数の画像掲載候補を列挙する記述方法をご紹介致します。

記述方法の概要:
img要素を使って1枚の画像を掲載する場合は、以下のような感じで記述していました。
<img src="画像ファイル名" alt="代替文字">
このimg要素に、下記のようにsrcset属性とsizes属性の2つを加えます。
<img src="デフォルト画像"
     srcset="画像と条件(1), 画像と条件(2), ......"
     sizes="表示領域に対する割合"
     alt="代替文字">
srcset属性に非対応であれば、従来通りsrc属性の値が読まれます。ですから、古いブラウザで閲覧された場合でも、何も表示されないといったことにはなりません。安心して活用できます。

srcset属性を使って、画像の掲載候補を列挙する記述例:

掲載候補として7枚の画像を用意し、以下のような条件で表示させたい場合を例にします。
  • 描画領域の横幅が 400px以下なら、photo400w.jpgを表示。
  • 描画領域の横幅が 600px以下なら、photo600w.jpgを表示。
  • 描画領域の横幅が 900px以下なら、photo900w.jpgを表示。
  • 描画領域の横幅が1200px以下なら、photo1200w.jpgを表示。
  • 描画領域の横幅が1500px以下なら、photo1500w.jpgを表示。
  • 描画領域の横幅が1800px以下なら、photo1800w.jpgを表示。
  • srcset属性に非対応なら、default.jpgを表示。
上記のような条件で7枚の画像を表示したい場合には、以下のようにimg要素を記述します。ここではソースの記述内容が見やすいように改行を加えていますが、実際に記述する際にはわざわざ改行しなくても構いません(改行しても問題ありません)。
<img src="default.jpg"
     srcset="photo400w.jpg 400w, 
             photo600w.jpg 600w,
             photo900w.jpg 900w,
             photo1200w.jpg 1200w,
             photo1500w.jpg 1500w,
             photo1800w.jpg 1800w"
     sizes="100vw"
     alt="画像の代替文字">
※横幅が1,800pxを越えている場合には、最後のphoto1800w.jpgが表示されます。

このsrcset属性とsizes属性の書き方について、以下で簡単にご紹介致します。

srcset属性の書き方
   srcset="photo400w.jpg 400w, 
上記は、「描画領域の横幅が400px以下」のときに、「画像photo400w.jpgを表示する」という意味です。このように、「画像ファイル名」と「横幅サイズ」を空白で区切って指定します。これを半角カンマ記号「,」を使って必要なだけ列挙します。なお、横幅サイズは「400」ではなく「400w」のように「w」を付けて記述します。

sizes属性の書き方
   sizes="100vw"
ここでsizes属性に指定している値「100vw」は、「描画領域の横幅に対して100%」を表しています。単位vwは「Viewport Width(描画領域の横幅)」の意味です。つまり「100vw」は、「Viewport(描画領域)のWidth(横幅)に対して100(%)」という意味です。画像を描画領域の横幅いっぱいに広げた際のサイズを基準にして画像を選ばせたい場合には、このように記述しておきます。もし、画像を描画領域の横幅の半分で掲載するなら、「50vw」を指定します。

このsizes属性では、「srcset属性に記述した条件」(400wや800wなど)を判定する際の、基準になる横幅を指定しているだけです。例えば、先のimg要素では、
  • 「sizes="100vw"」が指定されているとき、描画領域の幅が1,200pxなら、srcset属性値の「photo1200w.jpg 1200w」が採用されます。
  • 「sizes="50vw"」が指定されているとき、描画領域の幅が1,200pxなら、srcset属性値の「photo600w.jpg 600w」が採用されます。
あくまでも条件判定に使われるだけであって、「sizes="100vw"」を指定したからといって、画像が描画領域の横幅一杯に広がって表示されるわけではありません。実際に画像を横幅一杯に広げて表示するには、別途CSSなどを使った装飾指定(「width:100%;」などの記述)が必要です。後述のサンプルページのソースもご参照下さい。

高精細ディスプレイでの表示のされ方
前のページでも解説したとおり、srcset属性で指定した条件は、ディスプレイの高詳細さも考慮した上で選択されます。先のimg要素では、表示環境に応じて以下のように表示画像が選択されます。
  • ブラウザの横幅が360pxなら、photo400w.jpgを表示。
  • ブラウザの横幅が360pxでも、2倍の高精細ディスプレイなら、photo900w.jpgを表示。
  • ブラウザの横幅が360pxでも、3倍の高精細ディスプレイなら、photo1200w.jpgを表示。
2倍の高精細ディスプレイなら、ブラウザの横幅が360pxでも、液晶は横方向に720ドットあります。 3倍の高精細ディスプレイなら、ブラウザの横幅が360pxでも、液晶は横方向に1,080ドットあります。 その高精細さに合わせた画像が表示に使われます。

サンプルページ
閲覧環境に応じて高解像度の画像を表示させるサンプル

閲覧環境に応じて高解像度の画像を表示させるサンプル

上記のソースを使ったサンプルページを用意しています。実際にアクセスして表示を確認してみて下さい。ブラウザのウインドウ幅を変化させると、表示画像が変わります。また、高精細ディスプレイを搭載した端末で閲覧した場合は、高詳細さが考慮された画像が選択されているはずです。

閲覧環境に応じて高解像度の画像を表示させる例

上記では、例として400や600などキリの良いサイズで用意しましたが、実際には、「640px」や「800px」など、代表的な端末のサイズに合わせて用意しておく方が、自動縮小されることなく掲載できる可能性が高められて良いかも知れません。

横幅(w)ではなく倍率(x)での指定方法もある
上記の記述方法は、「描画領域の横幅が何pxの場合にどの画像を表示するか」という横幅(w)を基準にした指定方法でした。それに対して、ディスプレイの高精細さだけを対象にして、「高精細さがどれくらいの場合にどの画像を表示するか」という倍率(x)を基準にした、以下の記述方法もあります。
   srcset="photo400.jpg 1x,
           photo800.jpg 2x,
           photo1200.jpg 3x"
この場合は数値に「x」を付けて倍率を表します。上記の場合は、高精細ではないディスプレイ(倍率1倍)ではphoto400.jpgが表示され、2倍の高精細ディスプレイではphoto800.jpgが表示され、3倍の高精細ディスプレイ(以上)ではphoto1200.jpgが表示されます。

ブラウザの幅ではなく、ディスプレイの仕様だけを基準にして画像を選択させたい場合には、この「x」を使う方法で記述すると良いでしょう。

srcset属性の対応状況と、非対応でも使えるようにする方法

代表的なブラウザでのsrcset属性の対応状況は以下の通りです。 本稿執筆時点では、上記の記述方法が利用可能なブラウザは、ChromeとOperaのみです。多くのブラウザでは、横幅(w)の記述方法よりも、倍率(x)の記述方法の方が先にサポートされています。
  • Chrome: Ver.38以降で、wもxも使用可能。※Ver.34~37では、xのみ使用可。
  • Opera: Ver.25以降で、wもxも使用可能。※Ver.21~24は、xのみ使用可。
  • Firefox: Ver.32以降で、wもxも使用可能な機能はあるが、設定で有効にしないと使えない。
  • Safari: Ver 7.1以降で、xのみ使用可。
  • Internet Explorer: 非対応 (※本稿執筆時点の最新版はIE11)

srcset属性に非対応のブラウザでも使えるようにする「picturefill」スクリプト
srcset属性に対応していないブラウザでも、「picturefill」というスクリプトを読み込ませることで、srcset属性やsizes属性の記述内容を認識してくれるようになります。メジャーなブラウザの多くが対応するまでは、このスクリプトを併用しても良いでしょう。

配布サイトからpicturefill.jsファイルをダウンロードしてウェブ上にアップロードし、以下のように1行を記述して読み込ませるだけで使えます。先のサンプルページでも、このスクリプトを読み込んでいます。
<script type="text/javascript" src="picturefill.js"></script>
ただし、このスクリプトを使った場合、(srcset属性に非対応のブラウザでは)選択肢から画像が選ばれる前に、一瞬だけデフォルトの画像(src属性に指定した画像)が表示されます。そのため、デフォルト画像を読み込む分の通信量が無駄になってしまいます。

非対応ブラウザを気にしない手もある
srcset属性に対応していなくても、(同時にsrc属性を記述しておけば)srcset属性に非対応のブラウザでも画像の表示自体は可能です。ですから、今はsrcset属性に対応しているかどうかは気にしないでおく、という手もあります。

解像度の高い画面にだけ高解像度の画像を表示する方法

今回は、HTML5で追加されたsrcset属性の使い方をご紹介致しました。Retinaディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法として活用できます。ぜひ、試してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます