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要素で一本化される可能性が高くなってきたのではないでしょうか。

あわせて読みたい

Web技術 Web標準 Chrome Google Webブラウザ




タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

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

最新記事10本