CSSを使用したページ読み込みのパフォーマンス向上ツールPHPプロ！ニュース

PEARのImage_TextやText＿HighlighterのメンテナでもあるStoyan Stefanov氏による新しいプロジェクトCSS Sprites Generatorが公開されています。

CSS Sprites Generatorはページの読み込みを高速化するためのWebベースのツールで、読み込みのパフォーマンスを向上させるために、画像読み込みのリクエスト数を減らすことができます。

使用方法は非常に簡単で、サイトにアクセスして、複数の画像をアップロードするだけです。アップロードをすると、１枚のPNGファイルとHTMLのURLが表示されるので、それら２つを保存しておきます。

あとは、PNGファイルをCSSのbackgroundに指定して、background-positionを画像ごとに変えていけば、必要な画像だけを表示することができようになります。

これをどのように実現しているかというと、まず複数の画像を含んだ大きな画像を１枚作成します。次に、CSSのbackground-positionを使用して大きな画像の必要な部分のみを表示する、ということを行います。

なお、Stoyan Stefanov氏のブログによると、画像の結合はimagemagickを使用して行っており、結合用のコマンドをPHPで作成し、system関数を呼び出しています。

細かい画像の数が多すぎてページの表示が重い場合は、試してみるとよいでしょう。