Ed Eliot氏およびStuart Colville氏は9月28日(ドイツ時間)、Webページにおける画像の読み込みオーバーロードを軽減するためのおもしろい取り組みをWebサービス「CSS Sprite Generator」として公開した。ページを読み込む場合、画像を要求するHTTPリクエストが発行されるわけだが、「CSS Sprite Generator」はその要求数を低減させようとするものだ。

ページが画像を多く含んでいる場合、画像を取得するためのHTTPリクエストが大量にWebブラウザから発行されやすくなる。このHTTPリクエストを軽減するために、ページで使われている画像をひとつの大きな画像にマージしてしまい、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというのがCSS Sprite Generatorでの発想だ。

CSS Sprite Generatorでは画像をマージするための機能が提供されるほか、マージした画像から対象とする画像を表示するためのCSSデータを生成する。画像はZIPファイルにまとめてアップロードすればいい。現在のところサポートされている画像形式はGIF、PNG、JPEGで合計サイズが1MB以下とされている。CSS Sprite Generatorを使うことで画像を取得するためのHTTPリクエストの数を軽減させることができるほか、重複している画像データをひとつのデータにマージすることで通信量も削減できる。

Ed Eliot氏およびStuart Colville氏の両氏は現在、2008年の早い時期に出版が予定されている書籍「Webサイトパフォーマンス」を執筆中で、今回公開されたCSS Sprite Generatorは同書籍の執筆に関連して公開されたもの。書籍をサポートするために公開されたもので、今後も同種のWebアプリケーションが公開されていくとみられる。Webアプリケーションデベロッパは書籍と同じく同サポートサイトにも注目しておきたい。

Website Performance - CSS Sprite Generator