Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。

コマンドラインで実行して連結する

GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。

今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。

SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わりにSmartSpritesが生成したCSSに沿って設定すれば良いだけだ。

実際に生成される画像の例

10個の画像であっても10個のコネクションがはられていたのが、1回のコネクションで済むようになる。これによって接続コストが下がり、表示速度が改善するはずだ。画像表示をCSS化するとデザインが変化するので多少の修正は必要かも知れない。

最初はそれほどでもなくとも、運営を続けていくうちにアイコンや小さなバナーなどが増えてくるかも知れない。自社サービスで一回の表示でどれだけの画像が転送されているか調べれば、改善しようと言う気になるかも知れない。

表示する際に利用するCSS

**SmartSprites: CSS Sprite Generator Done Right

　**
http://smartsprites.osinski.name/