Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に

スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。

Chromium Blog: Chrome 34: Responsive Images and Unprefixed Web Audio

多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させようにも、そのための標準的な方法がないのがその理由です。

Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。

img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。

<img alt="A rad wolf." src="pic1x.jpg" 
srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">

これは現在のimgタグに対する互換性を備えつつ、レスポンシブイメージに対応する実装として組み込まれるとのことです。

レスポンシブイメージの実装はimg要素で決着か

レスポンシブイメージ対応については、今回実装されたimg要素を拡張する方法とは別に、新たにpicture要素を設定し、そこで対応する案も検討されています。

しかしWebKitはすでにimg要素を拡張する実装を進めており、今回Chromeも同じ実装をすると表明したことで、事実上レスポンシブイメージの実装は後方互換性を備えたimg要素で一本化される可能性が高くなってきたのではないでしょうか。