サイトを高速化する方法は色々ありますが、本気でチューニングしたいのなら初期コーディング段階で心がけておきたいのは、CSS Sprite。
転送総量が同じならば、細かい画像を幾つも取得するよりも、大きな画像を一度に取得した方がコネクションなどの手順が減る分だけ確実に速くなります。
(実際にはブラウザ毎に異なる同一ホストとのセッション数上限や、画像の更新頻度次第でのキャッシュ利用など色々な要素が絡んできますが、総じて却って遅くなるようなことは無いはず)
そんなCSS Spriteの欠点は、なにしろページのコーディングがメンドクサクなること。
その手間を少しでも軽減してくれるのが、CSS Sprite Creatorです。
使い方は簡単。
1. ひとまとめにした画像をアップロード
2. 使いたい部分を画像で選択
3. 右側に表示されるCSSをコピペ
これだけです。
手軽な反面、例えば「正確に40x50pxで分割された」ような画像では計算してしまった方が早いようにも思いますが。


コメント