白石 俊平

WebKitがsrcsetを実装!レスポンシブイメージの問題が大きく前進

WebKitがWebKitが、img要素のsrcset属性を実装したとのニュースが、海外のWeb開発者たちの間で話題になっています。

srcset属性は、レスポンシブイメージを実現するために、WHATWGが提案していた仕様です。 この機能を用いると、ブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができるようになります。

例えば以下のコードでは、ピクセル密度が2倍の(Retinaディスプレイのような)スクリーンを備えたデバイス上ではhigh-res.jpgを、それ以外のデバイスではlow-res.jpgを読み込みます。

<img src="low-res.jpg" srcset="high-res.jpg 2x">

この件について詳しく報じている“WebKit Has Implemented srcset, And It’s A Good Thing | Smashing Mobile”という記事によれば、srcset属性はレスポンシブイメージが必要となるユースケースを全て満たすものではない(帯域幅に応じて読み込むイメージを変える、など)けれども、大きな前進であると述べています。

WebKitが実装した事で、Chrome(Blink)の実装にどう影響を及ぼすのか、対抗する仕様とみなされていたpicture要素の今後はどうなるのか、など興味は尽きません。引き続き、Web技術者は注目を続ける必要があるでしょう。

Powered byNTT Communications

tag list

アクセシビリティ イベント エンタープライズ デザイン ハイブリッド パフォーマンス ブラウザ プログラミング マークアップ モバイル 海外 高速化 Angular2 AngularJS Canvas Chrome Cordova CSS de:code ECMAScript Edge Firefox Google Google I/O 2014 HTML5 Conference 2013 html5j IoT JavaScript Microsoft Node.js PhoneGap Polymer React Safari SkyWay TypeScript UI UX W3C W3C仕様 Webアプリ Web Components WebGL WebRTC WebSocket