The World Wide Web Consortium |
public-html@w3.orgメーリングリストに「Adaptive images」という興味深い提案が投稿された。Dominique Hazael-Massieux氏が提案したもので、HTML img要素で複数の画像を指定できるようにする内容になっている。PC、タブレットデバイス、スマートフォンなど多種多様なスクリーンが混在するようになった現在、検討に値する話題といえる。
異なるスクリーンサイズに対してそれぞれ適切なデザインを提供する方法はいくつもある。最近の流れはCSS3のメディアクエリを使うというもの。スクリーンサイズに応じて適用するスタイルシートを切り分ける方法で、CSSのみの対応で済むという特徴がある。ただしその場合でも、スクリーンサイズに応じて利用する画像を切り替えるという方法はあまり優れた方法が提供されていない。
Dominique Hazael-Massieux氏の提案は、img要素で複数の画像を指定できるようにし、ブラウザが適切な画像をダウンロードして表示するというもの。2つの方法が提案されている。一つの方法は「srclist」という属性をimg要素に追加し、スクリーンサイズに応じて利用する画像を選択できるようにするというもの。この方法はHTMLの変更のみで対応できる。
<img src=default.jpg srclist=alternativeSizes alt="Picture of Unicorn">
<sourcelist id=alternativeSizes>
<source src="big.jpg" media="min-width: 600px" width="600" height="400">
<source src="small.jpg" media="max-width: 600px" width="320" height="320">
</sourcelist>
もう一つの方法はimg要素のソースとしてリストを指定できるようにし、別ファイルのリストの中で複数の画像を指定するというもの。このリストは<script type='image/list'>に組み込めるようにしてもいいかもしれないと補説もある。こちらの方法を実現するにはIETFドラフトを用意する必要があるとも説明されている。
<img src="image.list" alt="Picture of Unicorn>
image.list:
Content-Type: image/list
URI: big.jpg
media: (min-width: 600px)
URI: small.jpg
media: (max-width: 600px)
PC、タブレット、スマートフォンといった複数のデバイスが登場している今、複数の画像を指定できるリーズナブルが方法が必要とされているのは間違いない。public-html@w3.orgメーリングリストに投稿された提案はあくまでも最初の提案にすぎず、まったく別の形で取り組まれる可能性もある。たとえばRobert’s talkのRobert Nyman氏は自身のブログにおいて、提案されている方法は多くの書き換えを発生させることになるため、HTMLで指定する代わりにCSSのメディアクエリ内部でsrc属性を利用できるようにし、代替え画像を指定できるようにしてはどうかという提案がなされている。
