Website Performance | CSS Sprite Generator

複数の画像を１枚にて表示用のCSSも吐いてくれるHTTPパフォーマンス向上ツール「CSS Sprite Generator」。
GoogleはHTTPコネクションを減らすため、画像は一枚で出力しています（参照）。
同じことをやろうとすると結構面倒ですが、複数の画像をZIP圧縮してアップロードするだけで、画像の結合＆CSS出力を行ってくれるサービスが登場しました。

使い方は簡単。画像ファイルをZIPでまとめて圧縮後、アップロードします。



positionに関するCSSが出力されています。



ページ下部には画像を表示したい位置に「background: url〜」の記述も忘れないように、とも明記されています。
「Download Sprite Image」で、結合された画像のダウンロードが可能です。

コネクションが多すぎてパフォーマンスが悪い、コネクションを減らしてもっと多くのユーザを捌きたい、といった場合に活用できそうですね。
知っておくとイザというときに役立ちそうです。