ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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


ピクチャ 51.png

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

 

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

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

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


sprite-vert.png

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

 

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

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


ピクチャ 52.png

表示する際に利用するCSS

 

SmartSprites: CSS Sprite Generator Done Right

 http://smartsprites.osinski.name/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2