画面サイズによって読み込むイメージを切り替えてくれる「Responsive Images」

レスポンシブ・デザインでサイト制作をする際に困るのが画像のサイズ。今とりかかっているサイトでも、対応策に悩んでいるところです。

  • PC画面向けの大きなイメージはモバイルには大き過ぎる。
  • 逆に、モバイル画面向けの小さな画像はPC向けには小さすぎる。

そんな問題を解決してくるのがFilament Groupという制作会社が使った「Responsive Images」という、JavaScriptとApacheの.htaccessを使った仕組です。まだ実験的なものでプロダクションレベルのものではないかも知れませんが、Githubでソースが提供されているので、ここから改善したものをフォークするのもありですね。

「Responsive Images」の仕組

実際に試したわけではないですが、説明によると以下のような仕組だそうです。

  • .htaccessとJavaScriptを利用して、スクリーンサイズによって読み込む画像を切替える
  • 画像は、大・小２つを用意して<img>タグに指定する
  • デフォルトでは480pxをブレイクポイントとして画像の読み込みが切り替わる

HTMLの記述は以下のようになります。

<img src="small.r.jpg" data-fullsrc="large.jpg">
  • 小さいほうの画像に”.r”を追加して記述する
  • 大きい方の画像をdata-fullsrcで指定する

必須条件

  • .htaccessを指定する必要あり (RewriteEngineとやらを使っている)
  • 1.294kbほどのJavaScriptの読み込みが必要
  • 大、小、２つの画像を準備する必要あり

ブラウザ・サポート

  • Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera. Firefox 4でサポート
  • Firefox 3.6-, IE 6/7, etcでは完璧ではないが動く

※Androidでの対応は不明

ライセンス

ちなみに、ライセンスはMITとGPL Version 2のデュアルライセンスだそうです。なので、商用利用も問題ありません。ライセンスについてはこんなまとめページもありました。

参照

2011/07/29 12:10 by @Rriver | RSS | Fb

関連する投稿

関連するカテゴリ・タグ

カテゴリ： レスポンシブWebデザイン
タグ：

Ads by Google