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

更新日 2017年11月23日

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

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年7月29日に公開され、2017年11月23日に更新された記事です。

About the author

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。

この記事をシェアする