元画像群からSprite画像とCSSを生成「Sprite Factory」
小さなアイコン画像などを一つにまとめて表示はCSSで切り出して行うのがCSS Spriteです。用意する手間があるため二の足を踏むケースも多いのですが、Sprite Factoryを使えばごく手軽に運用ができそうです。
インストールします。Rubygemsでインストール可能です。
実行はsfコマンドで。ディレクトリを引数としてそれ以下にある画像を全てまとめてくれます。
生成されるのはimg.cssとimg.pngです（カスタマイズ可能）。
生成されたCSSです。img.pngのSprite指定になっています。
生成された画像です。全て横につながった画像になっています。
生成された画像と元ディレクトリです。
オプションです。パスやSass形式での出力などに対応しています。
Sprite Factoryはクラス名に元のファイル名がつけられるので、Sprite画像は見ずともクラス名の指定がしやすいのが特徴です。サイト制作時はもちろん、その後の更新時にも利用できるでしょう。
Sprite FactoryはRuby製、CSS用のオープンソース・ソフトウェア（MIT License）です。
MOONGIFTはこう見る
Sprite画像は最初の作成時はよくとも、その後の運用がしづらいという印象があります。Sprite Factoryではクラス名に元ファイル名をつけることによって、万一画像の位置が変わったとしてもHTML側の変更がいらないようになっています。とても良い仕組みです。
Sprite Factoryであれば元ファイル名をクラス名につけるという運用フローさえ整っていれば日々実行していても良いくらいです。生成されたCSSを配置するだけでコネクションの数の大幅な低減は間違いありません。小さなアイコンをたくさん使っているサイトなどでぜひ試してほしいライブラリです。