7月
6

CSSスプライトを使ってページの読み込み速度を向上する

By admin // CSS, TIPS, ホームページのアイデア // コメントは受け付けていません。

ホームページを作るときには画像をたくさん使いますが、
たくさんの画像を使うと、画像の数だけデータを読み込みに行かないといけないので、ページ全体の表示速度が遅くなります。
普段あまり気付かないことですが、少しでも表示速度を早くしたいと思えば、
このCSS Spriteという画像の一部のみを表示する方法を使ってみましょう。
CSS Spriteを使えば、１度の画像の読み込みで済むのでページ全体として読み込み速度が向上します。
また、この方法はCSSを使ったマウスオーバー画像にも使えます。

CSS Spriteとは大きい画像を読み込んで一部だけを表示する方法

CSS Spriteとは初めに大きい画像を読み込んで、必要に応じて一部を表示する方法です。
つまり、次のような複数のアイコンが並んだ画像を用意してWEB上で一部を切り取ります。

背景画像として一部だけ表示する

まずはbackground-imageで画像を読み込みます。
その際、表示したい領域の高さと幅を指定しておきます。

div.image
{
	width:128px;
	height:128px;
	background-image:url('./image/img01.png');
	background-position:0px 0px;
}

このようにすると次のような表示になります。

左上のアイコンが配置されたように見えますが、
実際には画像全体を読み込んで、左上の一部のみを表示させているのです。
CSS sprite

ここで、次のようにbackground-positionの数値を変えて
背景の配置位置を変えると、別のアイコンを表示させることができます。

div.image
{
	width:128px;
	height:128px;
	background-image:url('./image/img01.png');
	background-position:-150px 0px;
}

このときに、実際には画像とその表示領域の関係はこのようになっています。

CSS sprite

注意して欲しいのはbackground-positionの指定の値はマイナス(-)になります。
このbackground-positionというのは画像を配置する位置のこと。
左上を基準としてそれぞれ右と下がプラスの値になります。
画像の右側を表示したい場合は、画像自体は左側に移動しないといけません。
画像の下側を表示したい場合は、画像自体は上側に移動させないといけません。
よくわからなくても大丈夫。
何度も使っているうちに慣れてきます。