CSSスプライトの使いどころ

スマートフォンを利用してWebサイトを閲覧するユーザーは年々、増加してきている背景もあり、より一層ページの読み込み速度を意識したコンテンツ作りは重要になってきます。CSSスプライトは表示速度を改善できる手法の1つです。

CSSスプライトとは

CSSスプライトとは、背景画像をスタイルシートで読み込む際にそれぞれの画像を1枚にまとめて必要に応じて読み込む手法です。こうすることにより、1つずつ個別に画像を切り出して読み込むより、1つに読み込む画像をまとめた方がサーバーへのHTTPリクエスト回数を減らすことができ、表示速度を上げることが期待できます。

画像を表示する方法

実際に画像を表示させる場合は、background-positionプロパティを指定して表示させます。左上を基準としてx軸、y軸の値を決めます。そして、使いたい画像の幅と高さを指定すれば表示されます。

.hoge {
  width: 50px;
  height: 50px;
  background: url(images/sprite.png) no-repeat;
  background-position: 0 -200px;
}

CSSスプライトを利用すれば、1枚の画像で画像管理をする手軽さがあり、表示速度の改善も期待されますが、一方でどこか一部分を修正するとなった場合にスプライト画像全体を修正しなければならなくなるので、場合によっては、余計に手間がかかる恐れもあります。場合によっては、CSSスプライトを使うときは基本的に修正、変更をしないアイコン画像やパーツなどをスプライト画像にして利用するのが良いかもしれません。
いずれにしても自身のサイトの表示速度パフォーマンスに問題がある場合には、一度CSSスプライトを試してみると良いでしょう。