画像の掲載候補を条件と一緒に列挙する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を表示。
<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」が採用されます。
■高精細ディスプレイでの表示のされ方：
前のページでも解説したとおり、srcset属性で指定した条件は、ディスプレイの高詳細さも考慮した上で選択されます。先のimg要素では、表示環境に応じて以下のように表示画像が選択されます。
- ブラウザの横幅が360pxなら、photo400w.jpgを表示。
- ブラウザの横幅が360pxでも、2倍の高精細ディスプレイなら、photo900w.jpgを表示。
- ブラウザの横幅が360pxでも、3倍の高精細ディスプレイなら、photo1200w.jpgを表示。
■サンプルページ：
閲覧環境に応じて高解像度の画像を表示させるサンプル
→閲覧環境に応じて高解像度の画像を表示させる例
上記では、例として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ディスプレイなどの高精細な画面で閲覧された場合にだけ高解像度の画像を表示させたり、複数の掲載候補からディスプレイの面積に適したサイズの画像を自動選択して表示させる方法として活用できます。ぜひ、試してみて下さい。【関連記事】
- CSSの1pxは 液晶画面1ドットで表示されるとは限らない
- ウインドウ幅に合わせて画像サイズを変化させる方法
- Media Queriesで、画面サイズ別にCSSを切り替える方法
- レスポンシブ・ウェブデザインの簡単な作り方
- CSS3の新単位remで、文字サイズの指定を分かりやすく
