まだfirst draftなので変わるかもしれないけれど、そういうのが入った。
-webkit-image-setと似たような感じ。URL+デスクリプタのセット(image candidate stringと呼ぶらしい)を属性に書く。
今のところデスクリプタは3つ。viewportの最大幅を意味する w, 最大高を意味する h, 最高デバイスピクセル比を表す xだそう。wとhは-webkit-image-setにはなかったような。提案してもCSSWGは「メディアクエリーでやれ」って言いそうだけれど。
Retina display対応だけなら、たぶんこんな感じ。
<img src="image.png" srcset="image2x.png 2x" ...>
解像度やdpx比ごとにいろいろしたい場合は、wとかhを使う。
<img src="photo.jpg"
srcset="photo-thumbnail.jpg 300w, photo2x.jpg 2x" ...>
幅が300px以下のときにはサムネイルが使われて、Retina displayのときはそれ用が出てくる。
眠いのであとで書きたそう。