ITエンジニア/デザイナ向けにオープンソースを毎日紹介

imagefill.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。

レスポンシブなWebサイトを構築する際に考えなければならないのが画像などのリソースです。サイズが変わってそのまま縮小すると見栄えがとても悪い場合があります。そこで遣ってみたいのがimagefill.jsです。


デモです。幅が広い場合はこのように表示されます。


幅が狭くなるとこんな感じに。高さは変わっていません。


このくらいの幅がちょうどいいかも知れません。


様々なサイズでのデモ。グリッドで並べたり、高さや幅を色々変えて表示が確認できます。


画面の幅を変更しました。グリッドがいい感じにぴったりと並びます。


さらに縮めてスマートフォンサイズにグリッドの数が変わり、さらに表示部分もダイナミックに変わっています。

imagefill.jsはレスポンシブに対応しており、画面幅を変更するとダイナミックに表示が切り替わるようになっています。画像の中央部分を軸に幅や高さに合わせていい感じに表示してくれるので手軽に使えそうです。


MOONGIFTはこう見る

レスポンシブにおける弱点の一つが画像です。スマートフォンやタブレット、デスクトップなどそれぞれにおいて最適な画像の表示は異なります。さらにRetina対応を考えるとリソースサイズが膨らみがちで、関係のないユーザにとっては単に重たいサイトになってしまいます。

かつてガラケーであったように個々の機種、機能に合わせた画像の最適化処理が必要になっているのかも知れません。imagefill.jsはそれを簡易的ながらもいい感じに処理してくれます。本格的な対応の前に導入すると良さそうです。

imagefill.js | Project Page

johnpolacek/imagefill.js

 

MOONGIFTの関連記事

  • DevRel
  • Com2