srcset っていう属性があるんだって

[shikakun]

いままで Retina ディスプレイに対応するには、CSS3 の Media Queries で min-device-pixel-ratio を見て縦と横のサイズが2倍の画像のパスに切り替えて… とかやっていたけど、img 要素に srcset っていう属性があるのを知らなかった。

具体的にどうやって使うのかっていうと、

<img src="low.png" srcset="low.png 1x, high.png 2x" alt="">

みたいな感じで、srcset にそれぞれのディスプレイ用の大きさに用意したファイルパスをカンマ区切りで指定していくんだって。
2x などのデバイスピクセル比以外にも 1280w とか指定すれば viewport の幅や高さでも切り替えられるらしい。

で、この srcset 属性を解釈してくれるブラウザがどのくらいあるかっていうと…

• http://caniuse.com/#search=srcset

Chrome と Opera の最新版ぐらいじゃないかっていう。スマホでも使えないなあ。(2014/05/19 現在)
未来の話でした！

参考

• http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/
• http://myakura.hatenablog.com/entry/2012/05/16/022649

[kitak]

対応状況が良くなっているのと、質の良いpolyfill( https://github.com/scottjehl/picturefill )があるので、ぼちぼち使ってもいいかもです。