WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。
srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。
srcset 属性の基本を簡単に
詳しい仕様は下記にあります。まだ Editor's Draft なので今後変更される可能性もありますが、簡単に現状の仕様に基づいて触れてみます。
まず、簡単な書き方を例に挙げてみますが、下記のような感じです。
<img alt="画像だよ" src="sample.png"
srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" />
srcset 属性にいくつかの値が指定されていますが、この値は 「Image Candidate String （訳せば画像候補文字列ですかね）」 と呼ばれ、カンマで区切って複数指定可能、かつ、それぞれの指定は下記のルールで記述できます。
- 0 個以上の空白文字
- イメージリソースの URL
- 0 個以上の空白文字
- 任意で画面の横幅 （Viewport） を指定する正の整数に加えて小文字で 「w」
- 0 個以上の空白文字
- 任意で、画面の高さ （Viewport） を指定する正の整数に加えて小文字で 「h」
- 0 個以上の空白文字
- 任意でデバイスピクセル比を指定する浮動小数点数に加えて小文字で 「x」
- 0 個以上の空白文字
このうち、イメージリソースの URL は省略できません （っていうか省略したら意味ないけど）。
任意で記述可能な、画面の横幅、高さの指定、及びデバイスピクセル比に関しては最低 1つの値が必要ですが、すべてに初期値が定義されていますので、すべて省略した場合は、横幅、高さは 「無限」 、デバイスピクセル比は 「1」 が指定されたものとして扱われます。
また、これらの値は仕様上、「最大値として扱われる」 ということなの （下記引用部分参照） で、例えば 800w って書けば 「画面横サイズ 800px （CSSピクセル） 以下」 っていう扱いになります。
To specify an image, give first a URL, then one or more descriptors of the form 100w, 100h, or 2x, where "100w" means "maximum viewport width of 100 CSS pixels", "100h" is the same but for height, and "2x" means "maximum pixel density of 2 device pixels per CSS pixel".
The srcset attribute から引用
ただ、この解釈だと 2x って書いた場合、「デバイスピクセル比 2 以下」 と扱われるので、上の例で言えば、sample-x2.png 2x だけ書いた場合、それ以下、例えばデバイスピクセル比 1 や 1.5 の環境などでもこの画像が表示されることになってしまわないのかなという素朴な疑問......
もしそうだと多分挙動としてはおかしいことになるのでデバイスピクセル比に関しては、最大値じゃなくて、最小値と考えた方が自然な気もする。この辺は実装の方を信じた方がよさげなんだけど、手元に Retina display の Mac がないから確認できない......
ということで、ちょっと仕様上の不明点はあるものの、上のサンプルで言えば、
- 通常画像は src 属性に指定された 「sample.png」
- デバイスピクセル比が 「1.5」 の環境 （一部の Android 端末とか） に対しては srcset 属性に指定された 「sample-x1.5.png」
- デバイスピクセル比が 「2」 の環境に対しては srcset 属性に指定された 「sample-x2.png」
を表示するという指定になるはずです。
デバイスピクセル比ではなく、例えば画面の横幅が 320px 以下の場合に出したい画像があれば、
<img alt="画像だよ" src="sample.png"
srcset="sample-mini.png 320w" />
のように書くこともできます。
さらに全部を組み合わせて書くと下記のような感じに。
<img alt="画像だよ" src="sample.png"
srcset="sample-2x.png 2x, sample-mini.png 320w, sample-mini-2x.png 320w 2x" />
なお、srcset 属性に対応しないブラウザに関しては、srcset 属性が無視されるだけでなんの影響もなしです。
Webkit のサイトに、srcset 属性のサンプルページがありますので、そちらで実際の動作を試すことができます。
