InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。

複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します。


ファイルをアップロードしました。実際にサーバにアップロードされる訳ではなく、クライアントサイドで処理されるようです。


くっついた画像です。


CSSのSprite設定も出力されます。

InstantSpriteは画像をまとめてアップロード(ドラッグアンドドロップ)するだけで自動でくっつけた上でCSSの設定が出力されます。定期的な更新には向かないかも知れませんが、これまでの画像を一気にSprite化したいといった時にはぴったりかも知れません。

InstantSpriteはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

MOONGIFTはこう見る

CSS Spriteは最初に行う時にはいいのですが、その後のメンテナンスが面倒という欠点があります。特にアイコンの一部だけを大きくしたいといった場合や、使われている画像の整理をしたい時には向きません。使われていない画像がSpriteに入ってもサイズのムダでしかないからです。

実際に運用する場合にはアクセスログも調べた上で精査する必要があるでしょう。特にアクセスの多いアイコンを2〜3個でやってみるといった感じです。アイコン画像をくっつけたところでサイズは変わらないので大事なのはコネクション数減にともなうサーバ負荷の軽減を測定することです。

Instant Sprite - Generate CSS Sprites Instantly

bgrins/InstantSprite