今回は前回の記事を題材にして、なぜ「画像を一枚にするのか？」っというところにスポットを当ててみます。

ナビゲーションを簡単に作ろうと思えば「id（#homeなど）ひとつに対して画像を作った方が早い」っというのは当然のことです。idに対してそのid用の画像を設定するだけで細かな設定が必要ありませんから。
もし、これがロールオーバーのアクションも何も設定しないのであればそれでも構わないのですが、たいていのホームページはロールオーバーのアクションをつけるのが至極当然な話です。
では、なぜロールオーバーするといけないのか？それはCSSだとロールオーバーする時に画像を読み込むための遅延が発生するからです。これはサーバやPC性能が悪いとかいうレベルの話ではなくどんな環境下でも起こるものです。まあ、なんだかんだ言うよりやってみましょう。

サンプル

どうでしょう？まあ、画像も小さいですし、そこそこのPC環境と接続環境であればそこまで気になるものでもないかもしれません。しかし、、ブラウザによっては、ロード中のアイコンがフェイバリットアイコンを表示している部分にちらちら表示されてあまり見栄えがよくありません。ものによっては、読み込みに時間がかかって画像自体がチラチラすることもあります。

これがロールオーバー時の画像も含めて一枚の画像になっていれば、最初にページを読み込んだ時点で読み込みが完了するのでこういった減少を回避することができます。

画像を一枚にするとファイルサイズが大きくなって結果ページの読み込みが遅くなるんじゃないの？っという議論が間々あるようですが、どちらにせよ最終的に読み込まなければいけないファイルサイズは違わないですし、ナビゲーションの画像を一枚の画像にしたぐらいで読み込に時間がかかるというようなことはないです。もし、ページの読み込みがあまりにも遅いという場合は、他の原因を考えるべきでしょう。