Google は最近、デスクトップおよびモバイル デバイス向けに Chrome 38 をリリースしました。
Google は 6 週間ごとにブラウザを更新していますが、実際のところ、あまりに頻繁に更新されるため、新しい機能や価値のある機能はほとんど追加されません。
今回のリリースではそうではありません。
Chrome 38 の変更点には、ECMAScript 6 ドラフト仕様のサポートの一環として、JavaScript の新機能のサポートが含まれています。
しかし、大きなニュースは、Chrome 38 がまったく新しい HTML Picture 要素をサポートする最初のブラウザだということです。
Picture要素は、Web開発者向けの新しいツールの一つで、使用デバイスの画面サイズに応じて異なる画像を表示できます。Picture要素は注目を集めていますが、多くの場合、開発者は新しい要素自体を必要としておらず、<img alt="">
要素の新しい属性のみを必要とします。
一体何がそんなにすごいのでしょうか?ウェブサイトがデバイスに合わせてレイアウトを調整することがますます一般的になっていることに、おそらく気づいているでしょう。例えば、小さな画面ではメニューが折りたたまれ、コンテンツブロックが縦に積み重ねられることがありますが、大きな画面では配置が異なります。こうした柔軟なレイアウトは、レスポンシブウェブデザインと呼ばれるものの一部です。適切に実装されていれば、同じコンテンツを持つ単一のウェブサイトが、あらゆるデバイスで適切に表示されるようになります。
開発者にはレイアウト変更のためのツールはありますが、レイアウトに含まれる画像のサイズについては、できることが限られています。画像はスマートフォンに合わせて縮小されるかもしれませんが、裏ではブラウザが大きなファイルをダウンロードしています。小さな画面に大きな画像を送信するのは、帯域幅の無駄遣いです。そのため、レスポンシブなウェブサイトを構築する際、開発者は画像の処理に様々な工夫を凝らしてきました。しかし、これまではそうでした。
Picture要素と、古き良き<img alt="">
要素で利用できる新しい属性が、この状況を変えます。GoogleがChrome 38の発表で述べているように、これらの新しいレスポンシブ画像ツールは「Webプラットフォームに洗練されたソリューションを組み込む」ものです。
現時点では、レスポンシブ画像をサポートしているブラウザはChrome 38のみですが、Opera 25はOperaのベータチャンネルからリリースされ次第サポートされる予定です。Firefoxも今年後半のリリースでレスポンシブ画像をサポートする予定で、MicrosoftのInternet Explorerチームもレスポンシブ画像のサポートをロードマップに含めていることを示唆しています。
Chrome はレスポンシブ画像をサポートする最初の Web ブラウザかもしれませんが、そもそもソリューションが存在するという事実は、標準化団体や革新的なブラウザ開発者のおかげで実現したのではなく、Web 開発コミュニティ全体の努力のおかげです。
写真は写真です。Chrome 38ではそうではありません。クリックして拡大
W3Cのレスポンシブ画像コミュニティグループは、開発者のマット・マーキス氏が率いており、新しいPicture要素と<img alt="">
img要素の新しい属性の仕様を開発しました。この仕様は数年をかけて数十人のコア開発者による多大な努力によって策定されました。しかし、ウェブブラウザが実際にサポートを開始するまでは、仕様は単なる言葉の羅列に過ぎません。だからこそ、Chrome 38は非常に重要なのです。
Chrome 38 でのレスポンシブ イメージのサポートは、主に開発者 Yoav Weiss の成果です。Yoav Weiss は、成功したクラウドファンディング キャンペーンの一環として、Chrome でのレスポンシブ イメージのサポートの実装に貢献しました。
ユーザーのためのこうした努力の最終的な結果として、モバイルのデータ プランでより高速かつ軽量な Web サイトが実現します。
新しいレスポンシブ イメージ サポートの実際の動作を確認したい場合は、Chrome の最新バージョンをインストールしていることを確認し、このレスポンシブ イメージ デモをご覧ください。®