新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向

所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。

ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。

• The picture Element, Editor's Draft, 2 January 2014

ちなみに、1つ前の仕様は下記になります。

• The picture element, W3C Working Draft 26 February 2013

このレスポンシブ・イメージ関連では、img 要素の属性として srcset 属性を使う案も以前から提案されていて、こちらは、去年の 8月の時点で WebKit （Nightly Builds） がサポートを開始 （下記記事参照） したりと色々動きがあります。

• WebKit （Nightly Builds） で srcset 属性がサポートされたらしい
• The srcset attribute, Editor's Draft 15 January 2014

また、CSS の方では、image-set() が 2年くらい前ですが、Safari 6 で先行実装されてたりします。今回は詳しく触れませんが。

一方の picture 要素ですが、元々は source 要素と組み合わせて、video / audio 要素などと同じような感じで複数のイメージソースを指定するものでしたが、これに前述した srcset 属性を取り込んで、イメージソースをまとめて複数指定できるようにしたものが、現在の仕様となっています。

新しい picture 要素仕様の変更点

で、今回の最新版でどこが変わったのかというと、大きくは picture 要素内で img 要素が必須になったということ。以前の仕様では、picture 要素のコンテンツモデルは下記のようになっていました。

One or more source elements.
Zero or one img element, serving as fallback content.

The picture element, W3C Working Draft 26 February 2013 から引用

「0個、または 複数の source 要素と、0個、または 1つの img 要素。フォールバックコンテンツとして」 ですね。ほとんどの場合、古いユーザエージェント向けに img 要素を書くんでしょうが、仕様上は必須ではありませんでした。

で、今回の最新仕様では、下記のようになっています。

Zero or more source elements, followed by one img element.

The picture Element, Editor's Draft, 2 January 2014 から引用

「0個、または複数の source 要素に続いて、1つの img 要素」 となり、img 要素を省略することはできません。

最新の picture 要素仕様では、source 要素に指定されたイメージソースによって img 要素の src 属性をコントロールするという挙動に変更されているわけです。

仕様書にはいくつかサンプルが載っていますが、例えば、最も簡単な例だと、下記のように記述します。

<picture>
  <source srcset="sample-x1.5.png 1.5x, sample-x2.png 2x" />
  <img alt="画像だよ" src="sample.png" />
</picture>

srcset 属性の値 （Image Candidate String） は、カンマで区切って複数指定可能で、srcset 属性の仕様では下記のようにルールが定義されています。

1. 0 個以上の空白文字
2. イメージリソースの URL
3. 0 個以上の空白文字
4. 任意で画面の横幅 （Viewport） を指定する正の整数に加えて小文字で 「w」
5. 0 個以上の空白文字
6. 任意で、画面の高さ （Viewport） を指定する正の整数に加えて小文字で 「h」
7. 0 個以上の空白文字
8. 任意でデバイスピクセル比を指定する浮動小数点数に加えて小文字で 「x」
9. 0 個以上の空白文字

ですので、上記のサンプルソースは下記のように動作します。

• 通常画像は src 属性に指定された 「sample.png」 （picture 要素に対応していない環境はこれ）
• デバイスピクセル比が 「1.5」 の環境に対しては srcset 属性に指定された 「sample-x1.5.png」
• デバイスピクセル比が 「2」 の環境に対しては srcset 属性に指定された 「sample-x2.png」

また、media 属性と組み合わせたり、

<picture>
  <source media="(min-width: 45em)" srcset="large.jpg" />
  <source media="(min-width: 18em)" srcset="med.jpg" />
  <img alt="画像だよ" src="small.jpg" width="500" />
</picture>

さらに、sizes 属性と組み合わせたりしてより複雑な出し分けも可能な仕様になっています。ここまでくるともう指定が複雑すぎてよくわからないですけども......

<picture>
  <source sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33% - 100px)"
          srcset="pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,
                  pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w">
  <img src="pic400.jpg" alt="The president giving an award.">
</picture>

Proposal for RespImg Syntax

ついでに触れておきますと、picture 要素 + srcset 属性案の代替として、src-1、src-2 みたいな、src-n 属性を使用する案、「Proposal for RespImg Syntax」 も提案されてたりします。

• Proposal for RespImg Syntax, Unofficial Proposal Draft, 18 October 2013

この辺は色々とカオスな感じではありますが、今後の動きが気になるところ。

2014年 1月 17日追記
「srcNはpictureに統合される形で消滅します（@vantguarde）」とのことです。ご指摘ありがとうございます。

関連リンク

• The srcset attribute, Editor's Draft 15 January 2014 （srcset 属性仕様）
• CSS Image Values and Replaced Content Module Level 4, W3C Working Draft 11 September 2012
• ResponsiveImages.org

関連エントリー

• WebKit （Nightly Builds） で srcset 属性がサポートされたらしい