MOONGIFT

必見！CSSを使って複数の画像を一つに「CSS Sprite Generator」

タグ: [オープンソース] [デザイン] [ライブラリ] [BSD Lisence] [CSS] [画像] [開発] [Firefox] [IE] [Web]

Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。

実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。

今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。

CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさにGoogle的（そこまで詰まってはいないが）な画像表示が可能になる。

生成される画像の背景色や画像の種類、大きさなどが指定でき、CSSもクラス名のプリフィックスなどが指定できる。これを使えば画像を多用しているサイトなどでよく使われるアイコンやボタンなどを統合し、コネクションやキャッシュを十分に活用できるようになるはずだ。

サイトの負荷が減れば運用コストが低減する。ネットワークも利用帯域が減るだろう。ユーザにとっても、サービス側にとっても嬉しい仕組みになるのではないだろうか。

Website Performance | CSS Sprite Generator
　http://spritegen.website-performance.org/

CSS Sprite Generator in Launchpad
　https://launchpad.net/css-sprite-generator/

トラックバック URL :

February 3rd, 2008 Posted by admin | 1コメント