新しい img 属性「srcset」 でレスポンシブのための画像が効率よく扱えるようになりそう

thikasa

Category: ネット / Tag: ,

RWD - 無料写真検索fotoq
photo by phil dokas

こんなニュースが届きました。

Safari などに使われている HTML レンダリングエンジンである WebKit にて、img タグに新しい srcset なる属性が実装されたとのこと。

これによって、ディスプレイサイズに合った画像を個別に指定できるようになりそうです。


レスポンシブでできるのは画像の表示サイズの指定

是非の議論はともかくとして、最近の Web サイトでは、「レスポンシブデザイン」がよく用いられています。

これは、CSS3 のメディアクエリー(media query)という機能を使い、その Web サイトを表示している領域のサイズの値によって、定義している CSS の定義値を切り替えて、画面表示のさせ方見せ方を適宜変更させる方法です。

(このブログでも採用しています。)

その際、表示する画像の表示サイズも、変える(指定する)ことができます。

でも、そう、変えることができるのは、あくまで表示サイズ。

例えば PC 用の綺麗な写真をブログに載せたとします。PC でも見る用に、その写真はファイルサイズが大きな画像ファイル。
そのブログを iPhone 用に表示するには PC 用のその大きなファイルサイズの画像を同じように見ることになります。そしてそのままだと写真が iPhone の画面からはみ出しまくるので、写真を見られるよう、表示サイズを小さく指定します。

まわりくどい言い方をしてますが、あたりまえのことですね。

PC よりもずっと小さく表示するのにもかかわらず、ファイルの読み込み時間がかかる、大きなファイルを使わないといけないのです。

Web サイトの表示パフォーマンスにおいて、これは結構大きな問題になります。
画像ファイルの読み込み時間がブログの表示パフォーマンスに与える影響はかなり大きいです。

余談ですが、Web サイトの表示パフォーマンスは、Google での評価にも影響するようです。

srcset で複数の画像ファイルを指定できる

この問題に対し、WebKit では、img 要素(タグ)に、新しい「srcset」という属性を実装しました。

こんな感じに使います。

解像度によって、通常とは異なる画像ファイルを指定することができます。

これは…イイですね!(・∀・)
iPhone の時は小さめの画像ファイルを表示するよう指定することが可能になります。
解像度に対しての詳しい指定方法はまだあまりよくわからないです…

より Web サイトの表示パフォーマンスを高めることができそう。

実際と詳細が気になる

WebKit と言えば Safari で使われているものですから、iPhone の Safari にも使われるようになるかもしれません。パフォーマンスに関わるようなことは Apple も注目しそうですし。

まぁ画像ファイルを複数用意するのがちょっと大変そうだなと思わなくもないのですが、でも使ってみたらどんな感じになるのか、とても気になります。。

iPhone Safari にも導入されたら、ぜひ使ってみたいです。

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly