Sprite画像を使ってWebコネクション数を減らす。その補助ツールとして使おう「Sprite Cow」
Sprite CowはSprite画像からアイコンを切り出す作業を補助するソフトウェア。
Sprite CowはPython/JavaScript製のフリーウェア（ソースコードは公開されている）。Webサーバを高速化するための一つの手段がWebサーバへのコネクションを減らすということだ。複数ファイルに分かれているものを一つにまとめればそれだけ接続回数を減らすことができる。
適当に選んでもぴったりフィット
画像とCSSを使ってそれを行うのがSpriteと呼ばれる手法だ。幾つかこの手のソフトウェアがあるが、今回紹介するのはSprite Cow、後々のSprite画像メンテナンスにも使えるソフトウェアだ。
Sprite画像生成のソフトウェアやサービスというのは、一度にまとめて作ってしまうものが多かった。そのため最初のローンチ時には役立っても、その後のメンテナンスでは使い勝手が悪いものが多かった。しかしSprite Cowは一つずつ作っていくので後々のメンテナンスもしやすそうだ。
背景を変更したバージョン
まずSpriteで使う画像を選択する。ここで一つ一つの画像を若干離しておくのがコツと言えそうだ。そして背景は一色（できれば透明）にしておく。画像を読み込んだら区切りたい画像をざっと囲む。そうすると自動的に画像にフィットする形まで囲みが変化してくれる。
そして同時にその画像を使うためのCSSも生成される。後はCSSをコピーしていけば良いだけだ。一般的なSprite生成サービスでは画像を完全に密着させてしまうため、Sprite Cowでうまく切り出せない可能性があるだろう。多少のコツはあるが、後々の運営を考えるとSprite Cow向けに作成しておくのが効率的だ。
[s2If current_user_can(access_s2member_level1)]
[/s2If]
MOONGIFTはこう見る
PNG画像の場合、透明の範囲が多少大きくとも画像のサイズは殆ど変わらない。圧縮されるので色の数や使われ方によってサイズが変わるので、多少大きめに囲みやすいようにアイコンを配置しておくのがコツと言えるだろう。Sprite Cowの便利な点はなんと言っても自動でサイズが変わってくれる所にある。
人間の目で見てぴったりに調整するというのは面倒で、かつストレスのたまる作業だ。Sprite Cowは背景の色を取ることで、それが変化するポイントまで自動で縮小または拡大してくれる。このテクニックは画像編集では当たり前だったが、Webベースではお目にかからなかった。それだけに技術的にも興味深い。