CSSスプライトで、スムーズに画像を切り替える

2014/06/20
2013/12/20
Webデザインテクニック

マウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか？ブラウザや、PCの性能によっても変わってくるんでしょうけど。

要するに↓こんな感じです。

これはこのサイトで使ってるページトップへ移動するためのアイコンなのですが、このアイコンにカーソルをのせる度に、これがすごく気になってたんですね。
（正確にはブラウザでそのサイトを初めて読み込んだ後（キャッシュに画像が残ってない状態で）、カーソルを合わせる時です。

なのでこの、CSSスプライトを使う事に。
ちなみにCSSスプライトとは、マウスホーバーなどで画像を切り替える時に、onMouse,offMouseでそれぞれに画像を設定して2枚使うのではなく、必要となる複数（今回の場合は2枚）の画像を1枚にして、cssのposition設定で表示される部分を切り替えて、サイトの表示速度をあげることができるCSSのテクニックです。
この場合だと、2枚の画像を2回に分けて読みこむのではなく、1枚を1回で読み込むので、その分早く表示できるようになるわけですね。

要するに↓こんな感じになります。

ちなみにalt属性が使えなかったり、更新時に手間がかかったり、背景画像のリピート表示ができなかったりと（これは当方はできたのですが、できない場合もあるようです。）、使えない状況も出てくるかと思いますので、このページトップへのアイコンや、メニューバーなど、Webサイトを構成するうえで必ずしもきちんと表示しなくても問題のない画像には、この方法を使った方がサイト表示の高速化につながるので、面倒でなければ使った方がよいテクニックかな？と思います。

同じように画像が切り替わる時の”チラチラ”が気になる方、使ってみてはいかがでしょうか？

このCSSスプライトについては、WEBクリエイターボックスのまなさんのページを主に参考にさせていただいたので、
html,cssの書き方等、もう少し詳細を知りたい方は、マナさんのサイトまで！
https://www.webcreatorbox.com/tech/css-sprite/