Combine images using CSS sprites 対応

Combine images using CSS sprites の対応をどうするか。アイコン画像を一つのファイルとして必要なものを切り取る感じでCSSに書けということらしいが・・・。やはり、FontAwesome を使うことを前提に考えることにする。どうしても、バランスや見た目の美が損なうなら妥協するか、Combine する。後者は面倒なので当分やらないが・・・。

CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。
具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。
画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要なので、ご利用は計画的に行わねばなりません。

メリット
サイトの読み込みが速くなる
スライス設定が楽ちん
HTMLがすっきりする（imgフォルダもすっきりする）
デメリット
更新が面倒（サイズが変わった時とか増えた時とか）
スライスするまでにちょっとした工夫が必要
CSSがbackground-positionで溢れ返る