さらにここでCSS Sprite Generatorを使って画像統合を行ってみる。CSS Sprite Generatorはページで使われている画像を1つの大きな画像にマージし、かわりにCSSの機能を使ってマージされた画像から必要な部分だけを表示しようというもので、画像を取得するためのHTTPリクエストを削減できるという特徴がある。CSS Sprite Generatorを使うことでキャッシュのない初回アクセス時でも転送量の縮小とHTTPリクエスト回数が減少していることを確認できる。

CSS Sprite Generatorで画像統合 - 初回アクセスでも転送量の縮小とHTTPリクエスト回数削減を実現

同状態でComponents表示させると次のようになる。もともとのWebページは1から9まで9つの画像ファイルが用意されているわけだが、CSS Sprite Generatorを使って画像が1つにまとまられていることを確認できる。

CCSS Sprite Generatorを使って画像ファイルが1つにまとめられている

YSlowで各種調整を実施したあとで、さらにCSS Sprite Generatorを使って画像を統合するという流れはそれなりに簡単で効果のある方法のようだ。CSS Sprite Generatorについてはこちらで簡単に紹介しているので参考にしてほしい。