画像をひとまとめの画像にする「CSS Sprite Generator」
ずいぶん前の記事だけど、画像のHTTPリクエストをCSSを使って軽減するジェネレータだそうです。これは便利そう。
http://spritegen.website-performance.org/
簡単な使いかたメモ。
確かにいわれてみれば、こまごましたアイコンなんか数kbだとしても一斉にサーバにHTTPリクエストしてるわけだから重くもなるわけで、それを一枚画像で読み込んで貼りつけるだけだから負荷も低くなるってことですか。なるほど考えたもんだ。
っていうか、どっかでみたなと思ったら（昔の？）ゲームで使われてた画像のマッピング（なんといっていいのか知らん）と同じじゃないすか。
まあ、Ajaxもそうだけど。なんだかんだでコロンブスの卵的な技術だなぁ。
以下、その他紹介記事のメモ。
http://journal.mycom.co.jp/news/2007/10/02/007/index.html
http://phpspot.org/blog/archives/2007/10/csshttpcss_spri.html
んで、見つけてから3日も経ってから使ってみた。
まず先に難点を言うと、jpegに出力すると圧縮加減が調整できないので、結構画質が悪く出力される。
PNGかGIFも選べるので、GIFで出力すれば問題ないか？
気がついたメリット。
１．読み込みが早い
それぞれの回線速度の問題もあるけど、体感で早くなったのを実感できる。
２．メニューボタンでonMouseで変化する画像を用意したときに先読み処理をする必要がないこと。
こっちのほうが個人的には大きいかも。例えば、onMouse・onClickでのjavascriptで画像を呼び出すときはここの画像ファイルを順番に読み込むから一瞬画像非表示になってしまう。もともとCSSでonMouseボタンにするのもa:hoverで指定してやるだけだけど、基本的には読み込む順番が発生して表示が遅れてしまうことがある。それを防ぐのにJavascriptで先読みキャッシュするってのもあるけど、スプリット化すればそんなJavascriptを用意する必要もないし、htmlソース自体も軽くなる。
とりあえず、jpegで作ってみた感想を書いた。試してないことは透過GIF・透過PNGなんだけど、ZIPでまとめる元画像はもちろん透過GIFやPNGで無ければならないだろうし、まとめた画像すべてが統一されてないといかんのではないか？という推測。
あと、アニメーションGIFはこのジェネレーターでは絶対に無理だと思う。
でも、仕組みがわかっていればアニメーションGIFは手作りで可能だろう。CSSはジェネレーターが吐き出してくれるのを使うのもありだけど、background-positionで指定しているだけだから技術的に難しいことは無い。（手作業で数字を拾ってくるのが面倒くさいけど・・・）
問題の画像のほうは、ジェネレーターが吐き出した静止画データをテンプレートにして、ボタンなどのイメージをまとめた巨大なアニメーションGIF画像を作ればいいだけのこと。ImageReadyじゃ無くてもフリーウェアでアニメーションGIF作れるソフトはいろいろあるからそんなに難しい問題じゃあない。
すべてのフレーム数が同じになってしまうけど、同じ動きのアニメーションGIFを用意するだけならいいかも。
それぞれ別々の動きをすることも可能か？
総フレーム数で割り切れる動きをするのであれば、ディレイをすべて0.1にして１フレごとに画像を用意すれば静止画と動画の混在するスプリット化画像が用意できる〜・・・って、そもそも静止画を含めた動画画像をスプリット化する必要がどこにあるのかと・・・。
