画像を生成せずにサムネイル風に小さな画像を表示「jQuery NailThumb」
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。
Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。
デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。
正方形の他に縦横比の固定、横幅優先といった指定もできます。
縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。
こちらは切り取りです。
他にもサンプルが多数あります。
画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイズの設定をJavaScriptで計算しているという訳です。画像は縮小した際の配置（縦横における配置）を指定できます。設定を変えた時にアニメーションする仕組みがあるのがユニークです。
jQuery NailThumbはjQuery/JavaScript製、GPL v3のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
この手のライブラリとしてはよくあるCanvasタグによるバイナリハックかと思ったのですが、実際にはスタイル設定でこなしていました。この場合元画像のサイズは変わっていないので転送量は大きいままですが、クライアントサイドだけでそれっぽい処理がこなせるのは大きな利点です。
また、JavaScriptによる負荷は殆どないので高速に使えるという利点も大きそうです。大きな画像を無理矢理小さくするというのはあまり勧められないのですが、それも使い方次第といった所でしょう。覚えておくと使える場面がありそうです。
via Create Thumbnails Easily with jQuery NailThumb Plugin | Web Resources | WebAppers