レスポンシブWebデザインを取り入れたサイトは増えていますが、HTMLはフレキシブルに変更できても画像リソースはそう簡単ではありません。そのため幅ごとに数パターン画像を用意しているケースもあります。 同じ画像の場合、単にサイズを小さくしてしまうと見るべき場所も小さくなって分かりづらくなります。そこで使ってみたいのがFocusPointです。

FocusPointの使い方

デモです。フォーカスポイントは白い線で囲まれた部分になります。

幅を変更してもフォーカスポイントが中央になっています。画像の大きさ自体は変わっていないですよね。

縦を縮めました。画像が小さくなっていますが白い線で囲まれた部分は残っています。

多数の幅でまとめて表示。全てちゃんと白く囲まれた部分はなるべく多く表示されます。

こちらはカンガルー。

FocusPointは自動的に画像の良い場所を選んでくれる訳ではなく、自分でどの場所にフォーカスして欲しいかを定義する必要があります。

<div id="Frame1" class="focuspoint"
  data-focus-x="-0.274"
  data-focus-y="0.033"
  data-image-w="1000"
  data-image-h="667">
  <img src="../img/dolphin.jpg" alt="" />
</div>

中心点（x/y）と画像の幅と高さ（w/h）を定義します。それによって中心点をなるべく残しつつ（かといって単に拡大している訳ではなく）表示しています。こういう、何となくいい感じに表示してくれるライブラリというのは良いですね。

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

FocusPoint Example jonom/jquery-focuspoint