Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 0
コマンドラインで実行して連結する
0
GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 0
今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 0
SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わりにSmartSpritesが生成したCSSに沿って設定すれば良いだけだ。 0
実際に生成される画像の例
0
10個の画像であっても10個のコネクションがはられていたのが、1回のコネクションで済むようになる。これによって接続コストが下がり、表示速度が改善するはずだ。画像表示をCSS化するとデザインが変化するので多少の修正は必要かも知れない。 0
最初はそれほどでもなくとも、運営を続けていくうちにアイコンや小さなバナーなどが増えてくるかも知れない。自社サービスで一回の表示でどれだけの画像が転送されているか調べれば、改善しようと言う気になるかも知れない。 0
表示する際に利用するCSS
0
SmartSprites: CSS Sprite Generator Done Right
http://smartsprites.osinski.name/
0
MOONGIFTの関連記事
このエントリーを含むTwitter
アンケート