Css Spriteという手法をご存知ですか？
画像の部品をひとつの画像にすることで、セッション数を節約したり圧縮効率を上げたりする手法です。
こうすることによりwebページがより素早く表示されるようになり、ユーザはハッピー！ということらしいです。
ものすごい負荷がかかるほどの大規模サイトじゃない限り、大抵の人には関係ない代物ではあります。

この画像を作るために通常はデザイナが苦労して画像を合成するらしいです・・・・お疲れさまです・・・
何が大変かというと、デザインが変更になる度に画像を合成しCSSを書き換え・・・・死にたくなりますね。

そこで例えばこんなツールがあります。CSS Sprite Generatorは、画像一式をzipで圧縮して投稿すると冒頭の画像のように合成してくれその上CSSまで作ってくれるという優れものです。
けど、結局デザインって画像とか文字色とかを微調整することがなんどもあり、その度にここにアップロードしてチェックしてとか大変ですね。

はい。そこで作っちゃいました。普通に作ったwebページを放り込めば勝手にCSS Spriteをしてくれるスクリプト。
まだベータで凄く単純にケースにしか対応していませんが、作り込めば大抵のサイトで使えるようにできる見込みがあります。
またとりあえずの実験ということで画像の配置に関しては最適化をしていません。（余談ですがこれは長方形詰め込み問題として知られており、いわゆるNP困難な問題です。しかし結構歴史ある問題でさまざまな解放があります。）
作り込むかどうかは様々な要因（就職活動とかバイト先との兼ね合いとか）と気分で変わります。

今回は、mixiさんの会社概要ページで実験させてもらいました。
まず、wgetでソースを丸っととってきます。

wget -k -p http://mixi.co.jp/

すると、index.htmlと関連する画像やCSSが取得できます。
つぎにこれを作成したスクリプトに突っ込みます。

ruby css_spriter.rb src/mixi.co.jp/index.html dest

すると、スクリプトが自動的にHTMLを解析し、imgタグをdivに置き換えるとともに画像合成まで行い、CSSを作成しそれを読み込んだHTMLを作成してくれます！
before/afterのソースコードとか晒せたらよかったんですが、一応他人様のサイトなので自重して結果と部分的なコードだけ示します。

まず、これがビフォア。

で、こちらがアフター。

えぇっと違いわかりませんね(^^;;;;  ほぼ完璧な置換が出来ています。

詳細を見てみましょう。結合した画像はこんな感じ。とりあえず今回は最適化を行わず並べるだけにしてあります。これは長方形詰め込み問題を解くことで効率よく並べられることがわかっています。

次に自動的に作成されたCSSを部分的に。

#globalnavi_company001_off_gif{
display: block;
width: 178px;
height: 36px;
background-image: url(../images/sprites.png);
background-repeat: no-repeat;
background-position: -0px -107px;
}

これはちょうど「会社情報」と書いてある画像の部分になります。

具体的にどういう風に置換されるかというと、

<img height=”36″ width=”178″ alt=”会社情報” src=”http://mixi.co.jp/wp-content/themes/mixicojp2009/img/globalnavi_company001_off.gif”>

という部分が、

<div id=”globalnavi_company001_off_gif”>&nbsp;</div>

こんな感じに置き換わります。
つまり、画像ファイル名をもとにidを生成して、それに対してcssを設定しdivに置き換えてるわけですね。
大変便利です。

これを使うことによって、デザイナーさんはがんばって画像を合成する手間を省くことができ、従来のツールで従来と同じようにウェブ製作を行うことができます。
しかも、最近流行のアジャイル開発とかで頻繁にデザインが変わったとしても、このスクリプトさえあれば簡単にストレス無くデザイン変更が行えます。

大変素晴らしいですね！

機械が出来ることは機械で！人間がやるべきことを人間で！

ついかっとなって2時間くらいで作った割には有益なものが出来たな。