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

Advertisement

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

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

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

「Responsive Images」の仕組

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

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

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

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

必須条件

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

ブラウザ・サポート

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

※Androidでの対応は不明

ライセンス

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

参照

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

“画面サイズによって読み込むイメージを切り替えてくれる「Responsive Images」” への1件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です