レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。

ResponsifyJSの使い方

ResponsifyJSを使った例です。これは普通の表示です。

画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。

実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。

ResponsifyJSは画像のサイズこそ可変ではないものの、表示する部分がレスポンシブに展開されます。画面幅は変わっても、写真の印象は変えたくないという時にぴったりなライブラリです。

ResponsifyJSはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

ResponsifyJS – A jquery plugin that makes images truly responsive, without sacrificing anyone’s face. wentin/ResponsifyJS