Subscribed unsubscribe Subscribe Subscribe

HTMLのsrcset属性

まだfirst draftなので変わるかもしれないけれど、そういうのが入った。

このまえWebKitに実装された-webkit-image-setと似たような感じ。提案したのがHoberなので似てるのも当然か。

srcsetの書き方

値にはURL+デスクリプタのセットを書く。セットはimage candidate stringと呼ばれている。

デスクリプタは今のところ3つだけ定義されている。

w viewportの幅
h viewportの高
x デバイスピクセル比

仕様だと"maximum"と言ってるんだけど、アルゴリズムをみるとなんかおかしい。ココら辺は直ってくだろう。

wh-webkit-image-setにはなかったような。提案してもCSSWGは「メディアクエリーでやれ」って言いそうだけれど。

Retina display対応だけなら、こんな感じ。

<img src="image.png" srcset="image-2x.png 2x" ...>

URL 2xと書けば良い。昨年末あたりから出ているHD解像度なAndroidスマートフォンもxhdpiだと思うので、これが適用されることになるだろう。

hdpiなAndroidスマートフォン用に別の画像を指定したい場合は、こう書くことになるんだろう。

<img src="image.png" srcset="image-1.5x.png 1.5x, image-2x.png 2x" ...>

あと、image-2x.png 1.5xにしておけばhdpi以上のdpiもってる端末に適用される。丸め誤差が出るだろうから1.5xで綺麗に見えるかどうかは知らない。

で、画面の幅や高さごとにいろいろしたい場合は、wとかhを使う。

<img src="photo.jpg"
     srcset="photo-thumbnail.jpg 300w" ...>

幅が300csspx以下のときにはサムネイルが使われる。

さて、どうなるかなあ。

Remove all ads