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

2014年3月5日

スマートフォンのような小さな画面からデスクトップ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要素で一本化される可能性が高くなってきたのではないでしょうか。

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : Chrome , Google , Webブラウザ , Web標準



≫次の記事
W3C、ゲームコントローラ対応の標準仕様「Gamepad API」のドラフトを公開
≪前の記事
GREEがOpenStackを導入した理由と苦労と改良点(後編)。OpenStack Days Tokyo 2014

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus